/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Крупные заголовки блоков */
.block-heading {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
	text-transform: uppercase;
}

/* Уменьшенные отступы перед секциями */
#section-services .page-section,
#section-about .page-section, 
#section-blog .page-section,
#footer {
	padding: 20px !important;
}

/* Зеленый цвет для motto в футере */
.motto-text {
	color: #83b341 !important;
}

/* Padding для footer-widgets-wrap */
.footer-widgets-wrap {
	padding-bottom: 20px;
}

/* Скрыть кнопку открытия подменю */
.sub-menu-trigger,
button.sub-menu-trigger,
.fa-chevron-right.sub-menu-trigger,
[class*="sub-menu-trigger"],
[class*="submenu-trigger"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	position: absolute !important;
	z-index: -9999 !important;
}

/* Скрыть любые кнопки в выпадающем меню */
.sub-menu-container button,
.sub-menu-container .toggle,
.sub-menu-container .dd-toggle,
.sub-menu-container .sub-toggle,
.sub-menu-container .menu-toggle,
.sub-menu-container a[class*="toggle"],
.sub-menu-container span[class*="toggle"] {
	display: none !important;
}

/* Скрыть иконку стрелки подменю - все возможные варианты */
.menu-item > a::after,
.menu-item .menu-link::after,
.sub-menu-container::before,
.sub-menu-container::after,
.menu-item:has(.sub-menu-container) > a::after,
.menu-item:has(.sub-menu-container) > .menu-link::after,
.menu-item.sub-menu > a::after,
.menu-item.sub-menu > .menu-link::after,
li:has(ul.sub-menu-container) > a::after,
li:has(ul.sub-menu-container) > .menu-link::after {
	display: none !important;
	content: none !important;
}

/* Дополнительные селекторы для стрелок */
.primary-menu .menu-item:has(ul) > a::after,
.primary-menu .menu-item:has(ul) > .menu-link::after,
.one-page-menu .menu-item:has(ul) > a::after,
.one-page-menu .menu-item:has(ul) > .menu-link::after {
	display: none !important;
	content: none !important;
}

/* Универсальное скрытие ВСЕХ стрелок в меню */
.menu-item a::after,
.menu-item .menu-link::after,
.primary-menu .menu-item a::after,
.primary-menu .menu-item .menu-link::after,
.one-page-menu .menu-item a::after,
.one-page-menu .menu-item .menu-link::after {
	display: none !important;
	content: none !important;
}

/* Скрытие через Unicode символы если они используются */
.menu-item:has(ul) > a > div::after,
.menu-item:has(ul) > .menu-link > div::after {
	display: none !important;
	content: none !important;
}

