/*
Theme Name: Agro 2026 (BlankSlate based)
Theme URI: https://opencollective.com/blankslate
Author: Ros OWL
Author URI: https://rostislav.pp.ua/
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2026
BlankSlate is distributed under the terms of the GNU GPL
*/

@layer reset, theme, layout, components, utilities;

@layer reset {

	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		vertical-align: baseline
	}

	html {
		scroll-behavior: smooth
	}

	body {
		line-height: 1;
		margin: 0;
		min-height: 100vh;
	}

	a {
		color: currentColor;
		text-decoration-skip-ink: auto
	}

	a[href^="tel"] {
		color: inherit;
		text-decoration: none
	}

	button {
		outline: 0
	}

	ol,
	ul {
		list-style: none
	}

	blockquote,
	q {
		quotes: none
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none
	}

	q {
		display: inline;
		font-style: italic
	}

	q:before {
		content: '"';
		font-style: normal
	}

	q:after {
		content: '"';
		font-style: normal
	}

	textarea,
	input[type="text"],
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	input[type="search"],
	input[type="password"] {
		appearance: none;
		border-radius: 0
	}

	input[type="search"] {
		appearance: textfield
	}

	table {
		border-collapse: collapse;
		border-spacing: 0
	}

	th,
	td {
		padding: 2px
	}

	big {
		font-size: 120%
	}

	small,
	sup,
	sub {
		font-size: 80%
	}

	sup {
		vertical-align: super
	}

	sub {
		vertical-align: sub
	}

	dd {
		margin-left: 20px
	}

	kbd,
	tt {
		font-family: courier;
		font-size: 12px
	}

	ins {
		text-decoration: underline
	}

	del,
	strike,
	s {
		text-decoration: line-through
	}

	dt {
		font-weight: bold
	}

	address,
	cite,
	var {
		font-style: italic
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
		word-break: normal
	}

	.screen-reader-text:focus {
		background-color: #f7f7f7;
		border-radius: var(--radius);
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
		clip: auto !important;
		clip-path: none;
		color: #007acc;
		display: block;
		font-size: 14px;
		font-size: .875rem;
		font-weight: 700;
		height: auto;
		right: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000
	}

	.skip-link {
		left: -9999rem;
		top: 2.5rem;
		z-index: 999999999;
		text-decoration: underline
	}

	.skip-link:focus {
		display: block;
		left: 6px;
		top: 7px;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		line-height: normal;
		padding: 15px 23px 14px;
		z-index: 100000;
		right: auto
	}

	.visually-hidden:not(:focus):not(:active),
	.form-allowed-tags:not(:focus):not(:active) {
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px 1px 1px 1px);
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap
	}

}

/* End of BlankSlate style.css */

