/*
Theme Name: BlankSlate Child
Template: blankslate
*/


/* ===================================== RESET ===================================== */

img, svg, iframe, video {
  display: block;
  max-width: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

ul, ol {
  list-style: none;
}

button, input, textarea {
  font: inherit;
  background: none;
  border: none;
  outline: none;
}

/* ===================================== ОБЩИЕ СТИЛИ ===================================== */

:root {
    --color-dark: #1A1A1A;
    --color-orange: #FF7700;
    --color-gray: #9D9E9D;
    --color-light: #EFEFEF;
}


body {
	padding-top: 118px;
	font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-dark);
}

@media (min-width: 1920px) {
  body {
    max-width: 2560px;
    margin: 0 auto;
  }
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu Condensed', sans-serif;
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
}

h1 {
	font-size: 50px;
	line-height: 54px;
}

h2 {
	font-size: 46px;
	line-height: 50px;
	color: var(--color-orange);
}

h3 {
	font-size: 30px;
	line-height: 34px;
}

h4 {
	font-size: 26px;
	line-height: 30px;
}

p {
	font-size: 16px;
	line-height: 20px;
	margin: 0;
}

.section-title {
    width: 1200px;
    max-width: 100%;
    margin: 60px auto; /* отступ сверху и снизу */
    text-align: center; /* центрируем заголовок */
}

.section-title h2 {
    margin: 0; /* убираем дефолтные отступы браузера */
}

@media (min-width: 1920px) {
	h1 {
	font-size: 78px;
	line-height: 84px;
	}
	
	h2 {
	font-size: 52px;
	line-height: 58px;
	}
	
	h3 {
		font-size: 34px;
		line-height: 38px;
	}
	
	p {
	font-size: 22px;
	line-height: 30px;
	font-weight: 300;
	}
}

@media (max-width: 1024px) {
	body {
		padding-top: 128px;
	}
	h2 {
		font-size: 42px;
		line-height: 44px;		
	}
	h3 {
		font-size: 30px;
		line-height: 34px;
	}
	h4 {
		font-size: 22px;
		line-height: 24px;
		font-weight: 600;
	}
}

@media (max-width: 668px) {
	body {
	padding-top: 100px;	
	}
}

@media (max-width: 430px) {
	body {
		padding-top: 86px;
	}
	h1 {
		font-size: 38px;
		line-height: 40px;
		font-weight: 600;
		text-transform: uppercase;
	}
	h2 {
		font-size: 30px;
		line-height: 32px;
		text-transform: uppercase;
	}
	h3 {
		font-size: 22px;
		line-height: 26px;
		text-transform: uppercase;
	}
	h4 {
		font-size: 16px;
		line-height: 20px;
		text-transform: uppercase;
	}
	p {
	font-size: 15px;
	line-height: 18px;	
	}
}

/* ==================== Заголовки страниц ==================== */
.page-header-section {
  width: 1200px;
  max-width: 100%;
  margin: 40px auto 40px;
  padding: 0;
}

.page-header-container {
  display: flex;
  align-items: stretch;
}

.page-header-left {
  display: flex;
  align-items: center;
  border-bottom: 3px solid var(--color-dark);
}

.page-header-left h1 {
  margin: 0;
  padding-bottom: 5px;
}

.page-header-right {
  display: flex;
  align-items: flex-end;
  flex: 1;
  gap: 20px;
}

.page-header-line {
  flex: 1;
  border-bottom: 1px solid var(--color-gray);
  opacity: 50%;
}

.page-header-icon {
  width: 72px;
  height: 72px;
}

@media (min-width: 1920px) {
	.page-header-section {
  		width: 100%;
  		max-width: calc(100% - 240px);
  		padding: 0;
	}
}

@media (max-width: 1240px) {
	.page-header-section {
    	width: 100%;
    	padding: 0 24px;
  }
	
	.page-header-right img {
		display: none;
	}
}
	
@media (max-width: 430px) {
	.page-header-section {
    	padding: 0 12px;
  }
}




/* ===================================== ШАПКА САЙТА ===================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
    width: 100%;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 15px 0 15px 0;
	overflow: visible;
}

.header-container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 10px;
}

/* Левый блок (логотип + телефон) */
.header-left {
    display: flex;
    align-items: center;
    gap: 38px; /* расстояние между логотипом и телефоном */
    margin-right: auto; /* прижимает к левому краю */
}


/* Логотип */
.site-logo img {
    height: 88px;
    width: auto;
    object-fit: contain;
}

/* Телефон */
.site-phone {
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
	font-weight: 600;
	line-height: 22px;
    color: #808080;
    display: flex;
    align-items: center;
    gap: 8px;
	transform: translateY(16px);
}

.site-phone .fa-phone {
    font-size: 18px;
    color: #808080;
}

/* Меню */
.main-navigation {
    transform: translateY(19px);
}

.main-navigation .main-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.main-navigation .main-menu li a {
	display: inline-flex;
    align-items: center;
    gap: 0; /* по умолчанию без отступа */
    text-decoration: none;
    color: #1A1A1A;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    font-weight: 400;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.main-navigation .main-menu li a:hover {
    color: var (--color-orange);
}

/* ----------------- Стили для пункта меню "Контакты" ----------------- */
.main-navigation .main-menu .contacts-btn > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* отступ между текстом и иконкой */
    padding: 5px 0 2px 0;
	font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--color-dark);
    transition: border-bottom-color 0.3s ease;
}

/* Иконка стрелки через псевдоэлемент */
.main-navigation .main-menu .contacts-btn > a::after {
    content: '';
    display: inline-block;
    width: 20px; /* подстрой под размер иконки */
    height: 20px;
    background: url('https://ooostroyprom.ru/wp-content/uploads/2025/09/arrow-menu-contacts.svg') no-repeat center;
	color: var (--color-dark);
    background-size: contain;
	flex-shrink: 0; /* иконка не сжимается */
    transition: transform 0.3s ease;
}

/* Наведение: граница + поворот иконки */
.main-navigation .main-menu .contacts-btn:hover > a,
.main-navigation .main-menu .contacts-btn > a:hover {
    border-bottom-color: var(--color-orange);
}

.main-navigation .main-menu .contacts-btn:hover > a::after,
.main-navigation .main-menu .contacts-btn > a:hover::after {
    transform: translateX(6px);
}