/* Скрытие стрелки созданной через JavaScript */
.sub-menu-indicator,
.menu-item .sub-menu-indicator,
.menu-link .sub-menu-indicator,
.menu-item div .sub-menu-indicator,
.fa-caret-down,
.menu-item .fa-caret-down,
.menu-link .fa-caret-down {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

/* Скрыть кружки/маркеры перед ссылками в выпадающем меню */
.sub-menu-container .menu-item::before,
.sub-menu-container .menu-link::before,
.sub-menu-container li::before {
	display: none !important;
	content: none !important;
}

/* Убираем любые list-style для выпадающего меню */
.sub-menu-container,
.sub-menu-container ul,
.sub-menu-container li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

/* Убираем background-image стрелки если есть */
.menu-item {
	background-image: none !important;
}

.menu-item > a {
	background-image: none !important;
}

/* Стили для выпадающего меню */
.sub-menu-container {
	display: none;
	position: absolute;
	background: rgba(30, 30, 30, 0.98);
	border: 1px solid rgba(131, 179, 65, 0.3);
	border-radius: 8px;
	padding: 5px 0;
	min-width: 200px;
	z-index: 1000;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.menu-item:hover > .sub-menu-container {
	display: block;
}

.sub-menu-container .menu-item {
	padding: 0;
	margin: 0;
}

.sub-menu-container .menu-link {
	padding: 6px 15px !important;
	font-size: 0.85rem;
	white-space: nowrap;
}

.sub-menu-container .menu-link:hover {
	background: rgba(131, 179, 65, 0.15);
	color: #83b341 !important;
}

/* Для мобильных устройств */
@media (max-width: 991px) {
	.sub-menu-container {
		position: static;
		background: transparent;
		border: none;
		box-shadow: none;
		padding-left: 20px;
	}
	
	.sub-menu-container .menu-link {
		padding: 4px 15px !important;
		font-size: 0.8rem;
	}
}

/* Стили для команды - убираем hover и зеленый фон */
.team-desc.team-desc-bg {
	background-color: transparent;
}

.team .team-image .bg-overlay {
	display: none !important;
}

.team .team-image:hover .bg-overlay-content {
	display: none !important;
}

/* Зеленые подписи должностей в команде */
.team-desc span {
	color: #83b341;
}

.team-desc p {
	color: #ffffff;
}

/* Улучшения для видео */
.hero-video {
	opacity: 1;
	visibility: visible;
}

.hero-video source {
	display: block;
}

/* Запасной фон на случай если видео не загрузится */
#hero {
	background-color: #343a40 !important;
	background-image: url('/video/promo.jpg') !important;
	background-size: cover !important;
	background-position: center !important;
}

/* Если видео загрузилось - скрываем запасной фон */
.hero-video:empty + #hero {
	background-image: none !important;
}

/* Визуальное разделение секций фоновыми цветами */
#section-works {
	background-color: #2d3748;
}

#section-services {
	background-color: #1a202c;
}

#section-about {
	background-color: transparent;
	background-image: none;
	position: relative;
	overflow: hidden;
}

/* Убираем маску полностью */
.team-mask {
	display: none;
}

/* Видео фон для секции команда - как в hero */
.team-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	object-fit: cover;
}

/* Убираем затемнение с фото команды */
#section-about .team-image img {
	filter: brightness(1.2);
}

#section-about .team-desc {
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Калькулятор - убираем белый фон */
.ai-calculator-premium {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.calc-header {
	background: rgba(45, 55, 72, 0.8);
	border-radius: 12px;
	backdrop-filter: blur(10px);
}

/* Все текстовые элементы калькулятора - белые */
.ai-calculator-premium .calc-header h3,
.ai-calculator-premium .calc-header p,
.ai-calculator-premium .calc-label label,
.ai-calculator-premium .calc-value span,
.ai-calculator-premium .calc-result-label,
.ai-calculator-premium .calc-result-price span,
.ai-calculator-premium .calc-result-note,
.ai-calculator-premium .calc-select option {
	color: #ffffff;
}

.ai-calculator-premium .calc-select {
	color: #ffffff;
	background: rgba(45, 55, 72, 0.6);
}

.ai-calculator-premium .calc-body {
	background: transparent;
}

.ai-calculator-premium .calc-group {
	background: rgba(45, 55, 72, 0.6);
	border-radius: 8px;
	backdrop-filter: blur(5px);
}

.calc-result-premium {
	background: rgba(131, 179, 65, 0.2);
	border: 1px solid rgba(131, 179, 65, 0.5);
	border-radius: 12px;
	backdrop-filter: blur(10px);
}

/* Бегущая строка технологий */
.tech-ticker-wrap {
	overflow: hidden;
	white-space: nowrap;
	background: rgba(45, 55, 72, 0.8);
	backdrop-filter: blur(10px);
	border-radius: 50px;
	padding: 15px 0;
	margin: 20px 0;
}

.tech-ticker-track {
	display: inline-flex;
	animation: ticker 30s linear infinite;
	width: fit-content;
}

.tech-badge-wrap {
	display: inline-flex;
	padding: 0 25px;
}

.tech-badge {
	display: inline-block;
	padding: 14px 28px;
	background: linear-gradient(135deg, rgba(131, 179, 65, 0.25) 0%, rgba(131, 179, 65, 0.1) 100%);
	border: 2px solid rgba(131, 179, 65, 0.6);
	border-radius: 50px;
	color: #83b341;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: blur(5px);
	box-shadow: 0 4px 15px rgba(131, 179, 65, 0.15), inset 0 1px 0 rgba(255,255,255,0.1);
	text-shadow: 0 0 20px rgba(131, 179, 65, 0.4);
}

.tech-badge:hover {
	background: linear-gradient(135deg, rgba(131, 179, 65, 0.4) 0%, rgba(131, 179, 65, 0.2) 100%);
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 8px 30px rgba(131, 179, 65, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
	border-color: rgba(131, 179, 65, 0.8);
	text-shadow: 0 0 30px rgba(131, 179, 65, 0.6);
}

@keyframes ticker {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Медиа-запросы для мобильной версии секции Команда */
@media (max-width: 992px) {
	/* Убираем абсолютное позиционирование на мобильных */
	#section-about .page-section > .container {
		position: relative !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-bottom: 20px !important;
		padding-top: 120px !important;
	}
	
	/* Сетка: 2 колонки по 3 ряда */
	#section-about .page-section > .container > div {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 15px !important;
		max-width: 100% !important;
		justify-content: center !important;
	}
	
	/* Карточки: 2 в ряд */
	#section-about .page-section > .container > div > div {
		width: calc(50% - 10px) !important;
		max-width: 160px !important;
		margin: 0 !important;
	}
	
	/* Унифицированные стили для изображений команды */
#section-about .team-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px; /* Единый размер для всех */
}