@layer theme {
	@font-face {
		font-family: 'Manrope';
		src: url('./assets/fonts/Manrope.woff2') format('woff2 supports variations'),
			url('./assets/fonts/Manrope.woff2') format('woff2-variations'),
			url('./assets/fonts/Manrope.woff') format('woff-variations');
		font-optical-sizing: auto;
		font-weight: 200 800;
		font-style: normal;
		font-display: swap;
	}

	/* ===== FONTS & VARIABLES ===== */

	:root {
		--theme-font: 'Manrope', sans-serif;
		--white-color: #FFFFFF;
		--primary-color: #424242;
		--secondary-color: #b7b7b7;
		--gray-text-color: #595959;
		--brand-color: var(--brand-color, #73cae5);
		--dark-background-color: #0D0D0D;
		--accent-color: var(--accent-color, #87c74d);
		--border-color: #CFCFCF;
		--separator-color: rgba(from var(--accent-color) r g b / 0.12);
		--spacing-xs: 4px;
		--spacing-sm: 10px;
		--spacing-md: 20px;
		--spacing-lg: 28px;
		--spacing-xl: 40px;
		--spacing-2xl: 80px;
		--radius: var(--border-radius, 3px);
		--container-max-width: var(--container-max-width, 1280px);
	}

	* {
		font-family: var(--theme-font);
	}

	body {
		color: var(--text-color);
		background-color: var(--bg-color);
		line-height: 1.5;
	}

}

/* Макет */
@layer layout {
	.container {
		width: 100%;
		max-width: var(--container-max-width);
		margin: 0 auto;
		padding: 0 var(--spacing-xl);
	}

	@media (max-width: 1240px) {
		.container {
			padding: 0 var(--spacing-md);
		}
	}

	@media (max-width: 768px) {
		.container {
			padding: 0 var(--spacing-sm);
		}
	}

	.grid {
		display: grid;
		gap: 1rem;
	}

	.flex {
		display: flex;
	}
}

/* Компоненты */
@layer components {
	/* .btn {
		display: inline-flex;
		align-items: center;
		padding: 0.5rem 1rem;
		border-radius: var(--radius);
		background: var(--primary);
		color: white;
		border: none;
		cursor: pointer;
	} */

	/* ===== HEADER ===== */
	#header {
		background-color: hsl(from var(--dark-background-color) h s l / 0.75);
		border: 0;
		padding: var(--spacing-lg) 0;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	}

	@media (max-width: 992px) {
		#header {
			padding: var(--spacing-sm) 0;
		}
	}

	/* Header Top */
	.header-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--spacing-lg);
	}

	@media (max-width: 992px) {
		.header-top {
			flex-wrap: wrap;
			gap: 0;
		}
	}

	#branding {
		flex-grow: 1;
	}

	/* Logo Link */
	.logo-link {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
		text-decoration: none;
		transition: opacity 0.3s ease;
	}

	.logo-link:hover {
		opacity: 0.8;
	}

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

	#site-title {
		margin: 0;
		padding: 0;
		font-size: 0;
	}

	.site-name {
		font-family: var(--theme-font);
		color: var(--primary-color);
		font-size: 24px;
		font-weight: 600;
		display: block;
	}

	@media (max-width: 992px) {
		.site-name {
			font-size: 18px;
		}
	}

	/* Navigation Menu */
	#menu {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	@media (max-width: 992px) {
		#menu {
			flex-direction: column;
			order: 4;
			width: 100%;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease;
		}

		#menu.active {
			max-height: 500px;
		}
	}

	.nav-menu {
		display: flex;
		justify-content: flex-start;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	@media (max-width: 992px) {
		.nav-menu {
			margin-top: var(--spacing-md);
			text-align: center;
			flex-direction: column;
			gap: 0;
		}
	}

	.nav-menu>li {
		position: relative;
	}

	.nav-menu>li>a {
		padding: 10px 16px;
		text-decoration: none;
		font-size: 15px;
		font-weight: 700;
		color: var(--secondary-color);
		transition: all 0.3s ease;
		border-bottom: 3px solid transparent;
	}

	.nav-menu>li>a:hover,
	.nav-menu>li.current-menu-item>a {
		color: var(--white-color);
		border-bottom-color: var(--brand-color);
	}

	@media (max-width: 992px) {
		.nav-menu>li {
			margin: 10px 0;
		}

		.nav-menu>li>a {
			padding: 10px;
			font-size: 20px;
			text-align: center;
			border-bottom: none;
		}
	}

	/* Submenu */
	.nav-menu ul {
		position: absolute;
		left: 0;
		top: calc(100% + 8px);
		min-width: 160px;
		z-index: 10;
		list-style: none;
		margin: 0;
		padding: var(--spacing-xs) var(--spacing-sm);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		color: var(--white-color);
		background-color: var(--dark-background-color);
	}

	.nav-menu ul li a {
		text-decoration: none;
	}

	.nav-menu li:hover>ul {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	@media (max-width: 992px) {
		.nav-menu ul {
			position: static;
			opacity: 0;
			max-height: 0;
			overflow: hidden;
			transform: none;
			border: none;
			box-shadow: none;
			transition: max-height 0.3s ease, opacity 0.3s ease;
		}

		.nav-menu li:hover>ul {
			opacity: 1;
			max-height: 300px;
		}
	}


	/* Social Links */
	.header-social {
		display: flex;
		gap: var(--spacing-sm);
		align-items: center;
		margin-left: auto;
	}

	@media (max-width: 992px) {
		.header-social {
			order: 5;
			width: 100%;
			justify-content: center;
			gap: var(--spacing-md);
			margin: var(--spacing-md) 0;
		}
	}

	.social-link {
		display: inline-flex;
		width: 30px;
		height: 30px;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--white-color);
		border-radius: var(--radius);
		background-color: transparent;
		transition: all 0.3s ease;
		text-decoration: none;
	}

	.social-link:hover {
		background-color: var(--white-color);
	}

	.social-icon {
		width: 18px;
		height: 18px;
		filter: invert(1);
		transition: filter 0.3s ease;
	}

	.social-link:hover .social-icon {
		filter: invert(0);
	}

	/* Hamburger Menu */
	.menu-toggle {
		display: none;
		flex-direction: column;
		width: 24px;
		height: 20px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		gap: 6px;
	}

	@media (max-width: 992px) {
		.menu-toggle {
			margin-left: auto;
			display: flex;
			order: 3;
		}
	}

	.menu-toggle span {
		display: block;
		width: 100%;
		height: 2px;
		background-color: var(--white-color);
		border-radius: var(--radius);
		transition: all 0.3s ease;
	}

	.menu-toggle.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.menu-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}


	/* ===== FOOTER ===== */
	#footer {
		background: var(--dark-background-color);
	}

	.footer-main {
		padding-block: var(--spacing-xl);
		display: flex;
		flex-wrap: wrap;
		gap: 40px;
		justify-content: space-between;
		align-items: flex-start;
	}

	.footer-logo img,
	.footer-logo svg {
		display: block;
		max-width: 200px;
		height: auto;
	}

	.footer-menu-title {
		display: inline-block;
		color: var(--white-color);
		font-weight: 700;
		font-size: 24px;
		margin-bottom: 16px;
		letter-spacing: 0.01em;
		padding-bottom: var(--spacing-sm);
		border-bottom: 1px solid var(--separator-color);
	}

	.footer-nav {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.footer-nav li a {
		color: var(--secondary-color);
		text-decoration: none;
		font-size: 15px;
		font-weight: 600;
		transition: color 0.2s;
	}

	.footer-nav li a:hover {
		color: var(--brand-color);
	}

	.footer-subscribe-form {
		width: 100%;
		max-width: 260px;
	}

	.footer-subscribe-form .wpcf7-spinner {
		display: none !important;
	}

	.footer-subscribe-form input {
		background: var(--primary-color);
		color: var(--white-color);
		padding: var(--spacing-md);
		border: 0;
		width: 100%;
		border-radius: var(--radius);
	}

	.footer-subscribe-form input[type="submit"] {
		background: var(--white-color);
		color: var(--primary-color);
		margin-top: var(--spacing-sm);
		font-weight: 600;
		cursor: pointer;
	}

	.footer-subscribe-form .wpcf7 form .wpcf7-response-output {
		color: var(--white-color);
		margin: 1em 0 !important;
		padding: 0.5em !important;
		border-radius: var(--radius);
		font-size: 14px;
	}


	.footer-bottom {
		border-top: 1px solid var(--separator-color);
		padding-block: var(--spacing-md);
		font-size: 14px;
		color: var(--gray-text-color);
		display: flex;
		flex-wrap: wrap;
	}

	/* ACF sections: минимальные стили для новых секций */
	.section--hero_banner {
		padding: var(--spacing-2xl) 0;
		background-size: cover;
		background-position: center;
	}

	.hero__inner {
		display: flex;
		align-items: center;
		min-height: 320px;
	}

	.hero__content .btn {
		margin-right: 12px;
	}

	.section--exhibition_figures .figures-grid {
		display: flex;
		gap: 24px;
		flex-wrap: wrap;
	}

	.figure-item {
		flex: 1 1 160px;
		text-align: center
	}

	.figure-number {
		font-size: 28px;
		font-weight: 700
	}

	.figure-text {
		color: var(--gray-text-color);
		margin-top: 6px
	}

	.section--demo_show .demo-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 20px
	}

	.demo-item {
		padding: 20px;
		background-size: cover;
		background-position: center;
		color: var(--primary-color);
		min-height: 180px
	}

	.demo-title {
		margin-bottom: 8px
	}


	.section--video .video-block {
		text-align: center;
		padding: 40px 0
	}

	.video-link {
		display: inline-block;
		padding: 10px 16px;
		border: 1px solid var(--border-color);
		border-radius: 6px;
		text-decoration: none
	}

	@media (max-width: 992px) {
		.footer-main {
			gap: var(--spacing-xl);
		}

		.footer-subscribe-form {
			max-width: 480px;
		}


		.footer-logo,
		.footer-menu,
		.footer-subscribe {
			max-width: 100%;
			min-width: 0;
			flex: 1 1 100%;
		}

		.footer-menu {
			max-width: calc(50% - 20px);
			min-width: 0;
			flex: 1 1 calc(50% - 20px);
		}
	}

	/* ===== end FOOTER ===== */


	/* Parallax */
	/* .parallax {
		height: 400px;
		min-height: 100vh;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		background-attachment: fixed;
		display: flex;
		justify-content: center;
		color: #ffffff;
		font-size: 60px;
		align-items: center;
		position: relative;
	}

	.parallax .mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, rgba(89, 89, 89, 0) 0%, #0d0d0d 100%);
		z-index: 2;
	} */

	.parallax-container {
		height: 400px;
		/* На весь экран */
		position: relative;
		overflow: hidden;
		/* Важно: скрываем фон за пределами блока */
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 60px;
	}

	.parallax-bg {
		position: absolute;
		top: -30%;
		left: 0;
		width: 100%;
		height: 80vh;
		/* Делаем фон чуть выше, чтобы при смещении не было пустот */
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		will-change: transform;
		/* Подсказка браузеру для оптимизации анимации */
	}

	.parallax-container h1 {
		position: relative;
		z-index: 3;
		/* Текст над фоном */
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, rgba(89, 89, 89, 0) 0%, #0d0d0d 100%);
		z-index: 2;
		/* Маска между фоном и текстом */
	}



}