.mobile-phone {
	display: none;
}


/* ----------------- Иконка для пункта "Каталог" ----------------- */
.main-navigation .main-menu .catalog > a {
    gap: 8px; /* отступ между текстом и иконкой */
}

.main-navigation .main-menu .catalog > a::after {
    content: '';
    width: 15px;
    height: 15px;
    background: url('https://ooostroyprom.ru/wp-content/uploads/2025/09/icon-catalog-1.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.main-navigation .main-menu .catalog:hover > a::after,
.main-navigation .main-menu .catalog > a:hover::after {
    transform: rotate(180deg);
}



/* ================== ВЫПАДАЮЩЕЕ МЕНЮ ================== */

/* Подменю по умолчанию */
.main-navigation .main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-dark);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 220px;
    z-index: 9999;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Ссылки в подменю */
.main-navigation .main-menu .sub-menu li a {
    display: block;
    padding: 10px 15px;
    font-size: 14px;
    color: var(--color-light);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.main-navigation .main-menu .sub-menu li a:hover {
    background: #444444;
    color: #fff;
}

/* Родительский пункт */
.main-navigation .main-menu li {
    position: relative;
}




/* Десктоп: показываем при наведении */
@media (min-width: 1025px) {
    .main-navigation .main-menu li:hover > .sub-menu {
        max-height: 500px; /* достаточно для раскрытия */
    }
}

/* Мобильная версия */
@media (max-width: 1024px) {
    .main-navigation .main-menu .sub-menu {
        position: static;
        background: var(--color-dark);
        padding: 10px 0 10px 20px;
        min-width: auto;
    }

    .main-navigation .main-menu li.active > .sub-menu {
        max-height: 500px; /* раскрытие при клике */
    }

    .main-navigation .main-menu .sub-menu li a {
        color: #fff;
        font-size: 16px;
        padding: 10px 15px;
    }

    /* Стрелочка для пунктов с подменю */
    .main-navigation .main-menu .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 8px;
        background: url('https://ooostroyprom.ru/wp-content/uploads/2025/09/menu-arrow-white.svg') no-repeat center;
        background-size: contain;
        transition: transform 0.3s ease;
        filter: none;
    }

    /* Поворот при раскрытии */
    .main-navigation .main-menu .menu-item-has-children.active > a::after {
        transform: rotate(90deg);
    }
}




/* ================== БУРГЕР-МЕНЮ ================== */
/* Бургер и мобильное меню */
.burger-menu {
    display: none;
    cursor: pointer;
	height: 60px;
	width: auto;
}

.mobile-logo {
    display: none; /* скрыт на десктопе */
	margin-left: -4px;
    margin-bottom: 40px; /* отступ снизу */
}

.close-menu {
    display: none; /* скрыт на десктопе */
}

/* ================== АДАПТИВ ШАПКИ ================== */
/* Десктоп: широкоформатные экраны */
@media (min-width: 1920px) {
    .header-container {
        width: 100%;
        max-width: 100%;
        padding: 0 120px; /* отступы слева и справа */
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
	
	/* Телефон */
	.site-phone {
    	font-size: 26px;
		line-height: 26px;
		transform: translateY(16px);
	}

	.site-phone .fa-phone {
    	font-size: 20px;
	}
	
	.main-navigation {
    transform: translateY(21px);
}

	.main-navigation .main-menu {
    	gap: 40px;
}
	
	.main-navigation .main-menu li a {
    	font-size: 17px;
	}
	
	/* Ссылки в подменю */
	.main-navigation .main-menu .sub-menu li a {
		font-size: 15px;
	}
}

@media (max-width: 1240px) {
	.site-phone {
		font-size: 20px;
	}
	.site-header {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 1024px) {
	.site-header {
   		padding: 20px 20px;
	}
	
    /* Показываем бургер, скрываем десктопный телефон */
    .burger-menu {
        display: block;
    }
	.mobile-logo {
    display: block;
    }
    .mobile-logo img {
        max-height: 60px; /* подгоняем размер */
        width: auto;
    }
    .desktop-phone {
        display: none;
    }
    .main-navigation .main-menu {
        display: none; /* скрываем обычное меню */
    }

    /* Мобильное выезжающее меню с плавным выездом */
    .main-navigation {
		transform: none;
        position: fixed;
        top: 0;
        right: -100%; /* начальное положение за экраном */
        width: 100%;
        height: 100%;
        background: #1A1A1A;
        display: flex;
        flex-direction: column;
        padding: 40px 30px;
        z-index: 9999;
        overflow-y: auto;
        transition: right 0.3s ease; /* плавный выезд */
    }

    /* Когда меню активно */
    .main-navigation.active {
        right: 0;
    }

    .main-navigation.active .main-menu {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .main-navigation.active .main-menu li a {
        color: #fff;
        font-family: 'Ubuntu', sans-serif;
        font-size: 18px;
        text-decoration: none;
    }

    .main-navigation.active .mobile-phone {
        display: flex;
        align-items: center;
        margin-top: auto;
        font-family: 'Ubuntu', sans-serif;
        font-size: 22px;
		font-weight: 600;
        color: var(--color-gray);
        gap: 10px;
    }

    /* Левый блок в шапке: логотип прижат к левому краю, бургер к правому */
    .header-container {
        justify-content: space-between;
    }

    .main-navigation.active .close-menu {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 36px;
        color: #fff;
        cursor: pointer;
        z-index: 10001;
    }


}

@media (max-width: 668px) {
	.site-logo img {
		height: 60px;
		width: auto;
	}	
}

@media (max-width: 430px) {
	.site-header {
   		padding: 12px 12px;
	}
	.site-logo img {
		height: 60px;
		width: auto;
	}
	.main-navigation {
		transform: none;
	}
}




/* ===================================== ГЛАВНЫЙ ЭКРАН ===================================== */


.main-screen {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 24px; /* расстояние между левой и правой частями */
    padding: 24px 0 45px;
    min-height: 560px; /* минимальная высота экрана */
}

/* Левая часть */
.main-left {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
    padding: 0 30px 30px 30px;
	overflow: hidden;
	transition: background-size 0.3s ease;
}

.left-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}


.left-content h1 {
	color: #fff;
}

/* Кнопка с иконкой */
.main-left .main-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background-color: transparent;
    color: #fff;
    padding: 6px 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 18px;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.main-left .main-btn:hover {
	border-bottom-color: var(--color-orange);
}

/* Иконка в кнопке */
.main-left .main-btn img {
    width: 20px;
    height: 20px;
	transition: transform 0.3s ease;
}

/* Поаворот иконки при наведении */
.main-left .main-btn:hover img {
    transform: translateX(6px);
}


/* Анимации появления */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.left-content h1 {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.3s; /* появление чуть позже загрузки */
}

.left-content .main-btn {
  opacity: 0;
  animation: fadeInUp 0.3s ease forwards;
  animation-delay: 0.8s; /* появляется после заголовка */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.inner-container-content h2 {
	font-size: 18px;
	opacity: 0;
  	animation: fadeInUp 0.3s ease forwards;
  	animation-delay: 1.3s; /* появление чуть позже загрузки */
}



/* Правая часть */
.main-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px; /* вертикальное расстояние между контейнерами */
}

/* Верхний контейнер */
.main-right .top-container {
    flex: 1;
    background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
    min-height: 265px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
	padding: 24px;
}

.main-right .top-container .top-container-experience {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.years-icon {
	height: 86px;
	width: auto;
	opacity: 0.3;
}

.top-container-experience p {
	font-size: 15px;
	color: #fff;
}

/* Нижний контейнер */
.main-right .bottom-container {
    flex: 1;
    display: flex;
    gap: 24px;
}

/* Вложенные контейнеры нижнего блока */
.main-right .bottom-container .inner-container {
    flex: 1;
    background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
    min-height: 265px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
	padding: 24px;
}

.inner-container-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.inner-container-content h2 {
	font-size: 22px;
	line-height: 26px;
	color: #fff;
	margin: 0;
}

@media (min-width: 1920px) {
	.main-screen {
    	width: 100%;
		max-width: 100%;
    	margin: 0;
		padding: 30px 120px 45px;
   	 	min-height: 1080px; /* минимальная высота экрана */
		gap: 30px;
	}
	.main-left {
		padding: 0 60px 60px 60px;
	}
	.main-left .main-btn {
    gap: 30px;
    font-size: 24px;
    border-bottom: 2px solid #fff;
	}
	.main-left .main-btn img {
		width: 24px;
		height: auto;
	}
	.main-right {
		gap: 30px;
	}
	.main-right .bottom-container {
    	gap: 30px;
	}
	.main-right .top-container {
		padding: 40px;
	}
	.top-container-experience p {
		font-size: 20px;
	}
	.main-right .bottom-container .inner-container {
		padding: 40px;
	}
	.inner-container-content h2 {
		font-size: 28px;
		line-height: 32px;
	}
	.years-icon {
		height: 120px;
	}
}

@media (max-width: 1240px) {
	.main-screen {
		padding: 24px;
		min-height: 560px;
		gap: 24px;
	}
	.main-right {
		gap: 24px;
	}
	.main-right .bottom-container {
    	gap: 24px;
	}
	.main-right .top-container {
		padding: 24px;
	}

	.main-right .bottom-container .inner-container {
		padding: 24px;
	}
	.years-icon {
	height: 86px;
	}
}

@media (max-width: 1024px) {
	.main-screen {
		flex-direction: column;
		padding: 24px;
		gap: 20px;
	}
	.main-left {
		min-height: 660px;
	}
	.main-right {
	gap: 20px;	
	}
	.main-right .top-container {
		min-height: 300px;
	}
	.main-right .bottom-container {
		min-height: 300px;
		gap: 20px;
	}
	.main-right .bottom-container .inner-container {
		justify-content: flex-start;
    	align-items: flex-end;
	}
}

@media (max-width: 430px) {
	.main-screen {
		padding: 12px;
		gap: 12px
	}
	.main-left {
		min-height: 500px;
		padding: 20px;
		justify-content: flex-start;
	}
	.main-right {
		gap: 12px;	
	}
	
	.main-right .top-container {
		padding: 20px;
	}
	
	.main-right .bottom-container {
		flex-direction: column;
		min-height: 260px;
		gap: 12px;
	}
	
	.inner-container {
		padding: 20px;
	}
	.main-left .btn {
		font-size: 14px;
	}
}


/* ===================================== БЕГУЩАЯ СТРОКА ===================================== */
.marquee-section {
  	overflow: hidden;
  	width: 100%;
	max-width: 1200px;
	margin: 0 auto 45px;
	box-sizing: border-box;
}

.marquee {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: marquee 60s linear infinite;
  will-change: transform;
}

/* Дублирование контента через CSS — не нужно в HTML! */
.marquee-track::after {
  content: attr(data-content);
}

/* Оформление каждого слова */
.marquee-track span {
  	display: inline-block;
  	font-family: 'Ubuntu Condensed', sans-serif;
  	font-size: 22px;
  	color: rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
  	border: 2px solid rgba(0, 0, 0, 0.4);
  	padding: 4px 20px 6px;
  	border-radius: 50px;
  	white-space: nowrap;
}

/* Анимация */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (min-width: 1920px) {
	.marquee-section {
		max-width: 100%;
	}
	.marquee-track span {
		font-size: 28px;
		padding: 6px 30px 8px;
	}
}
@media (max-width: 1240px) {
	.marquee-section {
		margin: 0 auto 24px;
	}
}

@media (max-width: 430px) {
	.marquee-section {
		margin: 0 auto;
  		padding: 12px 0 12px;
	}
}



/* ===================================== ПРЕИМУЩЕСТВА ===================================== */
.advantages {
    width: 1200px;
    max-width: 100%;
	margin: 0 auto; /* отступы сверху/снизу */

}

.advantages-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* одинаковая высота по самому высокому контейнеру */
}

.advantage-item {
    flex: 1;
	padding: 30px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* выравнивание контента по левому краю */
    gap: 15px;
}


.advantage-item img {
    height: 80px;
	width: auto;
    object-fit: contain;
}

.advantage-item h3 {
    font-family: 'Ubuntu Condensed', sans-serif;
	font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.advantage-item p {
	font-size: 16px;
    line-height: 1.5;
	color: #4E4E4E;
    margin: 0;
}

/* Фоны для контейнеров */
.advantage-1 {
    background: #FAFAFA;
}

.advantage-2 {
    background: #EFEFEF;
}

.advantage-3 {
    background: #D5D5D5;
}

@media (min-width: 1920px) {
	.advantages {
    	width: 100%;
		padding: 0 120px;
	}
	.advantage-item {
		padding: 60px;
		gap: 20px;
	}
	.advantage-item img {
    	height: 120px;
	}
	.advantage-item h3 {
    	font-size: 32px;
	}
	.advantage-item p {
    	font-size: 20px;
	}
}

@media (max-width: 1240px) {
	.advantages-container {
		padding: 0 24px;	
	}
}

/* Мобильная версия */
@media (max-width: 1024px) {
    .advantages-container {
        flex-direction: column;
    }
	.advantage-item {
		padding: 20px;
	}
}

@media (max-width: 430px) {
    .advantages-container {
		padding: 12px;
    }
	.advantage-item img {
    height: 60px;
	width: auto;
	}
	.advantage-item h3 {
		font-size: 20px;
		line-height: 24px;
	}
	.advantage-item p {
		font-size: 14px;
		line-height: 1.4; 
	}
}



/* ==================================== УСЛУГИ ===================================== */
/* Секция услуги */
.service {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto 60px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-container {
    display: flex;
    gap: 24px;
}

/* Левый контейнер */
.service-left {
    flex: 1; /* половина ширины родителя при display:flex */
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* контент прижат к верху */
    justify-content: flex-start; /* контент прижат к левому краю */
}

/* Полупрозрачный градиент поверх фона */
.service-left .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0));
    z-index: 1;
}

/* Контейнер с текстом */
.service-left-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
	height: 100%;
    padding: 24px 30px;
}

/* Верхний текст /3 */
.service-top-text {
    font-family: 'Ubuntu', sans-serif;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
	align-self: flex-end;
	text-align: right;
}

/* Заголовок */
.service-left-content h3 {
    margin: 0;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-weight: 400;
    color: #fff;
}


/* Правый контейнер */
.service-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 160px;
    padding: 24px 0;
    background: none;
	border-bottom: 1px solid var(--color-gray);
}