/* Переопределяем размеры для разных экранов */
@media (max-width: 992px) {
	#section-about .team-image img {
		max-width: 140px;
	}
}

@media (max-width: 576px) {
	#section-about .team-image img {
		max-width: 120px;
	}
}
	
	/* Унифицированные стили заголовков команды */
	.team-title h4 {
		font-size: 1rem;
		margin-bottom: 3px;
	}
	
	.team-title span {
		font-size: 0.75rem;
	}
	
	/* Уменьшаем минимальную высоту секции */
	#section-about .page-section {
		min-height: auto !important;
		padding-bottom: 40px !important;
	}
	
	.team-video {
		background: url('/video/citiesM.png') center center no-repeat !important;
		background-size: cover !important;
	}
	
}

/* Для очень маленьких экранов */
@media (max-width: 576px) {
	#section-about .page-section > .container > div > div {
		max-width: 140px !important;
	}
	
	/* Уменьшаем заголовки для маленьких экранов */
	.team-title h4 {
		font-size: 0.9rem;
	}
	
	.team-title span {
		font-size: 0.7rem;
	}
}

#section-prices {
	text-shadow: none;
}

#section-prices .block-heading,
#section-prices h2.block-heading {
	border-bottom: none !important;
	border: none !important;
}

.section.dark .button.button-border {
	animation: pulse-button 2s infinite;
    background-color: transparent;
    border-color: #83b341;
    color: #83b341;
}

@keyframes pulse-button {
	0% {
		box-shadow: 0 0 0 0 rgba(131, 179, 65, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(131, 179, 65, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(131, 179, 65, 0);
	}
}

/* Команда - все 6 фотографий в один ряд - сверхсильные селекторы */
#section-about .row,
#section-about .team .row {
	max-width: 900px !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 0 auto !important;
	position: relative !important;
	z-index: 2 !important;
}

/* Переопределяем все Bootstrap колонки */
#section-about .row > div,
#section-about .team .row > div,
#section-about .col-md-4,
#section-about .team .col-md-4,
#section-about .col-md,
#section-about .team .col-md {
	flex: 0 0 auto !important;
	max-width: 120px !important;
	width: 120px !important;
	min-width: 120px !important;
	flex-basis: 120px !important;
}

/* Убираем все возможные отступы */
#section-about .team .team {
	padding: 0;
	margin: 0;
}