/* Утилиты */
@layer utilities {
	.text-center {
		text-align: center;
	}

	.w-full {
		width: 100%;
	}


	/* ===== Owl animation library ===== */
	:root {
		/* Длительности анимаций */
		--duration-fast: 0.4s;
		--duration-normal: 0.7s;
		--duration-slow: 1s;

		/* Расстояния для Slide */
		--slide-distance: 100px;
		--fade-distance: 30px;

	}

	.owl {
		visibility: hidden;
	}

	/* Общий класс, который запускает анимацию */
	.animated {
		visibility: visible;
		animation-fill-mode: both;
	}

	.fadeIn {
		animation-name: fadeIn;
		animation-duration: var(--duration-normal);
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* FADE IN LEFT (появление с лёгким движением слева) */
	@keyframes fadeInLeft {
		from {
			opacity: 0;
			transform: translateX(calc(var(--fade-distance) * -1));
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.fadeInLeft {
		animation-name: fadeInLeft;
		animation-duration: var(--duration-normal);
		animation-timing-function: ease-out;
	}

	/* FADE IN RIGHT (появление с лёгким движением справа) */
	@keyframes fadeInRight {
		from {
			opacity: 0;
			transform: translateX(var(--fade-distance));
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.fadeInRight {
		animation-name: fadeInRight;
		animation-duration: var(--duration-normal);
		animation-timing-function: ease-out;
	}

	/* FADE IN UP (появление с лёгким движением снизу) */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(var(--fade-distance));
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fadeInUp {
		animation-name: fadeInUp;
		animation-duration: var(--duration-slow);
		animation-timing-function: ease-out;
	}

	/* FADE IN DOWN (появление с лёгким движением сверху) */
	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(calc(var(--fade-distance) * -1));
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fadeInDown {
		animation-name: fadeInDown;
		animation-duration: var(--duration-normal);
		animation-timing-function: ease-out;
	}

	/* SLIDE LEFT (движение справа налево) */
	@keyframes slideInLeft {
		from {
			opacity: 0;
			transform: translateX(calc(var(--slide-distance) * -1));
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.slideInLeft {
		animation-name: slideInLeft;
		animation-duration: var(--duration-normal);
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	/* SLIDE RIGHT (движение слева направо) */
	@keyframes slideInRight {
		from {
			opacity: 0;
			transform: translateX(var(--slide-distance));
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.slideInRight {
		animation-name: slideInRight;
		animation-duration: var(--duration-normal);
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	/* SLIDE UP (движение снизу вверх) - аналог вашего fadeInUp */
	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(var(--slide-distance));
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.slideInUp {
		animation-name: slideInUp;
		animation-duration: var(--duration-slow);
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	/* SLIDE DOWN (движение сверху вниз) */
	@keyframes slideInDown {
		from {
			opacity: 0;
			transform: translateY(calc(var(--slide-distance) * -1));
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.slideInDown {
		animation-name: slideInDown;
		animation-duration: var(--duration-normal);
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}


	/* end owl library */


	/* ===== КОСЫЕ ЛИНИИ СЕКЦИЙ ===== */
	:root {
		/* Десктоп значения */
		--slope-desktop: 50px;
		--padding-desktop: 80px;
		--section-padding-desktop: 40px;

		/* Мобильные (пока те же) */
		--slope-mobile: var(--slope-desktop);
		--padding-mobile: var(--padding-desktop);
		--section-padding-mobile: var(--section-padding-desktop);
	}

	.section {
		position: relative;
		padding-block: var(--section-padding-desktop);
		z-index: 1;
	}

	/* Динамические переменные (используют десктоп по умолчанию) */
	.section--slope-bottom-left {
		--slope: var(--slope-desktop);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slope)));
		margin-bottom: calc(var(--slope) * -1);
		padding-bottom: var(--padding);
	}

	.section--slope-bottom-right {
		--slope: var(--slope-desktop);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope)), 0 100%);
		margin-bottom: calc(var(--slope) * -1);
		padding-bottom: var(--padding);
	}

	.section--slope-center-left {
		--slope: var(--slope-desktop);
		--padding: var(--padding-desktop);
		clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 calc(100% - var(--slope)));
		padding-block: var(--padding);
	}

	.section--slope-center-right {
		--slope: var(--slope-desktop);
		--padding: var(--padding-desktop);
		clip-path: polygon(0 0, 100% var(--slope), 100% calc(100% - var(--slope)), 0 100%);
		padding-block: var(--padding);
	}

	.section--slope-center-overlay {
		--slope: var(--slope-desktop);
		margin-top: calc(var(--slope) * -1);
		margin-bottom: calc(var(--slope) * -1);
	}

	.section--slope-top-left {
		--slope: var(--slope-desktop);
		--padding: var(--padding-desktop);
		clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%);
		padding-top: var(--padding);
		margin-top: calc(var(--slope) * -1);
	}

	.section--slope-top-right {
		--slope: var(--slope-desktop);
		--padding: var(--padding-desktop);
		clip-path: polygon(0 0, 100% var(--slope), 100% 100%, 0 100%);
		padding-top: var(--padding);
		margin-top: calc(var(--slope) * -1);
	}

	/* Мобильная адаптация */
	@media (max-width: 992px) {
		:root {
			--slope-mobile: 20px;
			--padding-mobile: 40px;
			--section-padding-mobile: 30px;
		}

		.section {
			padding-block: var(--section-padding-mobile);
		}

		/* Переопределяем переменные для всех классов */
		.section--slope-bottom-left,
		.section--slope-bottom-right,
		.section--slope-center-left,
		.section--slope-center-right,
		.section--slope-center-overlay,
		.section--slope-top-left,
		.section--slope-top-right {
			--slope: var(--slope-mobile);
			--padding: var(--padding-mobile);
		}
	}

	/* ===== конец КОСЫЕ ЛИНИИ СЕКЦИЙ ===== */

}