.service-right-top {
    display: flex;
    justify-content: flex-end;
}

.service-right-top img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.service-right-bottom {
    align-self: flex-start;
}

.service-right-bottom p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}


/* Мобильная версия */
@media (min-width: 1920px) {
	.service {
		width: 100%;
		margin: 0 auto 80px;
		gap: 30px;
	}
	.service-container {
		padding: 0 120px;	
	}
	.service-left {
		height: 200px;
	}
	.service-right {
		height: 200px;
	}
	.service-left-content {
		padding: 28px 60px;
	}
	.service-top-text {
		font-size: 20px;
		font-weight: 300;
		color: var (--color-light);
		align-self: flex-start;
		text-align: left;
	}
}
@media (max-width: 1240px) {
	.service-container {
		padding: 0 24px;	
	}
}
	
@media (max-width: 1024px) {
    .service-container {
		padding: 0 24px;
    }
	.service-left-content {
		padding: 20px;
	}
	.service-right {
		padding: 0 0 20px 0;
	}
}
	
@media (max-width: 430px) {
	.service-container {
		flex-direction: column;
		padding: 0 12px;
		gap: 0;
	}
	
	.service-top-text {
		text-align: left;
		margin-bottom: 10px;
	}
	
	.service-right {
		background-color: var(--color-light);
		padding: 20px;
	}
	
	.service-right-top img {
    display: none;
	}
	
	.service-right-bottom p {
		font-size: 16px;
	}
	
	.service-right {
		border-left: 1px solid var(--color-gray);
		border-right: 1px solid var(--color-gray);
	}
}