#section-about .team .team-title {
	margin-bottom: 1rem;
}

/* Добавляем размер для больших планшетов */
@media (max-width: 1200px) {
	#section-about .team [class*="col-"] {
		max-width: 100px !important;
		width: 100px !important;
		min-width: 100px !important;
		flex-basis: 100px !important;
	}
}

@media (max-width: 768px) {
	#section-about .row,
	#section-about .team .row {
		flex-wrap: wrap !important;
		gap: 0.3rem !important;
		max-width: 300px !important;
	}
	
	/* Объединенный селектор для всех колонок */
	#section-about .team [class*="col-"] {
		max-width: 60px !important;
		width: 60px !important;
		min-width: 60px !important;
		flex-basis: 60px !important;
	}
}

#section-blog {
	background-color: #292e33;
}

/* Кнопка "смотреть больше проектов" с правильными отступами */
.portfolio + .text-center {
	background-color: #343a40 !important;
	padding: 3rem 0 !important;
	margin: 3rem 0 0 0 !important;
}

/* Кнопка "смотреть больше проектов" с правильными отступами */
.portfolio + .text-center .button {
	background-color: transparent;
	border-color: #83b341;
	color: #83b341;
}

.portfolio + .text-center .button:hover {
	background-color: #83b341;
	color: #ffffff;
}

/* Убираем лишние отступы вокруг кнопки "смотреть больше" */
.portfolio + .text-center {
	margin: 0 !important;
	padding: 4rem 0 !important;
	background-color: transparent !important;
}

.portfolio + .text-center + #section-services {
	padding-top: 0 !important;
}

/* Плавные переходы для overlay фона */
#section-works .bg-overlay-bg {
	transition: opacity 0.4s ease !important;
}

#section-works .bg-overlay-bg.animated {
	transition: opacity 0.4s ease !important;
}
/* Зеленые анимированные иконки в услугах */
#section-services .feature-box i.icon-et-mobile,
#section-services .feature-box i.icon-et-presentation,
#section-services .feature-box i.icon-et-puzzle,
#section-services .feature-box i.icon-et-gears,
#section-services .feature-box i.icon-et-genius,
#section-services .feature-box i.icon-et-hotairballoon {
	color: #83b341 !important;
	transition: all 0.3s ease !important;
	animation: iconFloat 3s ease-in-out infinite !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	-webkit-text-fill-color: unset !important;
}

#section-services .col-lg-4:nth-child(1) i {
	animation-delay: 0s !important;
}

#section-services .col-lg-4:nth-child(2) i {
	animation-delay: 0.5s !important;
}

#section-services .col-lg-4:nth-child(3) i {
	animation-delay: 1s !important;
}

#section-services .col-lg-4:nth-child(4) i {
	animation-delay: 1.5s !important;
}

#section-services .col-lg-4:nth-child(5) i {
	animation-delay: 2s !important;
}

#section-services .col-lg-4:nth-child(6) i {
	animation-delay: 2.5s !important;
}

@keyframes iconFloat {
	0%, 100% {
		transform: translateY(0) scale(1) rotate(0deg) !important;
	}
	25% {
		transform: translateY(-5px) scale(1.1) rotate(5deg) !important;
	}
	50% {
		transform: translateY(0) scale(1.05) rotate(-5deg) !important;
	}
	75% {
		transform: translateY(-3px) scale(1.08) rotate(3deg) !important;
	}
}

#section-services .feature-box:hover i {
	animation-play-state: paused !important;
	transform: scale(1.2) rotate(10deg) !important;
	color: #86b74c !important;
}

