/* HTML */
/* -------------------------------------------------------------------- */
html { height: 100%; font-size: var(--root-font-size); }
body {  width: 100%; min-height: 100%; vertical-align: top;	background: var(--background-color); color: var(--text-color);
	font-size: 1.7rem; font-family: var(--font); font-weight: normal;
	line-height: 1.5; 
}
body > .container { overflow: hidden; opacity: 0;}

iframe { border: none; }

@media screen and (min-width: 2000px) {
	html { font-size: 13px; }
}
@media screen and (min-width: 3000px) {
	html { font-size: 20px; }
}

.-hidden { display: none; }
.clearfix { clear: both; }

/* Main elements */
/* ============================================================== */
img { display: inline-block; max-width: 100%; height: auto; }
p:not(:last-child) { margin-bottom: 0.7em; }
b { font-weight: bold; }
a { text-decoration: none; color: var(--link-color, inherit); }
a:hover { text-decoration: underline;  }
b, strong { font-weight: bold;}
i { width: auto; height: auto; }
em { font-weight: bold; font-style: normal; }
hr { display: block; margin: 4rem 0; background: 0; border-top: 2px solid #eee; }

/* ============================================================== */
h1, h2, h3, h4 { margin-bottom: 0.5em; line-height: 1.2; color: var(--heading-color); font-weight: 500;}

h1 { font-size: 4.2rem; margin-bottom: 1em;  text-transform: uppercase; }
h2 { font-size: 2.4rem; margin-bottom: 1em;  }
h2.-center { text-align: center; }
h3 { font-size: 2.5rem; }

@media screen and (max-width: 768px) {
	h1 { font-size: 3.2rem; }
	h2 { font-size: 2.8rem; }
	h3 { font-size: 2.4rem; }
}

/* Lists */
/* ============================================================== */
ul, ol { list-style-type: none; }
ol > li::marker  {  display: inline; }
ol > li::before,
ul > li::before { display: inline-block; }
ol > li > p { display: inline; }
ul > li > p { display: inline; }

/* ============================================================== */
img.-full { width: 100%; height: auto; float: none; max-width: none; margin-left: 0; margin-right: 0; }
img.-full:not(:first-child) { margin-top: 2rem; }
img.-full:not(:last-child) { margin-bottom: 2rem; }
img.-left { float: left; margin-right: var(--span); margin-bottom: var(--span); max-width: 50rem; height: auto; position: relative; }
img.-right { float: right; margin-left: var(--span); margin-bottom: var(--span); max-width: 50rem; height: auto; position: relative; }

@media screen and (max-width: 768px) {
	img.-left, img.-right { float: none; max-width: none; margin:0; margin-bottom: 2rem; width: 100%; }
}


/* Всплывающие окна */
/* ============================================================== */
.mfp-content {
	--text-color: black; --heading-color: var(--color-red);
	color: black; padding: 4rem; overflow:hidden; background: white; display: inline-block; width: auto !important; max-width: 60rem; z-index: 52; width: 100% !important; 
	font-size: 1.5rem; }
.mfp-content.-policy { max-width: 80%;  }
.mfp-bg { z-index: 150;}
.mfp-wrap { z-index: 151; }
.mfp-content form { width: 100%; margin:0 auto; text-align: center; }
.mfp-content a { color: var(--color-green); }
.mfp-content .form button { width: 100%; }
.mfp-content input,
.mfp-content select,
.mfp-content textarea { background: #f4f4f4; border-bottom: 1px solid #888; }
.mfp-content .form-buttons { display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
.mfp-content .vcap-input { justify-content: center; text-align: left; }
.mfp-content .vcap-input > label { font-weight: normal; }
.mfp-content .vcap-input > label a:hover { text-decoration: none; }
.mfp-content h2 { color: black; text-align: center; font-size: 3.6rem; }
.mfp-close { border-radius: 50%; width: 3.5rem; height: 3.5rem; right: 1rem; top: 1rem; line-height: 0; }
.mfp-close:hover, .mfp-close:focus { color: white; }

.mfp-content.-policy h2 { text-align: left; }
.mfp-content.-policy h3 { text-align: left; }
.mfp-content.-policy h4 { text-align: left; }


.center-container { display: flex; align-items: center; justify-content: center; gap: 1rem 2rem; }
/* Контейнеры для различных элементов и карточек */
/* ============================================================== */
.grid-container { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); gap: var(--container-gap); justify-content: center;  }

[data-container~="count-5"] { --item-width: 20rem; }
[data-container~="count-4"] { --item-width: 28rem; }
[data-container~="count-3"] { --item-width: 35rem; }
[data-container~="count-2"] { --item-width: 50rem; }

@media screen and (max-width: 960px) {
}

@media screen and (max-width: 768px) {
	.grid-container { display: flex; flex-wrap: wrap; flex-wrap: wrap; justify-content: left; }
	.grid-container > * { flex-basis: var(--item-width);  }
}

@media screen and (max-width: 640px) {
	.grid-container {  --item-width: 100% !important; }
}

.flex-container { display: flex; gap: var(--container-gap); flex-wrap: wrap; align-items: center; justify-content: center; }
.flex-container > * { flex-grow: 1; flex-basis: var(--item-width);  }

@media screen and (max-width: 960px) {
	.flex-container > * { max-width: none; }
	.grid-container > * { flex-grow: 1; }
}

.split-container { display: flex; gap: 4rem; flex-wrap: wrap; }
.split-container > * { flex-grow: 1;  flex-basis: 45rem; }
.split-container[data-container~="center"] { align-items: center; }
.split-container[data-container~="no-grow"] > * { flex-grow: 0;  }
.split-container > .image.-large { flex-grow: 2; flex-basis: 45; }
.split-container > .image.-small { flex-basis: 30rem; }

.articles-container { display: flex; gap: 4rem; flex-wrap: wrap; }
.articles-container > * { flex-basis: 100% !important; }
.articles-container > *:not(:last-child) { border-bottom: 1px dashed #aaa; padding-bottom: 2rem; }

.buttons-container { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.teasers-container  {  display: grid; grid-template-columns: repeat(auto-fit, minmax(40rem,1fr)); position: relative;  gap: 2rem;  justify-content: center;  padding: 0.5rem 0; margin: 2rem 0;}

/* ============================================================== */
.side-image-container { display: flex; gap: 6rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.side-image-container > * { flex-basis: 40rem; flex-grow: 1; }
.side-image-container > .content { flex-grow: 2; }
.side-image-container > .image { align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; }
.side-image-container > .image img { max-height: 35rem; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================== */
.side-container { display: flex; align-items: center; flex-wrap: wrap; gap: 4rem;}
.side-container > .content { flex-basis: 30rem; flex-grow: 2; }
.side-container > .side { flex-basis: 20%; flex-grow: 1; min-width: 20rem; align-self: center;}

/* ============================================================== */
.button-up { --color: var(--color-dark-gray); transition: opacity .3s ease; opacity: 0.8; background-color: var(--color-light-gray); height: 5.5rem; width: 5.5rem; bottom: 3rem; right: 3rem; cursor: pointer; display: none; position: fixed; z-index: 999; align-items: flex-end;justify-content: center; border-radius: 50%;  user-select: none; box-shadow: 0 0 5px 0 #0003; }	
.button-up:before { content: "";position: absolute;top: 40%;width: 40%;height: 40%;border-left: 3px solid var(--color);border-top: 3px solid var(--color);transform: rotate(45deg); left: 27%;}
.button-up:hover {opacity: 1;}


/* ============================================================== */
.page-block { padding: var(--block-padding) var(--span);
	position: relative; color: var(--text-color);
	background: var(--background-color); --text-color: inherit; --background-color: transparent;}

.page-block > .block-container { max-width: var(--page-width); margin: 0 auto; position: relative; }

.page-block[data-page-block~="narrow"] { padding-top: var(--span); padding-bottom: var(--span); }
.page-block[data-page-block~="narrower"] { padding-top: var(--span-large); padding-bottom: var(--span-large); }
.page-block[data-page-block~="no-padding"] { padding-top: 0; padding-bottom: 0; }

.page-block[data-page-block~="black"] {
	--heading-color: white; --text-color: white; --background-color: #353535;	
	--link-color: white; --slider-color-arrow: white; --swiper-pagination-bullet-inactive-color: white;
}
.page-block[data-page-block~="gray"] { --background-color: #fafafa;}

.page-block > .bg { position: absolute; right: 100%; bottom: 100%; height: 30rem; width: 30rem; z-index: 1; }


/* ============================================================== */
.page-section { padding: 4rem 0; }
.page-section:first-child { margin-top: 0; }
.page-section:last-child { margin-bottom: 0; }
.page-section[data-page-section~="narrow"] { padding: 2rem 0; }

/* ============================================================== */
.block-heading { margin: 0; font-size: 4.2rem; text-align: center;
	max-width: 90rem; margin: 0 auto;  margin-bottom: 1.5em; text-transform: uppercase; color: var(--heading-color); }
.block-heading-text { margin: auto; margin-top: -4rem; font-size: 1.7rem; 
	margin-bottom: var(--span-large); max-width: calc(var(--page-width) / 1.5); text-align: center; color: var(--color-dark-biege); }

.block-heading.-left { text-align: left; }

.block-heading-container { display: flex; align-items: center;  justify-content: center; gap: 2rem; margin-bottom: 4rem; }
.block-heading-container h2 { margin-bottom: 0; flex-grow: 1; }
.block-heading-container .simple-button { border-left: 1px solid #eee; }

@media screen and (max-width: 960px) {
	.block-heading { font-size: 3.2rem; }
	.block-heading.-left { text-align: center; }
}


/* Всплывающие сообщения */
/* ============================================================== */
.message-queue { position: fixed; top: 50%; padding: 3rem; left: 50%; right: 0; background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%); max-width: 800px; border-radius: 1rem;  z-index: 400; }
.message-queue .message { margin: 0 auto; max-width: 700px; display: block; background: white; padding: 1rem; margin-bottom: 0.5rem; border-radius: 3px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);  }
.message-queue .message: last-child { margin-bottom: 0;  }
.message-queue .message.error { border-left: 5px solid #a6051b;  }
.message-queue .message strong { font-weight: bold; }
.message-queue .message .large { font-size: 2.5rem;}
.message-queue .message .large strong { color: #a6051b; }
.message-queue .message.critical { border-left: 5px solid transparent; color: white; background: #a6051b;  }
.message-queue .message.warning { border-left: 5px solid #ffd376;  }

@media screen and (max-width: 640px) {
	 .message-queue { padding: 1rem; bottom: 0; width: 100%; border-radius: 0; top: auto; transform: none; left:0; right:0; }
	 .message-queue .message { padding: 0.5rem; }
}


/* Блоки сносок в тексте */
/* ============================================================== */
.message-box { --text-color: var(--color-black); color: var(--text-color); --image: url("../img/icons/mb-info.png"); clear: both; position: relative; display: flex; justify-content: flex-start; align-items: flex-start; padding: 4rem; padding-left: 12rem;  text-align: left; margin: 3rem 0; flex-flow: column; min-height: 10rem; border-radius: var(--border-radius); min-height: 100px; border: 2px solid #e0e0e0; background: linear-gradient(45deg, #00000020, white 5rem); }
.message-box::after { content:''; display: block; width: 4px; position: absolute; top:-2px; left:-2px; bottom:-2px; background: var(--color-blue); }
.message-box h2 { text-align: left; font-size: 2.4rem; margin-bottom: 1rem; margin-top: 0; }
.message-box a { color: var(--text-color); text-decoration: underline; }
.message-box > * { margin-bottom: 0.5rem;}
.message-box > *:last-child { margin-bottom: 0; }
.message-box::before { content: ''; display: block; position: absolute; top: 50%; bottom: 0; left: 2rem; width: 8rem; height:8rem; transform: translateY(-50%); background: var(--color-blue);
mask: var(--image) center / contain no-repeat; -webkit-mask: var(--image) center / contain no-repeat; }
.message-box.-home { --image:url(../img/icons/mb-home.png); }
.message-box.-alert { --image:url(../img/icons/mb-alert.png); }
.message-box.-alert::before { background: var(--color-red); }
.message-box.-alert::after { background: var(--color-red); }
.message-box.-center { text-align: center; align-items: center; }
.message-box.-center::before { display:none;  }
.message-box.-with-image { padding-left: 25rem; }
.message-box.-with-image .image { position: absolute; left:0; top:0; height: 100%; width: 20rem; mask: linear-gradient(to left, transparent, white 2rem); }
.message-box.-with-image .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 768px) {
	.message-box.-with-image .image { display: none; }
	.message-box.-with-image::before { display: none; }
}

@media screen and (max-width: 768px) {
	.message-box { padding: 2rem !important; }
	.message-box::before { display: none; }
}


/* Иконки соцсетей */
/* ============================================================== */
.social-icons { white-space: nowrap; display: flex; align-items: center; gap: 1rem 1.5rem; justify-content: start; }
.social-icons a { --color: white;	display: inline-flex; justify-content: center; align-items: center; flex-shrink:0;
	transition: .3s; top: 0; gap: 2rem; 	position: relative;  cursor: pointer; }
.social-icons a i { width: 3rem; height: 3rem; background: var(--color-blue); }
.social-icons a.telegram { --color: #3f95d6; }
.social-icons a.whatsapp { --color: #58bb16; }
.social-icons a.viber { --color: #9069ad; }
.social-icons a.youtube { --color: #ff0101; }
.social-icons a.vk { --color: #5a6f8e; }
.social-icons a:hover i { background: var(--color) !important; }


/* Оформление элементов в статьях */
/* ============================================================== */             
.article ul,
.article ol { margin-left: 2rem; }
.article ul { list-style-type: square; margin-bottom: 1em; }
.article ul > li { margin-bottom: 0.3em; }
.article ul > li::marker { color: var(--color-blue); }
.article > table { margin: 4rem 0; }
.article ol { list-style-type: decimal; margin-bottom: 1em; }
.article li { margin-bottom: 0.5em; }
.article h2 { font-size: 2.8rem; margin-bottom: 0.7em;}
.article a:hover { text-decoration: none; }
.article img { display: block; }
.article > h2:not(:first-child) { margin-top: 1em; }
.article a { color: var(--link-color); text-decoration: underline; }


/* Хлебные крошки */
/* ============================================================== */
.breadcrumbs { margin-bottom: 2rem; font-size: 1.5rem; flex-wrap: wrap; }
.breadcrumbs ul { display: flex;  color: #333; gap: 0.5rem 1rem; flex-wrap: wrap; align-items: center; }
.breadcrumbs ul li { display: inline-flex; margin-right: 0.5rem; align-items: center; }
.breadcrumbs ul li:not(:last-child)::after { content: ''; display: inline-block; margin-left: 2rem; border-left: 1px solid #ddd; height: 2rem; }
.breadcrumbs a { color: var(--color-blue); text-decoration: underline; }
.breadcrumbs a:hover { text-decoration: none; }

@media screen and (max-width: 768px) {
	.breadcrumbs { font-size: 1.4rem; }
}

/* Всплывашки */
/* ============================================================== */
.tippy-content { font-size: 1.5rem; padding: 2rem; }
.tippy-box { background: #ffffffe0; color: black; border-radius: 1rem; }
.tippy-arrow  { color: #ffffffe0;}


.cards-container { display: flex; align-items: center; }
.cards-container > *  { flex-grow: 1; flex-basis: 20rem; align-self: stretch; max-width: 25rem; }

@media screen and (max-width: 1024px) {
	.cards-container { flex-wrap: wrap;}
}

@media screen and (max-width: 768px) {
	.cards-container > * { flex-grow: 1; max-width: none; }
}


/* Адаптивное меню */
/* ============================================================== */
.mobile-menu { background: #000a; backdrop-filter: blur(0.5rem); color: white;  display:none; position: fixed; top:0; left:0; width: 100%; height: auto; z-index: 60; max-height: 100%; box-shadow: 0 3px 5px 0 #0003; overflow: auto; color: black; z-index: 10000; font-size: 1.8rem; }

.mobile-menu .close-menu-button {  display: flex; cursor: pointer; align-items: center; padding: 1rem; background: black; color: white; justify-content: center; gap: 1rem; }
.mobile-menu .close-menu-button i { background: white; }

.mobile-menu .menu { padding: 2rem; z-index: 100;   text-align: left;  line-height: 1.1;  height: auto; max-height: calc(100vh); width: 100%; z-index:20; box-shadow: 0 5px 5px 0 #0003; }
.mobile-menu .menu a {  text-decoration: none; color: white; }
.mobile-menu .menu li { display: block; } 
.mobile-menu .menu > li > a { font-weight: bold; }
.mobile-menu .menu li ul { position: relative; background: transparent;}
.mobile-menu .menu li ul li { border: none !important; }

.mobile-menu .menu li a  { display: flex; padding: 1rem; gap: 1rem; align-items: center; min-height: 3rem; }
.mobile-menu .menu li.-active > a { font-weight: bold;  white; }
.mobile-menu .menu > li.-active > a { background: var(--color-green); color: white; } 
.mobile-menu .menu li a > .text { flex-grow: 1; }
.mobile-menu .menu .opener { display: inline-block; width: 3rem; height: 2.5rem; flex-shrink: 0; background: #333; --mask: url(../img/icons/arrow-down.png) center/1.5rem no-repeat;	mask: var(--mask); -webkit-mask: var(--mask);  background: var(--color-blue); }
.mobile-menu .menu li a:hover {  color: var(--color-green); }
.mobile-menu .menu li > ul { display: none;  font-size: 1.5rem; padding-left: 0; }

.mobile-menu .menu li.-open { border: 1px solid #0002; margin-bottom: 1rem; padding-bottom: 1rem;  }
.mobile-menu .menu li.-open > a { }
.mobile-menu .menu li.-open > ul {  display: block; }
.mobile-menu .menu li.-open > a > .opener { --mask: url(../img/icons/arrow-up.png) center/1.5rem no-repeat; background: white;}

.mobile-menu.-open { display: block; }
.mobile-menu.-open .open-button::after { --image: url(../img/icons/close.svg) center/contain no-repeat; }
.mobile-menu.-open .mobile-menu { display: block;  }

/* ============================================================== */
.mobile-menu-button { display: none; align-items: center; gap: 1rem; justify-content: center; font-size: 1.5rem; min-height: 3rem; transition: .3s; cursor: pointer; border: 2px solid white; padding: 1rem; border-radius: 1rem; }
.mobile-menu-button i { background: white; width: 2rem; height: 2rem; }
.mobile-menu-button:hover { background: var(--color-green); }
.mobile-menu-button:hover i  { background: white; }

@media screen and (max-width: 768px) {
	.mobile-menu-button { display: flex; }
}



/* ============================================================== */
#header { position: relative; z-index: 60; background: linear-gradient(125deg, black, transparent 30rem), #363636;}

#header .block-container { position: relative; }

#header .top-part { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }

#header .site-logo { display: flex; align-items: center; gap: 2rem; flex-basis: 30rem; text-decoration: none !important; flex-grow: 1; line-height: 1.1; }
#header .site-logo .image { width: 14rem; height: 8rem; flex-shrink: 0; background: url(../img/logo-site.png) center/contain no-repeat; }
#header .site-logo .title { font-size: 4rem; color: white; font-weight: 500; }
#header .site-logo .top { color: #fff9; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 4px; }

#header .contacts { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; flex-grow: 1; justfy-content: right; font-size: 1.6rem; --button-height: 5rem; flex-basis: 45rem; flex-grow: 1; }
#header .contacts .phone  { text-align: center; flex-grow: 1; font-size: 2.7rem; font-weight: bold; }
#header .contacts .email { background: #242424; border-radius: 1rem; min-height: var(--button-height); display: flex; gap: 1rem; align-items: center; padding: 1rem 2rem; transition: .3s; text-decoration: none !important; }
#header .contacts .email i { background: white; transition: .3s; }
#header .contacts .email:hover { background: white; color: black; }
#header .contacts .email:hover i { background: black; }


#header .bg-composition { position: absolute; right: -8rem; bottom: 0; height: 100%; width: 110rem;  z-index: 0; }
#header .bg.trucks { position: absolute; right: -5%; bottom: 25%; height: 70%; width: 100%; background: url(../img/bg-header-trucks.webp) center/contain no-repeat; }
#header .bg.equipment { position: absolute; right: 0; bottom: 0; height: 30rem; width: 60%; background: url(../img/bg-header-equipment.webp) center/contain no-repeat; }

#header .content-part { display: flex; align-items: center; min-height: 60rem; position: relative; z-index: 1; }

#header .block-content { max-width: 55rem; margin: 6rem 0; position: relative;   }
#header .block-content h1 { margin-bottom: 1rem; font-size: 4.2rem; }
#header .block-content .subtext { font-size: 2.5rem; font-weight: 300; line-height: 1.3; }
#header .block-content .buttons-container { margin-top: 10rem; justify-content: left; }

#header .main-menu { display: flex; font-size: 1.6rem; text-transform: uppercase; font-weight: 500; color: var(--color-blue); flex-grow: 1; margin-top: 2rem; }
#header .main-menu a { display: flex; align-items: center; padding: 0 2rem; text-decoration: none !important; } 
#header .main-menu li { position: relative; transition: .3s; }
#header .main-menu li:last-child a { padding-right: 0; }
#header .main-menu li:first-child a { padding-left: 0; }
#header .main-menu li:not(:last-child) { border-right: 2px solid #fff5; }
#header .main-menu li:hover { text-shadow: 0 0 3rem var(--color-blue), 0 0 3rem var(--color-blue); }

#header.-fixed { position: fixed; left: 0; top: 0; box-shadow: var(--shadow); width: 100%; }
#header.-fixed .content-part { display: none; }


@media screen and (max-width:1024px) {
}

@media screen and (max-width:960px) {
	#header .main-menu { display: none; }
	#header .contacts .phones { flex-direction: row; }	
	#header .site-logo { flex-basis: auto; display: inline-flex; flex-grow: 0; } 
	#header .site-logo .title { font-size: 3.2rem; }
	#header .site-logo .top { font-size: 1.1rem; letter-spacing: 2.5px; }
	#header .block-content h1 { font-size: 3.2rem; }
	#header .block-content .subtext { font-size: 2rem; }
	#header .content-part { text-align: center; min-height: auto; } 
	#header .block-content { margin: 4rem auto; max-width: 60rem; }
	#header .block-content .buttons-container { margin-top: 2rem; justify-content: center; gap: 1rem; }
	#header .block-content .button { flex-basis: 25rem; }
	#header .bg.equipment { display: none; }
	#header .callback-button { display: none; }
}

@media screen and (max-width:640px) {
	#header .site-logo .image { width: 6rem; height: 4rem; }
	#header.-fixed .contacts { display: none; }
	#header .block-content h1 { font-size: 2.8rem; }
}


/* ============================================================== */
#about { padding-bottom: 2rem; }

#about .image { position: relative; }
#about .image .bg { position: absolute; left: -10rem; top: -10rem; bottom: -5rem; right: -5rem; }
#about .image .bg img { position: absolute; max-width: none; top: 0; left: 0; bottom: 0; right: 0; object-fit: contain; width: 100%; height: 100%; }

#about .teasers { margin-top: 8rem; }


@media screen and (max-width:960px) {
	#about .image .bg { position: relative; left: auto; right: auto; bottom: auto; top: auto; width: 130%; left: -15%; } 
	#about .image .bg img { position: static; width: 100%; }
}

.frame-teaser { padding: 4rem; border-radius: 4rem; border: 3px solid var(--color-blue); display: flex; gap: 2rem; font-weight: 500; align-items: center; background: white; cursor: pointer; transition: .3s; }
.frame-teaser .image { width: 8rem; height: 7rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.frame-teaser i { background: linear-gradient(45deg, var(--color-blue), var(--color-light-green)); width: 8rem; height: 7rem; transition: .3s; }
.frame-teaser:hover { box-shadow: 0 0 2rem #46b39940; }
.frame-teaser:hover i { background: var(--color-blue); }


/* ============================================================== */
#services { }

.service-card { border-radius: 4rem; background: #fafafa; display: flex; align-items: center; position: relative; min-height: 20rem; overflow: hidden; flex-wrap: wrap; gap: 4rem 10rem; }
.service-card .icon { position: absolute; left: 50%; top: 50%; background: white; width: 12rem; height: 12rem; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0.5rem 0.5rem 2rem 0 #0002; display: flex; align-items: center; justify-content: center; }
.service-card .icon i { width: 6rem; height: 6rem; background: linear-gradient(45deg, var(--color-blue), var(--color-light-green)); }
.service-card .content { padding: 6rem 4rem; flex-basis: 40rem; flex-grow: 1; }
.service-card .content p { margin-bottom: 0.2em; }
.service-card .content h2 { text-transform: uppercase; margin-bottom: 0.5em; }
.service-card .content ul { list-style-type: disc; }
.service-card .content ul li::marker { color: var(--color-green); }
.service-card .image { flex-basis: 40rem; flex-grow: 1; background: #ccc; align-self: stretch; --mask: linear-gradient(to right, white, white, transparent); mask: var(--mask); -webkit-mask: var(--mask); position: relative; }
.service-card .image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.service-card[reverse] { flex-direction: row-reverse; }
.service-card[reverse] .content { margin-left: 0; }
.service-card[reverse] .image { --mask: linear-gradient(to left, white, white, transparent); }

.service-card:not(:last-child) { margin-bottom: 4rem; }

@media screen and (max-width:960px) {
	.service-card .image	{ height: 20rem; flex-basis: 100%; }
	.service-card .content { flex-basis: 100%; padding-top: 0; }
	.service-card .icon { top: 10rem; }
}


/* ============================================================== */
.service-sub-cards { display: flex; gap: 2rem; margin-top: -1.5rem; margin-bottom: 4rem;  flex-wrap: wrap; }
.service-sub-cards > * { flex-basis: 30rem; flex-grow: 1; }
.service-sub-card { --color: #107bb8; border-radius: 4rem; background: var(--color); color: white; padding: 4rem; min-height: 20rem; text-align: center; position: relative; }
.service-sub-card .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4rem; overflow: hidden; z-index: 0; }
.service-sub-card::before { content: ''; display: block; width: 6rem; height: 2rem; position: absolute; left: 50%; top: 0; transform: translate(-50%, -2rem); background: var(--color); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.service-sub-card .image { margin-bottom: 3rem; display: flex; align-items: center; justify-content: center;  position: relative; z-index: 1; }
.service-sub-card .image img { height: 9rem; width: auto; object-fit: contain; }
.service-sub-card .content { max-width: 50rem; margin: 0 auto; position: relative; z-index: 1;  }
.service-sub-card ul { list-style-type: disc; }
.service-sub-card[data-card~="green"] { --color: #00894c; }

@media screen and (max-width:640px) {
	.service-sub-card::before { display: none; }
}


/* ============================================================== */
#law { }

.law-card { background: url(../img/bg-law-card.jpg) center left no-repeat,  #00744f; border-radius: 4rem; display: flex; align-items: center; gap: 4rem; color: white; padding: 3rem 4rem; }
.law-card .checkmark { width: 5.5rem; height: 5.5rem; background: white; flex-shrink: 0; --mask: url(../img/icons/checkmark.svg) center/contain no-repeat; mask: var(--mask); -webkit-mask: var(--mask); }
.law-card .content { flex-grow: 1; }
.law-card .title { font-weight: bold; margin-bottom: 0; }

/* ============================================================== */
#why { }

.card { background: #fafafa; border-radius: 4rem; padding: 4rem 2rem; display: flex; gap: 4rem; flex-direction: column; text-align: center; font-weight: 500; font-size: 1.8rem; color: black; line-height: 1.3; justify-content: start; align-items: center; overflow: hidden; position: relative; transition: .3s; cursor: pointer; }
.card .image { display: flex; justify-content: center;  }
.card .image i { width: 11rem; height: 11rem; background: linear-gradient(45deg, var(--color-light-green), var(--color-blue)); }
.card .content .comment { display: block; font-weight: normal; font-size: 90%;  }
.card:hover { background: white; box-shadow: 0 0 2rem #46b39950; }

.card[data-card~="dark"] { background: #202020; color: white; }
.card[data-card~="dark"]::before { content: '' ; dsiplay: block; left: 0; bottom:0; height: 5rem; width: 100%; position: absolute; background: linear-gradient(to right, var(--color-blue), var(--color-light-green)); --mask: linear-gradient(transparent, white); mask: var(--mask); -webkit-mask: var(--mask); }
.card[data-card~="dark"] i { background: white; }
.card[data-card~="dark"]:hover { background: var(--color-green); }

@media screen and (max-width:960px) {
	.card { gap: 2rem; }
	.card .image i { width: 8rem; height: 8rem; }
}	

/* ============================================================== */
#get { background: linear-gradient(230deg, black, transparent 40rem), url(../img/bg-get.jpg) center left/auto 100% no-repeat, #363636; }
#get .get-small { margin-top: 4rem; gap: 1rem; }
.get-small-card { border-radius: 2rem; display: flex; background: linear-gradient(to right, #000a, #0005 10rem); align-items: center; padding: 2rem; font-size: 1.5rem; line-height: 1.3;  transition: .3s; cursor: pointer; padding-left: 7rem; position: relative; }
.get-small-card:hover { background: linear-gradient(to right, black, black); box-shadow: 0 0 2rem #46b39950;}
.get-small-card::before { content: ''; position: absolute; display: block; width: 3rem; height: 3rem; left: 2rem; top: 50%; transform: translate(0, -50%); 
	background: white; --mask: url(../img/icons/checkmark-radial.png) center/contain no-repeat; mask: var(--mask); -webkit-mask: var(--mask); }
/* ============================================================== */

#order { --heading-color: #193845; background: url(../img/bg-order.jpg) repeat-x, #a6bac2; background-size: auto 100%; overflow: hidden; }

#order .image { flex-grow: 1; position: relative; align-self: stretch; z-index: 0; min-height: 50rem; }
#order .image .bg.truck { position: absolute; top: calc(var(--block-padding) * -1); bottom: calc(var(--block-padding) * -1); left: 50%; width: 200rem; background: url(../img/bg-order-truck.webp) center/contain no-repeat; transform: translate(-50%, 0); }

#order .block-heading { margin-bottom: 1em; }
#order .block-container { display: flex; align-items: center; justify-content: right; }
#order .block-content::before { content: ''; position: absolute; z-index: -1; left: -10rem; right: -10rem;
	top: -20rem; bottom: -20rem; background: linear-gradient(to right, transparent, #ced7dc, #ced7dc, transparent); }

#order .block-content { width: max(60rem, 60%);  position: relative; z-index: 2; }

#order .block-heading { text-align: left; }

#order .form .form-input { flex-basis: 30rem; }
#order .form .form-input.-wide { flex-basis: 100%; }

#order .form-bottom { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
#order .form-bottom .form-input { flex-grow: 1; }
#order .form-bottom .button-container { flex-basis: 25rem; }
#order .form-bottom .button { width: 100%; max-width: 50rem; }

#order input[type="text"],
#order textarea { background: white; }

#order input[type="text"]::placeholder,
#order textarea::placeholder { color: black; font-style: italic }


@media screen and (max-width:960px) {
	#order .image { display: none; } 
	#order .block-content { width: 100%; }
}

/* ============================================================== */
#contacts {  padding-top: 6rem; padding-bottom: 2rem; }
#contacts .block-container { display: flex; gap: 4rem; align-items: stretch; flex-wrap: wrap; }
#contacts .contacts { flex-basis: 40rem; flex-grow: 1; border-radius: 4rem; color: white; padding: 6rem; background: linear-gradient(45deg, #109cb896, transparent 10rem), linear-gradient(325deg, #96d56b5e, transparent 10rem), #212121; }
#contacts .item { font-size: 2.2rem; }
#contacts .item a { color: white; }
#contacts .item .title { text-transform: uppercase; color: #fff7; margin-bottom: 1rem; font-size: 1.6rem; }
#contacts .item:not(:last-child) { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #fff2; }
#contacts .item.phone .value { font-size: 2.7rem; font-weight: bold; }
#contacts .item.phone { border-bottom: none; }

#contacts .item.email .value { font-size: 1.8rem; text-decoration: underline;  }

#contacts .social-icons a i { background: white; }

#contacts .map { border-radius: 4rem; color: white; overflow: hidden; position: relative; flex-basis: 60rem; flex-grow: 1; }
#contacts .map-container { min-height: 40rem; } 
#contacts .map-container > ymaps { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important;}
#contacts .map-container .ymaps-2-1-79-map-bg { height: 100% !important; }
#contacts .map-container .ymaps-2-1-79-ground-pane { filter: saturate(0); }

@media screen and (max-width:960px) {
	#contacts .contacts { padding: 4rem; }
}

/* ============================================================== */
#article {  }

/* ============================================================== */
#footer { }

#footer .block-container { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; justify-content: center; }
#footer .cookie { font-size: 1.4rem; flex-basis: 40rem; flex-grow: 2; font-style: italic; text-align: right; }
#footer .cookie .text { max-width: 65rem; display: inline-block;  }
#footer .company { flex-basis: 30rem; display: flex; gap: 2rem; align-items: center; flex-shrink: 0; flex-basis: max-content; }
#footer .company p { margin: 0;  }
#footer .company .site-logo { width: 8rem; height: 5rem; background: url(../img/logo-site.png) center/contain no-repeat; }
#footer .company .copy { font-weight: 500; font-size: 1.7rem; line-height: 1.3; }

#footer .contacts { flex-basis: min-content; flex-grow: 1; position: relative; padding-left: 3rem; text-align: right; line-height: 1.2; }
#footer .contacts::before { content: ''; display: block; position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(transparent, #0004, transparent); width: 1px; }
#footer .contacts a { color: black; display: block; }
#footer .contacts .phone { font-size: 2.7rem; font-weight: bold; }
#footer .contacts .email { fonts-zie: 1.7rem; font-style: italic; text-decoration: underline; color: #0008; }

@media screen and (max-width:960px) {
	#footer { padding-top: 2rem; }
	#footer .contacts { text-align: center; }
	#footer .contacts::before { display: none; }
	#footer .cookie { text-align: center; }
}

/* ============================================================== */

/* ============================================================== */
#cookie-popup { display: none; position: fixed; bottom: 2rem; left: 50%; width: 100%;
	max-width: 75rem; box-shadow: 0 0 10px 0 #0002; border-radius: 0rem; padding: 3rem 4rem; background: white; transform: translate(-50%, 0); z-index:10000; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: center; color: black; font-size: 1.5rem; }
#cookie-popup .text { flex-basis: 20rem; flex-grow: 1; }
#cookie-popup .link { color: var(--color-green); text-decoration: underline; }
#cookie-popup.-active { display: flex; }