/* ==================================== СПЕЦТЕХНИКА ДЛЯ СТРОИТЕЛЬСТВА ===================================== */
.info-section {
	max-width: 1200px;
	margin: 0 auto 60px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	padding: 0 30px 30px;
	box-sizing: border-box;
}

.info-section-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.info-section h2 {
	text-align: center;
	background-color: #fff;
	padding: 0 20px 16px;
	display: inline-block;
	margin: 0;
}

.info-section p {
	font-size: 20px;
	line-height: 26px;
	font-weight: 300;
	text-align: center;
	color: #fff;
 	border: 1px solid var(--color-light);
	border-top: none;
  	padding: 0 20px 20px;
  	background: transparent;
  	margin: 0;
  	line-height: 1.6;
}

/* адаптив */
@media (min-width: 1920px) {
	.info-section {
		max-width: calc(100% - 240px);
		margin: 0 auto 80px;
		padding: 0 60px 60px;
	}
	
	.info-section-content {
		gap: 60px;
	}
	
	.info-section h2 {
		padding: 0 60px 30px;
	}
	
	.info-section p {
		font-size: 22px;
		line-height: 30px;
		padding: 0 60px 60px;
	}
}	
	
@media (max-width: 1240px) {
  	.info-section {
		margin: 0 24px 60px;
		padding: 0 20px 20px;
  	}
}

@media (max-width: 430px) {
  	.info-section {
		margin: 0 12px 60px;
  	}

  	.info-section h2 {
    	padding: 0 16px 16px;
  	}

  	.info-section p {
    	font-size: 16px;
		line-height: 20px;
    	padding: 0 16px 16px;
  	}
}


/* ===================================== ГАЛЕРЕЯ СПЕЦТЕХНИКИ ===================================== */
/* ===== Галерея изображений ===== */
.image-gallery-container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto 80px;
  padding: 0;
  position: relative;

}

.image-gallery-container .carousel-inner {
  height: auto;
}