/* Меню скрыто по умолчанию, появляется при скролле вниз */
.hero-logo {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

.hero-title {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 3.5rem;
	line-height: 1.2;
	color: #ffffff;
	margin-bottom: 25px;
	position: relative;
	z-index: 4;
}

.hero-subtitle {
	text-transform: lowercase;
	font-weight: 300;
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.1rem;
	letter-spacing: 2px;
    color: rgba(0, 0, 0, 0.755);
	line-height: 1.6;
	position: relative;
	z-index: 4;
}

/* Мобильная адаптация для hero-секции */
@media (max-width: 768px) {
	.hero-title {
		font-size: 2.2rem;
	}
	.hero-subtitle {
		font-size: 0.8rem;
	}
	.hero-logo {
		margin-bottom: 20px;
        padding-top: 200px;
        max-width: 50% !important;
		
	}
}

/* Меню скрыто по умолчанию, появляется при скролле вниз */
#header.smart-header #header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
	transform: translateY(-100%);
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	background-color: rgba(52, 58, 64, 0.95);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#header.smart-header.header-visible #header-wrap {
	transform: translateY(0);
}

/* Мобильная адаптация для меню */
@media (max-width: 768px) {
	#header.smart-header #header-wrap {
		background-color: rgba(52, 58, 64, 0.98);
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 9999 !important;
		transform: translateY(0) !important;
	}
	
	/* Убираем трансформацию для мобильных, чтобы меню было всегда видно */
	#header.smart-header.header-visible #header-wrap {
		transform: translateY(0) !important;
	}
}

/* Клон шапки не показываем, когда используем умное меню */
#header.smart-header .header-wrap-clone {
	display: none;
}

/* Универсальные стили для главных заголовков на страницах услуг */
.page-title h2,
.service-title h2,
.promo-content h1,
.hero-title {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin-bottom: 25px;
	position: relative;
	z-index: 4;
}

/* Desktop размеры для заголовков */
@media (min-width: 769px) {
	.page-title h2,
	.service-title h2 {
		font-size: 2.5rem !important;
	}
	
	.promo-content h1 {
		font-size: 3.5rem !important;
	}
}

/* Мобильные стили для главных заголовков */
@media (max-width: 768px) {
	.page-title h2,
	.service-title h2,
	.promo-content h1,
	.hero-title {
		font-size: 2.2rem !important;
		line-height: 1.3 !important;
		text-align: center !important;
		margin-bottom: 20px !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: auto !important;
		padding: 0 15px !important;
	}
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
	.page-title h2,
	.service-title h2,
	.promo-content h1,
	.hero-title {
		font-size: 1.8rem !important;
		padding: 0 10px !important;
		margin-bottom: 15px !important;
	}
}

/* Улучшения для мобильных устройств - кликабельность ссылок в портфолио */
@media (max-width: 768px) {
	.portfolio-item .portfolio-desc h2 a {
		pointer-events: auto !important;
		cursor: pointer !important;
		touch-action: manipulation !important;
		user-select: none !important;
		-webkit-tap-highlight-color: rgba(131, 179, 65, 0.3) !important;
	}
	
	.portfolio-item .portfolio-desc h2 a:hover,
	.portfolio-item .portfolio-desc h2 a:active {
		color: #83b341 !important;
		text-shadow: 0 0 10px rgba(131, 179, 65, 0.5) !important;
	}
	
	/* Увеличиваем тапабельную область */
	.portfolio-item .portfolio-desc h2 {
		padding: 10px 0;
	}
	
	.portfolio-item .portfolio-desc h2 a {
		display: inline-block;
		padding: 5px 10px;
		margin: -5px -10px;
	}
}

/* Предотвращение перезагрузки страницы на мобильных устройствах */
@media (max-width: 768px) {
	.menu-link[href="javascript:void(0)"],
	a[href="javascript:void(0)"] {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	
	/* Показываем видео на мобильных */
	.hero-video {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Показываем постер как фон для hero секции на мобильных */
	#hero {
		background: url('/video/promo.jpg') center center/cover no-repeat !important;
		background-attachment: scroll !important;
		position: relative !important;
		z-index: 1 !important;
	}
	
	/* Убедимся что контент виден поверх фона */
	#hero .hero-content-wrap {
		position: relative !important;
		z-index: 2 !important;
	}
}