.image-gallery-container .carousel-inner img {
  width: 100%;
  height: 660px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

/* Кастомные стрелки */
.image-gallery-container .carousel-control-prev,
.image-gallery-container .carousel-control-next {
  width: auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  z-index: 5;
}

.image-gallery-container .carousel-control-prev {
  	left: 0;
	opacity: 0.8;
}

.image-gallery-container .carousel-control-next {
  	right: 0;
	opacity: 0.8;
}

/* Кастомные иконки стрелок */
.image-gallery-container .carousel-control-prev-icon,
.image-gallery-container .carousel-control-next-icon {
  background: none;
  width: 60px;
  height: 60px;
}

.image-gallery-container .carousel-control-prev-icon {
  background: url("https://ooostroyprom.ru/wp-content/uploads/2025/10/gallery_arrow_left.svg") no-repeat center;
  background-size: contain;
}

.image-gallery-container .carousel-control-next-icon {
  background: url("https://ooostroyprom.ru/wp-content/uploads/2025/10/gallery_arrow_right1.svg") no-repeat center;
  background-size: contain;
}

/* ===== Адаптив ===== */
@media (min-width: 1920px) { 
	.image-gallery-container { 
		width: 100%; 
		max-width: 100%; 
		margin: 0; 
		padding: 0 120px 80px; 
	} 
	.image-gallery-container .carousel-control-prev {
  	left: 400px;
	}

.image-gallery-container .carousel-control-next {
  	right: 400px;
	}
}

@media (max-width: 1240px) {
  	.image-gallery-container {
    	padding: 0 24px;
  	}
  	.image-gallery-container .carousel-control-prev {
    	left: 10px;
  	}
  	.image-gallery-container .carousel-control-next {
    	right: 10px;
  	}
}

@media (max-width: 430px) {
  	.image-gallery-container {
    	padding: 0 12px;
  	}	
	.image-gallery-container .carousel-inner img {
  		height: 250px;
	}
  	.image-gallery-container .carousel-control-prev {
    	left: 5px;
  	}
  	.image-gallery-container .carousel-control-next {
    	right: 5px;
  	}
	.image-gallery-container .carousel-control-prev-icon,
	.image-gallery-container .carousel-control-next-icon {
  		width: 34px;
  		height: 34px;
	}
}


/* ===================================== КНОПКИ ПОСЛЕ ГАЛЕРЕИ ===================================== */
.equipment-buttons {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 60px auto 60px;
}

.equipment-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 12px 0;
  border-top: 3px solid var(--color-dark);
  background: none;
  color: var(--color-dark);
  text-decoration: none;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
  font-size: 38px;
  transition: 
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

/* Контейнер для иконок */
.equipment-btn img {
  width: 29px;
  height: auto;
  transition: transform 0.3s ease;
}


/* 🔸 Эффект при наведении */
.equipment-btn:hover {
  border-color: var(--color-orange);
}

.equipment-btn:hover img {
  transform: translateX(6px);
}

/* Выравнивание содержимого */
.equipment-btn-left {
  justify-content: flex-start;
}

.equipment-btn-right {
  justify-content: flex-end;
}

@media (min-width: 1920px) {
	.equipment-buttons {
		max-width: 100%;
		margin: 0;
		padding: 0 120px 80px;
		gap: 30px;
	}
	.equipment-btn {
		font-size: 46px;
	}
	.equipment-btn img {
  		width: 32px;
  		height: auto;
	}
}

@media (max-width: 1240px) {
	.equipment-buttons {
		  padding: 0 24px;
	}
	.equipment-btn {
		font-size: 32px;
	}
}

@media (max-width: 430px) {
	.equipment-buttons {
		padding: 0 12px;
		flex-direction: column;
    	gap: 16px;
	}

	.equipment-btn {
		justify-content: space-between;
		font-size: 22px;
	}
	
	.equipment-btn img {
		 width: 22px;
  		height: auto;
	}
}




/* ===================================== ГАРАНТИИ КАЧЕСТВА ===================================== */
.quality-container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto 60px;
	display: flex;
	gap: 24px;
}

.quality-container-left {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.quality-container-left h2 {
	color: #fff;
	margin-left: 30px;
	margin-right: 30px;
}

.quality-container-right {
	flex: 1;
    display: flex;
    flex-direction: column;
	justify-content: space-between;
    gap: 12px;
    background: none;
}

.quality-container-right p {
  margin: 0;
}

.quality-container-right-btn {
    display: inline-flex;
    align-items: center;
	align-self: flex-start;
    gap: 20px;
    background-color: transparent;
    color: var(--color-dark);
    padding: 0 0 6px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 18px;
    border-bottom: 1px solid var(--color-dark);
    cursor: pointer;
    text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.quality-container-right-btn:hover {
	border-bottom-color: var(--color-orange);
}

/* Иконка в кнопке */
.quality-container-right-btn img {
    width: 20px;
    height: 20px;
	transition: transform 0.3s ease;
}

/* Поаворот иконки при наведении */
.quality-container-right-btn:hover img {
    transform: translateX(6px);
} 

@media (min-width: 1920px) {
	.quality-container {
    	width: 100%;
    	max-width: 100%;
    	margin: 0 auto 80px;
		padding: 0 120px;
		gap: 30px;
	}
	
	.quality-container-left h2 {
		margin-left: 60px;
		margin-right: 60px;
	}
	
	.quality-container-right-btn {
		font-size: 24px;
		border-bottom: 2px solid var(--color-dark);
	}
	.quality-container-right-btn img {
		width: 26px;
		height: auto;
	}

}

@media (max-width: 1240px) {
	.quality-container {
		padding: 0 24px;	
	}
}

@media (max-width: 1024px) {
    .quality-container {
		padding: 0 24px;
    }
	.quality-container-left h2 {
		margin: 20px;
 }
}	

@media (max-width: 430px) {
	.quality-container {
		flex-direction: column;
		padding: 0 12px;
		gap: 20px;
	}
	
	.quality-container-left-content h2 {
		text-align: center;
	}
	
	.quality-container-right {
		gap: 20px;
	}
	
	.quality-container-right p {
		text-align: center;
	}
  	.quality-container-right-btn {
    	width: 100%;
    	justify-content: space-between;
    	align-self: stretch; /* чтобы заняла всю ширину родителя */
  	}
	
	.quality-container-right-btn img {
		width: 22px;
		height: auto;
	}
}




/* ===================================== ОТЗЫВЫ ===================================== */
.reviews-carousel-container {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto 60px;
	padding: 0;
	position: relative;
}

.carousel-inner {
	overflow: hidden;
}


.review-card {
	background: var(--color-light);
	color: var(--color-dark);
	padding: 60px 80px 60px;
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.review-card h4 {
	text-align: center;
}

.review-card p {
	font-size: 20px;
	line-height: 26px;
	font-weight: 300;
	text-align: center;
	color: #4E4E4E;
	margin-bottom: 0;
}

.reviews-buttons {
	display: flex;
	gap: 24px;
}

.review-card .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 0 0 6px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.review-card .btn::after {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: url('https://ooostroyprom.ru/wp-content/uploads/2025/09/arrow-menu-contacts.svg') no-repeat center;
  background-size: contain;
  transition: transform 0.3s ease;
}

.review-card .btn:hover {
  border-bottom-color: var(--color-orange);
}

.review-card .btn:hover::after {
  transform: translateX(6px);
}

.quote-icon {
	position: absolute;
	top: -20px;
	left: 20px;
	width: 50px;
	height: 50px;
	z-index: 10;
}

.carousel-control-prev,
.carousel-control-next {
    width: auto;           /* убираем стандартные 15% */
    top: 50%;              /* центрируем по вертикали */
    transform: translateY(-50%);
    opacity: 1;            /* чтобы точно были видны */
    z-index: 5;
}

.carousel-control-prev {
    left: -40px;
	opacity: 50%;
}

.carousel-control-next {
    right: -40px;
	opacity: 50%;
}

/* Кнопки навигации Bootstrap */
.carousel-control-prev-icon,
.carousel-control-next-icon {
	background: none;
}

.carousel-control-prev-icon {
    background: url("https://ooostroyprom.ru/wp-content/uploads/2025/09/left.svg") no-repeat center;
    background-size: contain;
}

.carousel-control-next-icon {
    background: url("https://ooostroyprom.ru/wp-content/uploads/2025/09/right.svg") no-repeat center;
    background-size: contain;
}
.custom-reviews-section.hidden {
	display: none;
}

/* Медиазапросы */
@media (min-width: 1920px) {
	.reviews-carousel-container {
		display: none;
	}
	.custom-reviews-section.hidden {
		display: flex;
	}
}

@media (max-width: 1240px) {
  .reviews-carousel-container {
    max-width: 100%;
    padding: 0 24px;
  }
	.carousel-control-prev {
    left: 10px;
	opacity: 50%;
	}

.carousel-control-next {
    right: 10px;
	opacity: 50%;
	}
}

@media (max-width: 430px) {
.reviews-carousel-container {
    padding: 0 12px;
  }
.review-card {
	padding: 60px 60px 60px;
	}
	.review-card p {
		font-size: 16px;
		line-height: 20px;
	}
.carousel-control-prev {
    left: 5px;
	opacity: 50%;
	}

.carousel-control-next {
    right: 5px;
	opacity: 50%;
	}
	
.reviews-buttons {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	}
}





/* ===================================== ДИНАМИЧЕСКАЯ КАРТА ===================================== */
.map-section {
	width: 100%;
	padding: 0 0 60px 0;
}

.map-container {
 	width: 1200px;
 	max-width: 100%;
 	margin: 0 auto; /* выравнивание по центру */
}

@media (min-width: 1920px) {
	.map-section {
		padding: 0 120px 80px 120px;	
	}
	.map-container {
 		width: 100%;
 		max-width: 100%;
 		margin: 0;
	}
}

@media (max-width: 1240px) {
	.map-section {
		padding: 0 24px 60px 24px;
	}
}

@media (max-width: 430px) {
	.map-section {
		padding: 0;
	}
}


/* ===================================== АРЕНДА СПЕЦТЕХНИКИ---АРЕНДА ОБОРУДОВАНИЯ ===================================== */


/* Карточки спецтехники */
.special-equipment {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	padding: 0;
}
.special-equipment-card {
	position: relative;
	height: 380px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}



.special-equipment a {
	display: none;
}

.hover-card {
	position: absolute;
 	top: 0;
 	right: -100%;
 	width: 100%;
 	height: 100%;
 	background-size: cover;
 	background-position: center;
 	display: flex;
 	justify-content: flex-start;
 	align-items: flex-start;
 	font-family: 'Ubuntu', sans-serif;
 	font-size: 50px;
 	font-weight: 600;
	text-transform: uppercase;
 	background-color: rgba(0,0,0,0.4); /* лёгкий затемнённый фильтр */
	padding: 24px 30px;
 	transition: right 0.3s ease;
}

.hover-card h2 {
	font-family: 'Ubuntu', sans-serif;
 	font-size: 40px;
	line-height: 44px;
 	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
}

.special-equipment-card:hover .hover-card {
 	right: 0; /* выезд слева направо */
}

/* Заголовок в hover карточке */
.hover-card h3 {
 	z-index: 2;
 	position: relative;
 	color: #fff;
 	text-align: center;
 	padding: 0 12px;
}

/* Подпись под карточкой (только на мобильных) */
.special-equipment-card p {
 	display: none;
 	text-align: flex-start;
 	margin: 20px;
 	font-family: 'Ubuntu', sans-serif;
 	font-size: 18px;
 	color: var(--color-light);
}



/* Карточка - призыв к действию - Спецтехника */
.special-equipment-call-to-action {
	max-width: 1200px;
	margin: 60px auto 0;
	padding: 24px;
	background-color: var(--color-orange);
	color: var(--color-dark);
}

.special-equipment-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.special-equipment-card-title {
	display: flex;
	flex-direction: column;	
	gap: 24px;
}

.special-equipment-card-title p {
	font-size: 20px;
	line-height: 26px;
	font-weight: 300;
}

.special-equipment-link img {
    transition: transform 0.3s ease;
    transform-origin: center;/
}

.special-equipment-call-to-action:hover .special-equipment-link img {
    transform: rotate(45deg);
}

@media (min-width: 1920px) {
	.special-equipment {
		max-width: calc(100% - 240px);
		margin: 0 auto 20px;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}
	
	.special-equipment a {
		display: flex;
	}
	
.special-equipment-call-to-action {
		display: none;
	}
}


@media (max-width: 1240px) {
	.special-equipment-call-to-action {
		margin:24px 24px 60px;
  	}
	
	.special-equipment-call-to-action {
		display: none;
	}
}

@media (max-width: 430px) {
	.special-equipment-call-to-action {
		padding: 20px;
    	margin: 12px 12px 40px;
  	}
	
	.special-equipment-card-title p {
		font-size: 16px;
		line-height: 20px;
	}
}

/* Карточка - призыв к действию - Оборудование */
.call-to-action-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background-color: var(--color-orange);
	color: var(--color-dark);
	gap: 24px;
	height: 380px;
}

.equipment-card-title {
	display: flex;	
	justify-content: space-between;
}

.equipment-card-title img {
    transition: transform 0.3s ease;
    transform-origin: center;/
}

.call-to-action-card:hover .equipment-card-title img {
    transform: rotate(45deg);
}

.call-to-action-card p {
	font-size: 20px;
	line-height: 26px;
	font-weight: 300;
}


@media (max-width: 1240px) {
	.special-equipment {
    	width: 100%;
    	padding: 0 24px;
  	}
}


	
@media (max-width: 430px) {
	.special-equipment {
    	padding: 0 12px;
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.hover-card {
    	display: none; /* отключаем анимацию */
	}

	.special-equipment-card p {
    	display: block;
	}
	
	.call-to-action-card {
		gap: 12px;
	}
	
	.call-to-action-card {
		padding: 20px;
		height: auto;
	}
	
	.call-to-action-card p {
		font-size: 16px;
		line-height: 20px;
	}
}

/* ===================================== СТРАНИЦА С СЕРТИФИКАТАМИ ===================================== */

	
/* Карточки с сертификатами */
.custom-certs-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0;
	align-items: stretch; /* все карточки одинаковой высоты */
}

.custom-certs-card-link {
  display: flex;
}

.custom-certs-card {
	flex: 1;
	position: relative;
	background: var(--color-light);
	padding: 30px;
	box-sizing: border-box;
	overflow: hidden;
	transition: color 0.3s ease;
	cursor: pointer;
	display: flex;               /* вертикальный флекс */
	align-items: center;
	gap: 16px;
	height: 100%;
}

.custom-certs-card img {
	width: 46px;
	height: auto;
	filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
	transition: transform 0.3s ease;
}

.custom-certs-card:hover .cert-icon {
  transform: scale(1.15); /* увеличение иконки */
}

/* Ховер-анимация: фон выезжает справа налево */
.custom-certs-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: -100%; /* стартовая позиция: скрыт полностью справа */
	width: 100%;
	height: 100%;
	background: var(--color-orange);
	z-index: 0;
	transition: right 0.4s ease; /* плавное движение */
}

.custom-certs-card:hover::before {
	right: 0; /* выезжает справа налево, полностью покрывая карточку */
}

/* Контент поверх фона */
.custom-certs-card > * {
	position: relative;
	z-index: 1;
}

body.page-id-20 {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* высота = весь экран */
}

body.page-id-20 .site-main {
  flex: 1; /* растягиваем контент */
}

/* Медиазапросы */
@media (min-width: 1920px) {
	.custom-certs-container {
		max-width: calc(100% - 240px);
		margin: 0 auto;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}
	.custom-certs-card {
		padding: 60px;
		justify-content: space-between;
		gap: 30px;
	}
}

@media (max-width: 1240px) {
  .custom-certs-container {
    max-width: 100%;
    padding: 0 24px;
    grid-template-columns: 1fr 1fr; /* можно 2 карточки в ряд */
  }
}

@media (max-width: 430px) {
  .custom-certs-container {
    padding: 0 12px;
    grid-template-columns: 1fr; /* одна карточка в ряд */
	gap: 12px;
  }
}
	
	
/* ===================================== СТРАНИЦА С ОТЗЫВАМИ ===================================== */


/* Карточки с отзывами */
.custom-reviews-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0;
	align-items: stretch; /* все карточки одинаковой высоты */
}

.custom-review-card-link {
  display: flex;
}

.custom-review-card {
	flex: 1;
	position: relative;
	background: var(--color-light);
	padding: 30px;
	box-sizing: border-box;
	overflow: hidden;
	transition: color 0.3s ease;
	cursor: pointer;
	display: flex;               /* вертикальный флекс */
	flex-direction: column;
	height: 100%;
}

.custom-review-card.hidden {
	display: none;
	}

.custom-review-card h2 {
	font-size: 26px;
	line-height: 30px;
	margin-bottom: 12px;
	color: var(--color-dark);
}

.custom-review-card p {
	flex-grow: 1;                /* текст занимает всё свободное место */
	margin-bottom: 20px;
	color: #4E4E4E;
}

.custom-review-btn {
	align-self: stretch;       /* занимает всю ширину */
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-dark);
	border-bottom: 1px solid var(--color-dark);
	text-decoration: none;
	padding: 6px 0;
}

.custom-review-btn::after {
	content: '';
	display: inline-flex;
	width: 20px;
	height: 20px;
	background: url('https://ooostroyprom.ru/wp-content/uploads/2025/09/arrow-menu-contacts.svg') no-repeat center;
	background-size: contain;
	transition: transform 0.3s ease;
}

.custom-review-card:hover .custom-review-btn::after {
	transform: translateX(6px);
}

/* Ховер-анимация: фон выезжает справа налево */
.custom-review-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: -100%; /* стартовая позиция: скрыт полностью справа */
	width: 100%;
	height: 100%;
	background: var(--color-orange);
	z-index: 0;
	transition: right 0.4s ease; /* плавное движение */
}

.custom-review-card:hover::before {
	right: 0; /* выезжает справа налево, полностью покрывая карточку */
}

/* Контент поверх фона */
.custom-review-card > * {
	position: relative;
	z-index: 1;
}

/* Медиазапросы */
@media (min-width: 1920px) {
	.custom-reviews-container {
		max-width: calc(100% - 240px);
		margin: 0 auto 20px; 
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}
	.custom-review-card.hidden {
	display: flex;
	}
	.custom-review-card h2 {
		font-size: 30px;
		line-height: 34px;
		color: var(--color-dark);
		margin-bottom: 22px;
	}
	.custom-review-btn {
		font-size: 20px;
	}
	.custom-review-btn::after {
		width: 24px;
		height: 24px;
	}
}

@media (max-width: 1240px) {
	.custom-reviews-container {
    	max-width: 100%;
    	padding: 0 24px;
    	grid-template-columns: 1fr 1fr; /* можно 2 карточки в ряд */
	}
}

@media (max-width: 430px) {
  .custom-reviews-container {
    padding: 0 12px;
    grid-template-columns: 1fr; /* одна карточка в ряд */
	gap: 12px;
  }
}
/* ==================================== СТРАНИЦА КОНТАКТОВ ===================================== */

/* ==================== Основная секция ==================== */
.contacts-main-section {
  max-width: 1200px;
  width: 100%;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: nowrap;
}

.contacts-image,
.contacts-map {
  width: 50%;       /* ровно половина */
  height: 400px;    /* фиксированная высота */
  overflow: hidden;
  position: relative;
}

.contacts-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.contacts-image:hover img {
  transform: scale(1.05);
}

.contacts-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}



/* ==================== Контактные данные ==================== */
.contacts-info-section {
  max-width: 1200px;
  margin: 0 auto 60px;
}

.contacts-info-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.contact-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 70px 0;
}

.contact-item .phone {
	padding: 0 24px;
}

.contact-item h2 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 26px;
	font-weight: 500;
	color: var(--color-dark);
}

.contact-item.address {
	padding: 0 24px;
	background-color: #EFEFEF;
}

.contact-item.email {
	padding: 0 24px;
	background-color: #D5D5D5;
}

.contact-item h4 {
  margin-bottom: 8px;
}

.contact-item p {
  margin: 0;
}

.contact-item a {
  text-decoration: none;
  color: var(--color-dark);
}

body.page-id-24 {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* высота = весь экран */
}

body.page-id-24 .site-main {
  flex: 1; /* растягиваем контент */
}

/* ==================== Медиазапросы ==================== */
@media (min-width: 1920px) {
	.contacts-main-section {
  		max-width: calc(100% - 240px);
  		margin: 40px auto 0;
}
	.contacts-info-section {
  		max-width: calc(100% - 240px);
  		margin: 0 auto 80px;
	}
}

@media (max-width: 1240px) {
  .contacts-main-section,
  .contacts-info-section {
    width: 100%;
    padding: 0 24px;
  }
	

  .contacts-main-section {
    padding: 0 24px;
    flex-wrap: wrap;
  }
	
  .contacts-image,
  .contacts-map {
    width: 100%;

  }

  .contacts-info-container {
    grid-template-columns: 1fr 1fr;
  }
  	.contact-item {
		padding: 40px 20px;
  }
  	.contact-item.address {
		padding: 40px 20px;
  }
	.contact-item.email {
		padding: 40px 20px;
  }

}

@media (max-width: 430px) {
	.contacts-main-section,
	.contacts-info-section {
		padding: 0 12px;
  }
	
	.contacts-image {
		height: 160px;
	}

	.contacts-info-container {
    	grid-template-columns: 1fr;
  }

	.contacts-main-section {
    	height: auto;
  }
  	.contact-item {
		padding: 30px 20px;
  }
  	.contact-item.address {
		padding: 30px 20px;
  }
	.contact-item.email {
		padding: 30px 20px;
  }

}


/* ==================================== ФУТЕР САЙТА ===================================== */
.site-footer {
	position: relative; /* обязательно */
    z-index: 1;
    background: var(--color-dark);
    color: #fff;
	margin: 0;
    padding: 60px 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    align-items: center;
    text-align: center;
    gap: 0; /* без отступов между колонками */
}

.footer-item {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
}

.footer-logo {
	display: flex;
    justify-content: flex-start;
    align-items: center;
	padding: 60px 0;
}

.footer-logo img {
    max-height: 60px;
    width: auto;
}

.footer-phone,
.footer-email {
    background: radial-gradient(circle at top right, #313131, #1a1a1a);
    padding: 20px;
}
.footer-email {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.footer-phone a {
	display: flex;
	flex-direction: column;	
	align-items: center;
	gap: 8px;
} 

.footer-phone, 
.footer-email {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer-phone a,
.footer-email a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-phone a:hover,
.footer-email a:hover {
    color: var(--color-accent);
}

.footer-address,
.footer-phone,
.footer-email {
    padding: 60px 20px;
}

/* Мобильная версия */
@media (min-width: 1920px) {
	.site-footer {
		padding: 80px 0;
	}
	.footer-container {
    	max-width: calc(100% - 240px);
    	margin: 0 auto;
	}
	
	.footer-logo img {
    	max-height: 80px;
    	width: auto;
	}
	
	.footer-address p {
		font-size: 20px;
	}
	
	.footer-phone,
	.footer-email {
		font-size: 20px;
	}
}

@media (max-width: 1240px) {
	.site-footer {
		padding-left: 24px;
		padding-right: 24px;
	}
	
	.footer-logo img {
    	max-height: 50px;
    	width: auto;
	}
	
	.footer-address {
		font-size: 12px;
	}
}
	
@media (max-width: 668px) {
	.phone-text,
	.email-text {
		display: none;
	}
	
	.footer-logo img {
    	max-height: 40px;
    	width: auto;
	}
}

@media (max-width: 430px) {
    .footer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        text-align: center;
    }
	
	.site-footer {
		padding-left: 15px;
		padding-right: 15px;
	}
	
    .footer-logo,
    .footer-address,
    .footer-phone,
    .footer-email {
        justify-content: center;
        width: 100%;
        text-align: center; 
    }
	
	.footer-logo {
	padding: 0 15px 30px 15px;	
	}
	
	.footer-address {
	padding: 0 15px 60px 15px;	
	}
	

    .footer-phone,
	.footer-email {
	padding: 60px 15px;	
	}
	
	.footer-logo img {
    	max-height: 90px;
    	width: auto;
	}

	.footer-phone i,
	.footer-email i {
		font-size: 30px;
	}
	
	.phone-text,
	.email-text {
		display: none;
	}
}


/* ==================================== КНОПКА ВВЕРХ ===================================== */
#scrollToTopBtn {
  	position: fixed;
  	bottom: 40px;
  	right: 40px;
  	width: 50px;
  	height: 50px;
  	border: none;
  	border-radius: 50%;
  	cursor: pointer;
  	display: none; /* скрыта по умолчанию */
  	justify-content: center;
  	align-items: center;
  	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  	transition: opacity 0.3s ease, transform 0.3s ease;
  	z-index: 999;
}

#scrollToTopBtn img {
  	width: 60px;
  	height: 60px;
  	transition: transform 0.3s ease;
}

#scrollToTopBtn:hover {
  	transform: translateY(-4px);
}


/* Плавное появление */
#scrollToTopBtn.show {
	display: block;
  	display: flex;
  	opacity: 1;
}

@media (max-width: 768px) {
  #scrollToTopBtn {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}