body {background: linear-gradient(180deg, #f7f9f8, #eef2f1);}
header { z-index: 999;
position: fixed;
top: 2px;
width: 100%;
transition: transform 0.6s ease;}
header.hidden {
transform: translateY(-140%);transition: transform 0.6s ease;
}
.ms-navbar {}
header .ms-logo {margin-top: 0.8rem;}
.ms-b {font-weight:600 !important}
.ms-sb {font-weight:400 !important}
.ms-header-p a {color:#fff;text-decoration:none}
.ms-header-p a:hover, .ms-header-p a:focus {color:#D0D5D8;text-decoration:none}
.navbar-brand img {width:70%;}
.icms-header__middle {border-radius: 15px}
.icms-header__middle{position: relative;z-index: 999;}
.ms-logo {display:flex;}
.ms-logo img{max-width: 180px !important;}
.ms-text-grey {color:#D0D5D8;}
.ms-text-green {color:#007A47;}
.ms-text-green-w {color:#009357;}
.ms-calc-menu {border: 2px solid #ffffffa8 !important; border-radius: 8px;}
.ms-main-menu li {border: 2px solid #ffffff00; border-radius: 8px;}
.ms-main-menu svg { width: 2.2rem;
height: 2.2rem;
margin-left: 0.5rem;}
.ms-menu {width: calc(100% - 50px); margin: 0 auto !important; max-width: 1840px;}
.ms-clients-carousel, .ms-project-slider {max-width: 1920px;margin: 0 auto;}
.ms-project-slider .card-body {padding-top:0px !important;}
.ms-clients-carousel h3 span, .ms-project-slider h3 span, .ms-pvn h3 span,.ms-uslugi h3 span, .activities-section h3.activities-title-h {font-size: 2rem;text-transform: uppercase;font-weight: 700;color: #007a47;}
.activities-section h3.activities-title-h {
position: relative;
margin-bottom: 2rem;
background: none;
padding-left: 0;
}
.activities-section h3.activities-title-h::after
{
background: #007A47;
content: "";
display: block;
height: 1px;
position: absolute;
width: 3rem;
bottom: 0;
}
.ms-slide video { width: 100%;}
.ms-slider-container {
position: relative;
width: 100%;
max-width: 1900px;
height: 100vh;
border-radius: 20px;
margin: 0 auto;
overflow: hidden;
max-height: 900px;
min-height: 500px;
}
.ms-slider-container.ms-pages {max-height: 130px !important;height: 130px !important;min-height: 130px;}
.ms-slider-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 20px;
z-index: 5;
pointer-events: none;
box-sizing: border-box;
}
.ms-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in-out, visibility 1s;
z-index: 1;
overflow:hidden;
border-radius: 35px;
}
.ms-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
/* Видео заполняет всё пространство без искажений */
.ms-bg-video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Темная подложка, чтобы текст читался на любом видео */
.ms-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 3;
}
.video-overlay {border: 2px solid #f6f8f7;}
/* Текстовый контент */
.ms-content {
position: absolute;
top: 50%;
left: 30%;
transform: translate(-30%, -40%); /* Исходное положение чуть ниже центра */
text-align: left;
color: #fff;
z-index: 4;
width: 90%;
max-width: 1000px;
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
transition-delay: 0.3s; /* Текст плавно появляется чуть позже смены видео */
}
/* Состояние текста, когда слайд активен */
.ms-slide.active .content {
opacity: 1;
transform: translate(-30%, -50%); /* Плавное смещение в точный центр */
}
.ms-content h1 {
font-weight:800;
font-size: calc(2.6rem + 2vw);
line-height: 1.2;
}
.ms-content p {
font-size: calc(2.2rem + 0.5vw);
font-weight:700;
}
/* Стрелки переключения */
.ms-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
z-index: 10;
transition: background 0.3s, opacity 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.ms-arrow:hover {
background: rgba(255, 255, 255, 0.3);
}
.ms-prev-btn { left: 3%; }
.ms-next-btn { right: 3%; }
/* Точки индикации */
.ms-dots-container {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 12px;
}
.ms-dot {
width: 30px;
height: 3px;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
.ms-dot.active {
background: #fff;
transform: scale(1.2);
}
.ms-logo-lang {flex-direction: row; display: flex;}
.ms-lang ul {flex-direction: row;}
.ms-lang .nav-link, .ms-main-menu .nav-item-text {font-size: 0.95rem;color: #fff !important;text-transform: uppercase;font-weight: 600;}
.ms-lang .nav-link:hover, .ms-lang .nav-link:focus, .ms-lang .nav-link:hover, .nav-item .nav-item-text:hover {color: #D0D5D8 !important;}
.dropdown-menu .nav-item .nav-item-text {color: #000 !important;}
.ms-main-menu .dropdown-menu {min-width: 12rem;}
.ms-lang {display:flex;align-items: center;}
.ms-lang .dropdown-item{ font-size:1.5rem; }
.ms-lang .dropdown-item.active, .ms-lang .dropdown-item:active {
background-color: #007A47 !important;
}
.ms-call-btn { background-color: #007A47 !important; color:#fff;font-size:1.3rem; width:100%; padding: 0.5rem;}
.ms-call-btn:hover, .ms-call-btn:focus { background-color: #009357 !important; color:#fff;}
@media (max-width: 768px) {
.btn-call-m {display:none;}
.ms-main-m {margin-left: auto !important;margin-right: 0 !important;}
}
.ms-menu-btn, .ms-mobile-menu {
display:none;
}
@media (max-width: 1200px) {
.ms-menu {
margin: 0 auto !important;
padding:0 1.5rem;
}
header .container-fluid {padding:0 !important}
.btn-call-m {display:none;}
.ms-menu-btn {
position: relative;
z-index: 100;
padding: 0.5rem 1rem;
cursor: pointer;
display:block;
background: none;
border: 0;
font-size: 2rem;
color: #fff;
}
.ms-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgb(10 100 61 / 90%);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 999;
}
.ms-mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 70%;
height: 100vh;
background: #ffffff;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 1000;
padding: 2rem;
box-sizing: border-box;
display: block;
overflow-y: auto;
padding-bottom: 220px;
}
body.ms-menu-open .ms-menu-overlay {
opacity: 1;
visibility: visible;
}
body.ms-menu-open .ms-mobile-menu {
transform: translateX(0);
}
.ms-close-btn {
background: none;
display:block;
position:absolute;
top:0.5rem;
right:1rem;
border: none;
font-size: 2.5rem;
cursor: pointer;
margin-bottom: 1.5rem;
color: #1e2224;
}
.ms-close-btn:hover {
color: #1e2224;
}
.ms-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.ms-menu-list li:first-child {margin-top: 1.5rem; }
.ms-menu-list li {margin-bottom: 1rem;margin-left: 1.5rem;}
.ms-menu-list .ms-calc-menu {margin-left: 0.1rem;}
.ms-menu-list .ms-calc-menu a {border: 2px solid #009688;border-radius: 8px;padding: 0.5rem 1rem;}
.ms-menu-list a {text-decoration: none;color: #0B1215;font-size: 1.5rem;}
.ms-menu-footer svg {width: 2rem;height: 2rem;vertical-align: -0.525rem;}
.ms-menu-footer {
position: fixed;
left: 0;
width: 90%;
background: #ffffff;
border-top: 1px solid #eee;
padding: 2rem 2rem 1rem 2.5rem;
margin-top: 2rem;
}
.ms-menu-phone {margin-bottom: 15px;}
.ms-menu-phone a {text-decoration: none;color: #0B1215;font-size: 1.4rem;}
.ms-menu-phone a:hover {color: #40494C;}
.ms-menu-address {font-size: 1rem;color: #0B1215;line-height: 1.5rem; margin-left: 0.3rem;}
.ms-menu-address p {margin: 0;}
}
#whatsapp div p {display:none;}
#whatsapp {
position: fixed;
right: 1rem;
background: #25d366;
bottom: 2.5rem;
color: white;
height: 70px;
width: 70px;
border-radius: 35px;
display: flex;
font-size: 16px;
justify-content: space-around;
align-items: center;
text-decoration: none;
z-index: 100000;
-webkit-animation: hoverWave linear 1s infinite;
animation: hoverWave linear 1s infinite;
}
#whatsapp .whatsappimg {
background: url(/templates/modern/images/whatsapp.png) no-repeat;
background-size: 100% 100%;
width: 40px;
height: 40px;
margin: 0 auto;
}
#whatsapp p {font-size: 13px;}
.ms-wa-left {left: 1rem !important;bottom: 1rem !important;}
@-webkit-keyframes hoverWave {
0% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 0 rgba(37, 211, 102,0.2),0 0 0 0 rgba(37, 211, 102,0.2)
}
40% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 15px rgba(37, 211, 102,0.2),0 0 0 0 rgba(37, 211, 102,0.2)
}
80% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 30px rgba(37, 211, 102,0),0 0 0 26.7px rgba(37, 211, 102,0.067)
}
100% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 30px rgba(37, 211, 102,0),0 0 0 40px rgba(37, 211, 102,0.0)
}
}@keyframes hoverWave {
0% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 0 rgba(37, 211, 102,0.2),0 0 0 0 rgba(37, 211, 102,0.2)
}
40% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 15px rgba(37, 211, 102,0.2),0 0 0 0 rgba(37, 211, 102,0.2)
}
80% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 30px rgba(37, 211, 102,0),0 0 0 26.7px rgba(37, 211, 102,0.067)
}
100% {
box-shadow:0 8px 10px rgba(37, 211, 102,0.3),0 0 0 30px rgba(37, 211, 102,0),0 0 0 40px rgba(37, 211, 102,0.0)
}
}
/* slider projects */
.slider-section {
max-width: 1920px;
margin: 0 auto;
box-sizing: border-box;
}
.slider-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.section-title {
margin: 0;
font-size: 36px;
}
.slider-navigation {
gap: 15px;
}
.slider-navigation .custom-prev,
.slider-navigation .custom-next {
background: #007a47;
}
.slider-navigation .swiper-button-disabled {background: #007a4785 !important; }
.slider-navigation .swiper-button-prev:after,
.slider-navigation .swiper-button-next:after {
}
.slider-navigation .custom-prev:hover,
.slider-navigation .custom-next:hover {
background: #009357;
}
.main-slider {
position: relative;
width: 100%;
}
.slide-content {
display: flex;
width: 100%;
align-items: self-start;
overflow: hidden;
}
.slide-image {
width: 50%;
position: relative;
}
.inner-photo-slider {
width: 100%;
}
.inner-photo-slider img {
width: 100%;
max-width: 900px;
}
.inner-photo-slider .inner-prev,
.inner-photo-slider .inner-next {
width: 32px;
height: 32px;
border-radius: 50%;
color: #007A47;
opacity: 0;
transition: opacity 0.3s, background 0.3s;
}
.inner-photo-slider .inner-prev:after,
.inner-photo-slider .inner-next:after {
font-size: 12px;
font-weight: bold;
}
.slide-image:hover .inner-prev,
.slide-image:hover .inner-next {
opacity: 1;
}
.inner-photo-slider .inner-prev:hover,
.inner-photo-slider .inner-next:hover {
}
.slide-text {
width: 50%;
padding: 40px;
box-sizing: border-box;
}
.slide-text h3, .text-block h3 {
font-size: 2.5rem;
margin-top: 0;
}
.slide-text p, .text-block p {
font-size: 1.8rem;
color: #006D3F;
font-weight: 600;
margin-left: 2rem;
}
.slide-content ul, .section-content ul { list-style: none;
padding: 0;
margin-bottom: 4rem;}
.slide-content li, .section-content li { display: flex;
align-items: flex-start;
gap: 0.5em;
margin-bottom: 0.5em;
font-size: 1.3rem;}
.slide-content li::before, .section-content li::before {
margin-top: 0.45rem;
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left;
background-size: contain;
padding-right: 1rem;
}
.slide-content.is-grabbing {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.slide-content {
cursor: grab;
cursor: -webkit-grab;
}
.slide-content.is-grabbing img,
.slide-content img[draggable="false"] {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
-webkit-user-drag: none;
user-drag: none;
user-select: none;
-webkit-user-select: none;
}
.slide-content h3, .section-content h3 {
--slant: 2rem;
display: inline-block;
padding: .45em 1.5em;
color: #fff !important;
text-decoration: none;
background: #006D3F;
transition: filter .12s ease, transform .08s ease;
-webkit-clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0% 100%);
clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0% 100%);
}
.ms-more {
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 1rem !important;
margin-left: 2rem;
background: #007a47 !important;
text-transform: uppercase;
}
.ms-more:hover { text-decoration:none; color:#fff; background: #009357 !important;}
.ms-footer-p {padding-bottom: 2.5rem !important;}
.swiper-slide {cursor: grab;}
@media (max-width: 992px) {
.slider-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.slider-navigation {
align-self: flex-end;
}
.slide-content {
flex-direction: column;
}
.slide-image, .slide-text {
width: 100%;
}
.inner-photo-slider .inner-prev,
.inner-photo-slider .inner-next {
opacity: 1;
}
.slide-text {
padding: 20px;
}
.section-title {
font-size: 26px;
}
}
/* slider projects */
/* projects list */
.product-section {
max-width: 1920px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.section-title {
margin: 0;
font-size: 36px;
}
/* Контейнер для стрелок в заголовке */
.slider-navigation {
display: flex;
gap: 15px;
position: relative;
}
.slider-navigation .swiper-button-prev,
.slider-navigation .swiper-button-next {
position: static;
margin: 0;
width: 44px;
height: 44px;
background: #eee;
border-radius: 50%;
color: #333;
transition: background 0.3s;
}
.slider-navigation .swiper-button-prev:after,
.slider-navigation .swiper-button-next:after {
font-size: 18px;
}
.slider-navigation .swiper-button-prev:hover,
.slider-navigation .swiper-button-next:hover {
background: #ddd;
}
/* Главный флекс-контейнер для контента */
.section-content {
display: flex;
width: 100%;
align-items: flex-start;
overflow: hidden;
}
/* Блок с картинкой (ровно 50%) */
.image-block {
width: 50%;
position: relative;
}
.photo-slider {
width: 100%;
}
.photo-slider img {
width: 100%;
}
.photo-slider img {--base-size: 900px;}
.photo-slider .custom-pagination {
bottom: 1rem !important;
}
.photo-slider .custom-pagination .swiper-pagination-bullet {
background: #fff;
opacity: 0.6;
width: 8px;
height: 8px;
transition: opacity 0.3s, transform 0.3s;
}
.photo-slider .custom-pagination .swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
transform: scale(1.2);
}
.text-block {
width: 50%;
padding: 40px;
box-sizing: border-box;
}
.features-list {
margin: 0 0 25px 0;
padding-left: 20px;
color: #333;
}
.features-list li {
margin-bottom: 8px;
font-size: 15px;
}
/* Адаптивность для мобильных экранов */
@media (max-width: 992px) {
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.slider-navigation {
align-self: flex-end; /* Стрелки уходят вправо на мобильных */
}
.section-content {
flex-direction: column;
}
.image-block, .text-block {
width: 100%;
}
}
/* projects list */
/* pvn */
.feature-icon svg {
width: 150px;
height: 150px;
display: block;
}
.about-section {
margin-bottom:0.6rem !important
}
/* Главный контейнер теперь занимает всю ширину для контента */
.about-container {
max-width: 1840px;
margin: 0 auto;
display: flex;
flex-direction: column; /* На маленьких экранах всё в один столбец */
gap: 60px;
}
/* На больших экранах выстраиваем Описание+Картинки друг напротив друга */
@media (min-width: 1024px) {
.about-container {
display: grid;
text-align: center;
align-items: center;
}
}
/* Стили текста */
.about-subtitle {
display: inline-block;
font-size: 3.5rem;
font-weight: 700;
text-transform: uppercase;
color: #007a47;
}
.about-title {
font-size: 2rem;
line-height: 1.2;
font-weight: 700;
color: #0B1215;
}
.about-text {
font-size: 1.5rem;
line-height: 1.6;
color: #475569;
}
.features-heading {
font-weight: 600;
color: #0B1215;
text-transform: uppercase;
border-left: 3px solid #007a47;
padding-left: 10px;
}
/* Новая адаптивная сетка для преимуществ */
.features-grid {
display: grid;
grid-template-columns: 1fr; /* По умолчанию на мобильных: 1 колонка */
gap: 20px;
}
/* Планшеты: 2 колонки (2х2) */
@media (min-width: 640px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Десктопы: Выстраиваем все 4 пункта В ОДНУ СТРОКУ */
@media (min-width: 1024px) {
.features-block {
grid-column: span 2; /* Растягиваем блок преимуществ на всю ширину сетки */
margin-top: 20px;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
@media (min-width: 1200px) {
.features-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Стили элементов преимуществ */
.feature-item {
display: flex;
gap: 12px;
align-items: flex-start;
flex-direction: column;
}
.feature-icon {
width: 150px;
height: 150px;
color: #007a47;
display: flex;
align-items: center;
margin: 0 auto;
}
.feature-desc {margin: 0 auto;}
.feature-desc h4 {
font-weight: 500;
color: #40494C;
text-align: center;
font-size: 1.45rem;
line-height: 1.3;
}
.feature-desc p {
color: #40494C;
margin: 0;
}
/* Стили правой колонки (картинки) */
.about-images {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 350px;
width: 100%;
}
@media (min-width: 1024px) {
.about-images {
justify-content: flex-end;
min-height: 450px;
}
}
.image-big {
width: 100%;
border-radius: 10px;
overflow: hidden;
z-index: 1;
border: 5px solid #007a47;
border-radius: 10px;
}
.image-big img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.image-small {
width: 100%;
border-radius: 10px;
overflow: hidden;
border: 10px solid #007a47;
border: 5px solid #007a47;
border-radius: 10px;
}
.image-small img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* CSS Анимации скролла */
.fade-el {
opacity: 0;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}
.about-content.fade-el { transform: translateX(-30px); }
.about-images.fade-el { transform: translateX(30px); display: flex;
flex-direction: column;}
/* Мобильная оптимизация анимаций (чтобы не ломался экран по бокам) */
@media (max-width: 1023px) {
.about-content.fade-el,
.about-images.fade-el {
transform: translateY(30px) !important;
}
}
.fade-el.visible {
opacity: 1;
transform: translateX(0) translateY(0) !important;
}
/* pvn */
/*slider three */
.wfs-wrapper {
width: 100%;
height: 100%;
position: relative;
background: #007a47;
color: #fff;
box-sizing: border-box;
min-height: 900px;
border-radius: 10px;
}
.wfs-wrapper * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wfs-main-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
z-index: 1;
}
.wfs-main-slide.wfs-main-active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.wfs-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 5vh 5vw;
}
.wfs-header {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 4vh;
}
.wfs-number {
font-size: clamp(2.5rem, 8vw, 8rem);
font-weight: bold;
line-height: 1;
color: #D0D5D8;
}
.wfs-prev-btn svg{margin-left: -0.1rem;}
.wfs-next-btn svg {margin-right: -0.1rem;}
.wfs-title {
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 600;
}
.wfs-content {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
gap: 5vw;
min-height: 0;
}
.wfs-list {
list-style: none;
width: 50%;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.wfs-item {
font-size: clamp(1rem, 2vw, 1.2rem);
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
padding-left: 0;
border-left: 0 solid transparent;
}
.wfs-item b { font-size: clamp(1rem, 2vw, 1.6rem);text-transform:uppercase;}
.wfs-item.wfs-item-active,
.wfs-item:hover {
color: #fff;
padding-left: 10px;
border-left: 3px solid #D0D5D8;
}
.wfs-image-container {
width: 50%;
height: 65vh;
position: relative;
overflow: hidden;
border-radius: 12px;
}
.wfs-image-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
.wfs-image-slide.wfs-img-active {
opacity: 1;
visibility: visible;
}
.wfs-image-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
.wfs-controls {
position: absolute;
bottom: 1vh;
right: 5vw;
display: flex;
gap: 1rem;
z-index: 10;
}
.wfs-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s, border-color 0.3s;
}
.wfs-btn:hover {
background: #009357;
border-color: #D0D5D8;
}
@media (max-width: 768px) {
.wfs-container { padding: 3vh 4vw; }
.wfs-header { gap: 1rem; margin-bottom: 2vh; }
.wfs-content { flex-direction: column-reverse; justify-content: flex-end; gap: 3vh; }
.wfs-list {
width: 100%;
flex-direction: column;
justify-content: space-between;
gap: 0.5rem;
}
.wfs-item {
font-size: 0.9rem;
padding-bottom: 4px;
}
.wfs-item.wfs-item-active, .wfs-item:hover { border-left: 2px solid #D0D5D8; }
.wfs-image-container { width: 100%; height: 45vh; }
.wfs-controls { bottom: 2vh; right: 4vw; }
}
/*slider three */
.ms-footer-contacts {color: #fff;}
.ms-footer-contacts svg {width: 2rem;height: 2rem;vertical-align: -0.555rem;}
.ms-footer-contacts .ms-footer-title {margin-left: 2.3rem !important;font-weight:300 !important}
.ms-footer-contacts .ms-footer-title-right {margin-left: 2.3rem !important;font-weight:300 !important}
.ms-footer-logo img {width:100% !important}
.ms-footer-contacts a {color:#fff;}
.ms-footer-contacts a:hover, .ms-footer-contacts a:focus, .icms-footer__bottom a:hover,.icms-footer__bottom a:focus {color:#D0D5D8;text-decoration:none}
.icms-footer__middle {background: url(/templates/modern/images/footer_bg_1980.png) top center no-repeat;background-color: #005E35;color: #fff;}
.icms-body-toolbox h1 {margin-left: 1rem;
padding-top: 2rem;
text-transform: uppercase;
font-weight: 700;
color: #005e35;
font-size: 2.5rem;}
.ms-contatcs-B {}
.ms-main-container {
display: flex;
gap: 3rem;
flex-wrap: wrap;
justify-content: center;
max-width: 1840px;
margin: 0 auto;
}
.ms-main-three {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
flex: 1;
min-width: 350px;
max-width: 600px;
}
.ms-main-three:hover {
transform: translateY(-8px);
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.1);
}
.ms-main-image {
width: 100%;
max-height: 400px;
object-fit: contain;
display: block;
}
.ms-main-content {
padding: 20px;
}
.ms-main-title {
font-size: 1.8rem;
font-weight: 700;
color: #006D3F;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.ms-main-list {
list-style: none;
padding-left: 1rem;
}
.ms-main-list li {
padding-left: 1rem;
position: relative;
color: #2d3436;
font-size: 1.3rem;
line-height: 1.6;
font-weight: 500;
}
.ms-main-list li:before {
margin-right: 0.5rem;
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
vertical-align: -0.225em;
}
/* Мобильная адаптация */
@media (max-width: 768px) {
.ms-main-container {
gap: 2rem;
}
.ms-main--three {
min-width: 100%;
max-width: 100%;
}
.ms-main-image {
height: 250px;
}
}
@media (max-width: 480px) {
.ms-main-image {
height: 150px;
}
.ms-main-content {
padding: 12px;
}
.ms-main-title {
font-size: 16px;
margin-bottom: 10px;
}
.ms-main-list li {
font-size: 12px;
padding: 6px 0;
padding-left: 18px;
}
}
.ms-services {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
min-height: 540px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 6px 22px rgba(8, 27, 48, .12);
max-width:1840px;
margin: 0 auto;
}
.ms-service {
--cut: 2em;
position: relative;
display: flex;
align-items: flex-end;
min-width: 0;
padding: 0 27px 48px 43px;
color: #fff;
text-decoration: none;
background-image: linear-gradient(180deg, rgba(0, 109, 63, .08) 38%, rgba(0, 109, 63, .75) 74%, rgba(0, 109, 63, .97) 100%), var(--bg);
background-position: center;
background-size: cover;
padding-left: calc(var(--cut) + 28px);
transition: filter .25s ease, background-size .45s ease;
}
.ms-service:first-child {border-radius: 10px 0 0 10px;}
.ms-service:last-child {border-radius: 0 10px 10px 0;}
.ms-service:hover, .ms-service:focus-visible {filter: brightness(1.16); color:#fff; text-decoration:none}
.ms-service:focus-visible {outline: 4px solid #49a8ff; outline-offset: -5px; }
.ms-service__content {position: relative; z-index: 3; width: 100%;}
.ms-service__row {display: flex; align-items: flex-start; flex-direction: column;}
.ms-service h2 {margin: 0.2rem 0 0;font-size: 1.8rem;line-height: 1.3;font-weight: 700;text-transform: uppercase;margin-bottom:0.5rem;}
.ms-service p {margin: 0.2rem 0 0;font-size: 1.3rem;line-height: 1.3;text-transform: none;}
@media (max-width: 1100px) {
.ms-services {grid-template-columns: repeat(3, 1fr); min-height: 0;}
.ms-service, .ms-service:first-child, .ms-service:last-child {min-height: 330px;margin: 0;padding: 0 28px 34px;clip-path: none;border-right: 3px solid var(--line);border-bottom: 3px solid var(--line);}
.ms-service:nth-child(3n) {border-right: 0;}
.ms-service:nth-child(n+4) {border-bottom: 0;}
.ms-service::after {display: none;}
.ms-service__icon {width: 58px;height: 58px;margin-bottom: 18px;}
.ms-service h2 {font-size: 18px;}
}
@media (max-width: 992px) {
.ms-services {display: block; border-radius: 14px;}
.ms-service, .ms-service:first-child, .ms-service:last-child {min-height: 380px;padding: 40px;border: 0;background-position: center 42%;}
.ms-service:last-child { border-bottom: 0;}
.ms-service__content { display: flex; align-items: center; gap: 16px;}
.ms-service h2 {margin: 0;font-size: 1.8rem;line-height: 1.3;}
.ms-service p {margin-top: 3px;font-size: 1.3rem;line-height: 1.3;}
.ms-service:first-child {border-radius: 10px 10px 0 0;}
.ms-service:last-child {border-radius: 0 0 10px 10px;}
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; transition: none !important;}
}
.ms-header-p a {font-size: 1.5rem !important;}
.ms-logo {width:170px;}
.ms-slider-container.ms-contacts h1 {
font-weight: 700;
font-size: calc(1.8rem + 2vw);
line-height: 1.2;
}
.ms-slider-container.ms-contacts .ms-content {
position: absolute;
bottom: 1rem;
left: 30%;
transform: translate(-30%, -40%);
text-align: left;
color: #fff;
z-index: 4;
width: 90%;
max-width: none !important;
top: auto;
}
.ms-slider-container.ms-contacts iframe {width: 100% !important;}
@media (min-width: 1825px) {
.ms-slider-container {height: 900px;max-width: 100%;max-width: 1920px;}
.ms-slider-container.ms-contacts {height:300px;max-width: 100%;}
.ms-contacts .ms-slide {position: relative;width: 100%;height: 300px;}
.ms-slide {position: relative;width: 100%;height: 900px;}
.ms-slider-container img {}
.ms-contacts .ms-slider-container img {max-width: none;height: 300px;}
.ms-slider-container.ms-contacts {
max-height: 300px !important;min-height:300px !important;
height: 300px !important;
min-height: 300px;
width: 100% !important;}
}
@media ((min-width: 1401px) and (max-width: 1825px))
{
.ms-slider-container.ms-contacts {
max-height: 300px !important;
height: 300px !important;
min-height: 300px;
width: 100% !important;}
.ms-slider-container.ms-contacts img {
height: 300px;
}
.ms-slider-container.ms-pages {max-height: 120px !important;height: 120px !important;min-height: 120px;}
.ms-pages .ms-slide { max-height: 120px !important;}
.ms-header-p a {font-size: 1.1rem !important;}
.ms-header-p svg {height: 1rem;width: 1rem;}
.ms-lang .nav-link, .ms-main-menu .nav-item-text {font-size: 0.8rem !important;}
.navbar-brand img {width: 60%;}
.ms-logo-lang {padding-left:0px !important;}
.ms-logo {max-width: 120px;}
.ms-menu {width: calc(100% - 50px);}
.btn-call-m h3 {margin-top: -0.4rem;}
.ms-footer-contacts .h4 {font-size:1.1rem !important;}
.ms-footer-contacts .ms-footer-title {margin-left: 1.9rem !important;}
.ms-footer-contacts .ms-footer-title-right {margin-left: 1.8rem !important;}
.ms-footer-contacts svg {width: 1.5rem !important;height: 1.5rem !important;vertical-align: -0.355rem;}
.ms-content h1 {font-size: calc(1.8rem + 2vw) !important;}
.ms-content p {font-size: calc(1.6rem + 0.5vw) !important;}
.ms-main-title {font-size: 1.2rem !important;}
.ms-main-list li {font-size: 1.1rem !important;}
.ms-service h2 {font-size: 1.5rem !important;}
.ms-service p {font-size: 1.1rem !important;}
.feature-desc h4 {font-size: 1.3rem;}
.slide-text {padding: 10px 20px 10px 40px;}
.slide-text h3, .text-block h3 {font-size: 2rem !important;}
.slide-text p, .text-block p {font-size: 1.4rem !important;margin-left: 1.6rem;}
.slide-content li, .section-content li {font-size: 1.1rem !important;}
.inner-photo-slider img {}
.swiper-wrapper {}
.swiper-slide img {}
.image-block {}
.photo-slider img {}
.section-content .text-block {padding: 10px 20px 10px 40px;min-height: 410px;}
.section-content ul {margin-bottom: 1rem;}
.section-content li::before {margin-top: 0.35rem;}
.ms-address-data {gap: 0.5rem;}
.ms-contatcs-B .ms-address-data address {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-outline-button {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-address-card {grid-template-columns: minmax(0, 1fr) 130px !important;}
.ms-address-card {gap: 0.8rem !important;}
.ms-contatcs-B .ms-address-card .icms-svg-icon {
margin-top: 0 !important;
height: 1.5rem !important;
vertical-align: -0.125em;
width: 1.5rem !important;
}
.ms-contatcs-B .ms-address-data {
font-size: 1rem !important; gap: 0.5rem !important;
}
.ms-contatcs-B .ms-address-card strong {
font-size: 1rem !important;
}
.ms-phone-row {grid-template-columns: minmax(0, 1fr) 120px !important;gap: 0.8rem !important;}
.ms-label {font-size: 1rem !important;}
.ms-value {font-size: 1rem !important;}
.ms-phone-data {gap: 0.5rem !important;}
.ms-contatcs-B .icms-svg-icon {
height: 1.5rem !important;
vertical-align: -0.125em;
width: 1.5rem !important;
}
.ms-whatsapp-link {
gap: 0 !important;
font-size: 1rem !important;
}
.ms-slider-container {height: 780px;max-width: 100%;}
.ms-slider-container.ms-contacts {height:300px;max-width: 100%;}
.ms-contacts .ms-slide {position: relative;width: 100%;height: 300px;}
.ms-slide {position: relative;width: 100%;height: 780px;}
.ms-slider-container img {}
.ms-contacts .ms-slider-container img {max-width: none;height: 300px;}
.ms-slider-container.ms-contacts {
max-height: 300px !important;min-height:300px !important;
height: 300px !important;
min-height: 300px;
width: 100% !important;}
.intro-text p {font-size: 1.2rem !important;}
.activity-body h3 {font-size: 1.2rem !important;}
.activity-body p {font-size: 1.2rem !important;}
.product-page .btn {
gap: 0.4rem !important;
padding: 0 1rem !important;
font-size: 1.1rem !important;
line-height: 1.3;
}
.gallery__stage {min-height: 705px !important;}
.step-title { font-size: 1.8rem !important;}
.roof-tab {min-height: 63px !important;padding: 10px !important;font-size: 1.6rem !important;}
.roof-image {width: min(100%, 450px) !important;}
.color-swatch {height: 60px !important;}
}
@media ((min-width: 1201px) and (max-width: 1400px)) {
.ms-slider-container.ms-contacts img {
height: 300px;
}
.ms-slider-container.ms-pages {max-height: 115px !important;height: 115px !important;min-height: 115px;}
.ms-pages .ms-slide { max-height: 115px !important;}
.ms-header-p a {font-size: 0.9rem !important;}
.ms-header-p svg {height: 0.9rem; width: 0.9rem; vertical-align: -0.095em;}
.ms-lang .nav-link, .ms-main-menu .nav-item-text {font-size: 0.7rem !important;}
.nav-link {padding: 0.3rem 1rem;}
.ms-logo img {max-width: 90px !important;width: auto !important;}
.ms-logo-lang {padding-left:0px !important;}
.ms-logo {max-width: 120px;}
.ms-menu {width: calc(100% - 50px);}
.btn-call-m h3 {margin-top: -0.4rem;text-align: right;}
.ms-footer-contacts .h4 {font-size:1.1rem !important;}
.ms-footer-contacts svg {width: 1.5rem !important;height: 1.5rem !important;vertical-align: -0.355rem;}
.ms-content h1 {font-size: calc(1.9rem + 2vw) !important;}
.ms-content p {font-size: calc(1.6rem + 0.5vw) !important;}
.ms-main-title {font-size: 1.1rem !important;}
.ms-main-list li {font-size: 1rem !important;}
.ms-service h2 {font-size: 1.2rem !important;line-height: 1.2;}
.ms-service p {font-size: 1rem !important;}
.slide-text h3, .text-block h3 {font-size: 1.8rem !important;}
.slide-text p, .text-block p {font-size: 1.2rem !important; line-height: 1.2;margin-left: 1.6rem;margin-top: 1.1rem !important;}
.slide-content li, .section-content li {font-size: 1rem !important;}
.inner-photo-slider img {}
.slide-image {}
.feature-desc h4 {font-size: 1.2rem;}
.swiper-slide img {}
.image-block {}
.photo-slider img {}
.section-content .text-block {padding: 10px 20px 10px 40px;}
.section-content ul {margin-bottom: 1rem;}
.section-content li::before {margin-top: 0.35rem;}
.ms-slider-container {
max-height: 665px;
}
.ms-slider-container {height: 665px;width: auto;max-width: 100%;}
.ms-slider-container.ms-contacts {height:300px;width: auto;max-width: 100%;}
.ms-contacts .ms-slide {position: relative;width: 100%;height: 300px;}
.ms-slide {position: relative;width: 100%;height: 665px;}
.ms-slider-container img {max-width: 1400px;}
.ms-contacts .ms-slider-container img {max-width: none;height: 300px;}
.ms-slider-container.ms-contacts {
max-height: 300px !important;min-height:300px !important;
height: 300px !important;
min-height: 300px;
width: 100% !important;}
.content_item .ms-main-three {min-width: 450px !important;max-width: 600px !important;}
.content_item .ms-main-three:last-child {min-width: 450px !important;max-width: 100% !important;min-height:300px !important;}
.product-page .btn {
gap: 0.4rem;
padding: 0 1rem;
font-size: 1rem;
line-height: 1.3;
}
.gallery__stage { min-height: 630px !important;}
.step-title { font-size: 1.7rem !important;}
.roof-tab {min-height: 63px !important;padding: 10px !important;font-size: 1.5rem !important;}
.roof-image {width: min(100%, 450px) !important;}
.color-swatch {height: 60px !important;}
.works-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media ((min-width: 993px) and (max-width: 1200px)) {
.ms-slider-container.ms-contacts img {
height: 300px;
}
.ms-slider-container.ms-pages {max-height: 115px !important;height: 115px !important;min-height: 115px;}
.ms-pages .ms-slide { max-height: 115px !important;}
.ms-menu {width: calc(100% - 50px);}
.ms-logo-lang {width: 30% !important;max-width: 30% !important;}
.ms-logo img {max-width: 90px !important;width: auto !important;}
.ms-lang {width: 120px;margin-left: 2rem;}
.ms-content h1 {font-size: calc(1.6rem + 2vw) !important;}
.ms-content p {font-size: calc(1.3rem + 0.5vw) !important;}
.ms-content {left: 35%;}
.ms-slider-container {max-height: 600px;}
.ms-main-container {gap: 1rem;}
.ms-main-title {font-size: 0.9rem !important;}
.ms-main-list li {font-size: 0.9rem !important;padding-left: 0 !important;}
.ms-main-three {min-width: auto !important; max-width: 420px;}
.ms-service h2 {font-size: 1.2rem !important;line-height: 1.2;}
.ms-service p {font-size: 1rem !important;}
.slide-text {padding-top:5px !important;}
.slide-text h3, .text-block h3 {font-size: 1.2rem !important;}
.slide-text p, .text-block p {font-size: 0.9rem !important; line-height: 1.2;margin-left: 1.3rem;margin-top: 0.5rem !important;}
.slide-content li, .section-content li {font-size: 0.8rem !important;}
.inner-photo-slider img {}
.slide-image {}
.ms-footer-contacts .h4 {font-size: calc(0.91rem + 0.1875vw);}
.ms-footer-contacts svg {width: 1.3rem;height: 1.3rem;vertical-align: -0.355rem;}
.ms-footer-contacts .ms-footer-title-right {margin-left: 1.7rem !important;}
.ms-footer-contacts .ms-footer-title {margin-left: 1.7rem !important;}
.justify-content-md-end {justify-content: flex-start !important;}
.swiper-slide img {}
.image-block {}
.photo-slider img {}
.section-content .text-block {padding: 5px 20px 10px 40px;}
.slide-content ul, .section-content ul { margin-bottom: 0rem;}
.section-content li::before {margin-top: 0.25rem;}
.ms-slider-container {height: 700px;width: auto;max-width: 100%;}
.ms-slider-container.ms-contacts {height:300px;width: auto;max-width: 100%;}
.ms-contacts .ms-slide {position: relative;width: 100%;height: 300px;}
.ms-slide {position: relative;width: 100%;height: 700px;}
.ms-slider-container img {max-width: none;height: 700px;}
.ms-contacts .ms-slider-container img {max-width: none;height: 300px;}
.ms-slider-container.ms-contacts {
max-height: 300px !important;min-height:300px !important;
height: 300px !important;
min-height: 300px;
width: 100% !important;}
.content_item .ms-main-three {min-width: 450px !important;max-width: 600px !important;}
.content_item .ms-main-three:last-child {min-width: 450px !important;max-width: 100% !important;min-height:300px !important;}
.section-content .text-block {padding: 10px 20px 10px 40px;min-height: 410px;}
.section-content ul {margin-bottom: 1rem;}
.section-content li::before {margin-top: 0.35rem;}
.ms-address-data {gap: 0.5rem;}
.ms-contatcs-B .ms-address-data address {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-outline-button {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-address-card {grid-template-columns: minmax(0, 1fr) 130px !important;}
.ms-address-card {gap: 0.8rem !important;}
.ms-contatcs-B .ms-address-card .icms-svg-icon {
margin-top: 0 !important;
height: 1.5rem !important;
vertical-align: -0.125em;
width: 1.5rem !important;
}
.ms-contatcs-B .ms-address-data {
font-size: 1rem !important; gap: 0.5rem !important;
}
.ms-contatcs-B .ms-address-card strong {
font-size: 1rem !important;
}
.ms-phone-row {grid-template-columns: minmax(0, 1fr) 120px !important;gap: 0.8rem !important;}
.ms-label {font-size: 1rem !important;}
.ms-value {font-size: 1rem !important;}
.ms-phone-data {gap: 0.5rem !important;}
.ms-contatcs-B .icms-svg-icon {
height: 1.5rem !important;
vertical-align: -0.125em;
width: 1.5rem !important;
}
.ms-whatsapp-link {
gap: 0 !important;
font-size: 1rem !important;
}
.step-title { font-size: 1.7rem !important;}
.roof-tab {min-height: 63px !important;padding: 10px !important;font-size: 1.5rem !important;}
.roof-image {width: min(100%, 450px) !important;}
.color-swatch {height: 60px !important;}
.works-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media ((min-width: 769px) and (max-width: 992px)) {
.ms-content h1 {font-size: calc(1.4rem + 2vw) !important;}
.ms-content p {font-size: calc(1rem + 0.5vw) !important;}
.ms-clients-carousel h3 span, .ms-project-slider h3 span, .ms-pvn h3 span, .ms-uslugi h3 span {font-size: 1.8rem;}
.ms-main-container {gap: 2rem;}
.slide-text {padding-top:5px !important;}
.slide-text h3, .text-block h3 {font-size: 1.6rem !important;margin-top: 0.5rem;}
.slide-text p, .text-block p {font-size: 1.4rem !important; line-height: 1.2;margin-left: 2rem;margin-top: 1rem !important;}
.slide-content li, .section-content li {font-size: 1.3rem !important;}
.inner-photo-slider img {}
.slide-image {}
.justify-content-md-end {justify-content: flex-start !important;}
.section-content .image-block {}
.swiper-slide img {}
.section-content ul {margin-bottom: 0rem;}
.section-content .text-block {padding: 5px 20px 10px 40px;}
.ms-slider-container.ms-contacts img {
height: 250px;
}
.ms-slider-container {height: 700px;width: auto;max-width: 100%;}
.ms-slider-container.ms-contacts {height: 250px;width: auto;max-width: 100%;}
.ms-contacts .ms-slide {position: relative;width: 100%;height: 250px;}
.ms-slide {position: relative;width: 100%;height: 700px;}
.ms-slider-container img {max-width: none;height: 700px;}
.ms-contacts .ms-slider-container img {max-width: none;height: 250px;}
.ms-content {text-align:center !important;}
.ms-slider-container.ms-contacts {
max-height: 250px !important;
height: 250px !important;
min-height: 250px;
width: 100% !important;
}
.content_item .ms-main-three {min-width: 450px !important;max-width: 100% !important;}
.content_item .ms-main-three:last-child {min-width: 450px !important;max-width: 100% !important;min-height:300px !important;}
.ms-footer-contacts {margin-top:0.5rem;}
.step-title { font-size: 1.7rem !important;}
.roof-tab {min-height: 63px !important;padding: 10px !important;font-size: 1.5rem !important;}
.roof-image {width: min(100%, 450px) !important;}
.color-swatch {height: 60px !important;}
.works-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}
@media ((min-width: 576px) and (max-width: 768px)) {
.ms-content h1 {font-size: calc(1.2rem + 2vw) !important;margin-bottom: 0;}
.ms-content p {font-size: calc(1rem + 0.5vw) !important;}
.ms-main-content {padding-left: 2rem;}
.ms-main-title {font-size: 1.6rem;margin-bottom: 1.1rem;}
.slide-text h3, .text-block h3 {font-size: 1.8rem;margin-top: 1rem;}
.slide-text p, .text-block p {font-size: 1.6rem;margin-left: 1.5rem;margin-top: 0.5rem !important;}
.slide-content li, .section-content li {margin-bottom: 0.2em;font-size: 1rem;}
.slide-content li::before, .section-content li::before {margin-top: 0.25rem;}
.inner-photo-slider img {}
.slide-image {}
.ms-clients-carousel h3 span, .ms-project-slider h3 span, .ms-pvn h3 span, .ms-uslugi h3 span {font-size: 1.7rem;}
.ms-main-list li { padding-left: 0;}
.feature-desc h4 {font-size: 1.2rem;}
.section-content .image-block {}
.swiper-slide img {}
.swiper {border-radius: 10px;}
.section-content ul {margin-bottom: 0rem;}
.section-content .text-block {padding: 5px 20px 10px 40px;}
.section-content h3 {--slant: 1rem;}
.ms-slider-container {height: 700px;width: auto;max-width: 100%;}
.ms-slider-container.ms-contacts {height: 250px;width: auto;max-width: 100%;}
.ms-contacts .ms-slide {position: relative;width: 100%;height: 250px;}
.ms-slide {position: relative;width: 100%;height: 700px;}
.ms-slider-container img {max-width: none;height: 700px;}
.ms-contacts .ms-slider-container img {max-width: none;height: 250px;}
.ms-content {text-align:center !important}
.ms-slider-container.ms-contacts {
max-height: 250px !important;min-height:250px !important;
height: 250px !important;
min-height: 250px;
width: 100% !important;}
.content_item .ms-main-three {min-width: 450px !important;max-width: 100% !important;}
.content_item .ms-main-three:last-child {min-width: 450px !important;max-width: 100% !important;min-height:300px !important;}
.section-content .text-block {padding: 10px 20px 10px 40px;min-height: 410px;}
.section-content ul {margin-bottom: 1rem;}
.section-content li::before {margin-top: 0.35rem;}
.ms-address-data {gap: 0.5rem;}
.ms-contatcs-B .ms-address-data address {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-outline-button {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-address-card {grid-template-columns: minmax(0, 1fr) 130px !important;}
.ms-address-card {gap: 0.8rem !important;}
.ms-contatcs-B .ms-address-card .icms-svg-icon {
margin-top: 0 !important;
height: 1.5rem !important;
vertical-align: -0.125em;
width: 1.5rem !important;
}
.ms-contatcs-B .ms-address-data {
font-size: 1rem !important; gap: 0.5rem !important;
}
.ms-contatcs-B .ms-address-card strong {
font-size: 1rem !important;
}
.ms-phone-row {grid-template-columns: minmax(0, 1fr) 170px !important;gap: 0.8rem !important;}
.ms-label {font-size: 1rem !important;}
.ms-value {font-size: 1rem !important;}
.ms-phone-data {gap: 0.5rem !important;}
.ms-contatcs-B .icms-svg-icon {
height: 1.5rem !important;
vertical-align: -0.125em;
width: 1.5rem !important;
}
.ms-whatsapp-link {
gap: 0 !important;
font-size: 1rem !important;
}
.ms-footer-contacts {margin-top:0.5rem;}
.step-title { font-size: 1.4rem !important;}
.roof-tab {min-height: 63px !important;padding: 10px !important;font-size: 1.4rem !important;}
.roof-image {width: min(100%, 250px) !important;}
.color-swatch {height: 60px !important;}
.calculator .field label {font-size: 1.1rem !important;}
.works-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}
@media (max-width: 992px) {
.ms-footer-logo {margin-bottom:2.5rem;}
}
@media only screen and (max-width: 576px) {
.ms-menu-phone a {font-size: 1rem !important;}
.ms-menu-list a {font-size: 1.2rem;}
.ms-menu-footer {width: 95%;}
.ms-menu-footer svg {width: 1.5rem;height: 1.5rem;vertical-align: -0.425rem;}
.ms-menu-address {font-size: 0.8rem;}
.ms-content h1 {font-size: calc(1.4rem + 2vw) !important;margin-bottom: 0;}
.ms-content p {font-size: calc(1rem + 0.5vw) !important;}
.ms-clients-carousel h3 span, .ms-project-slider h3 span, .ms-pvn h3 span, .ms-uslugi h3 span {font-size: 1.7rem;}
.ms-main-title {font-size: 1.2rem;}
.slide-text h3, .text-block h3 {font-size: 1.3rem;margin-top: 0rem;}
.slide-text p, .text-block p {font-size: 1.1rem;margin-left: 1.5rem;margin-top: 0.5rem !important;}
.section-content h3 {--slant: 1rem;}
.slide-content li, .section-content li {margin-bottom: 0.2em;font-size: 0.9rem;line-height: 1.2;}
.slide-content li::before, .section-content li::before {margin-top: 0.25rem;}
.ms-content {width: 100%;}
.ms-service h2 {font-size: 1.4rem;}
.inner-photo-slider img {}
.slide-image {}
.justify-content-md-end {justify-content: flex-start !important;}
.section-content .image-block {}
.swiper-slide img {}
.swiper {border-radius: 10px;}
.section-content ul {margin-bottom: 0rem;}
.section-content .text-block {padding: 5px 20px 10px 10px;}
.ms-logo-lang {padding: 0;}
.ms-footer-contacts .h4 {font-size:1rem !important;}
.ms-footer-contacts {margin-top:0.5rem;}
.ms-footer-contacts svg {width: 1.5rem !important;height: 1.5rem !important;vertical-align: -0.355rem;}
.ms-slider-container {height: 700px;width: auto;max-width: 100%;}
.ms-slider-container.ms-contacts {height: 250px;width: auto;max-width: 100%;}
.ms-contacts .ms-slide {position: relative;width: 100%;height: 249px;}
.ms-slide {position: relative;width: 100%;height: 700px;}
.ms-slider-container img {max-width: none;height: 700px;}
.ms-contacts .ms-slider-container img {max-width: none;height: 250px;}
.ms-content {text-align:center !important;}
.ms-slider-container.ms-contacts {
max-height: 250px !important;min-height:250px !important;
height: 250px !important;
min-height: 250px;
width: 100% !important;}
.content_item .ms-main-three {min-width: 350px !important;max-width: 100% !important;}
.content_item .ms-main-three:last-child {min-width: 350px !important;max-width: 100% !important;min-height:300px !important;}
.ms-contatcs-B .ms-phones-card {
padding: 1rem 0.5rem 2rem 0.5rem !important;
}
.section-content .text-block {padding: 10px 20px 10px 40px;min-height: 410px;}
.section-content ul {margin-bottom: 1rem;}
.section-content li::before {margin-top: 0.35rem;}
.ms-address-data {gap: 0.5rem;}
.ms-contatcs-B .ms-address-data address {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-outline-button {font-size: 0.9rem !important;}
.ms-contatcs-B .ms-address-card {grid-template-columns: minmax(0, 1fr) 110px !important;}
.ms-address-card {gap: 0.8rem !important;}
.ms-contatcs-B .ms-address-card .icms-svg-icon {
margin-top: 0 !important;
height: 1.2rem !important;
vertical-align: -0.125em;
width: 1.2rem !important;
}
.ms-contatcs-B .ms-address-data {
font-size: 1rem !important; gap: 0.5rem !important;
}
.ms-contatcs-B .ms-address-card strong {
font-size: 1rem !important;
}
.ms-phone-row {grid-template-columns: minmax(0, 1fr) 110px !important;gap: 0.8rem !important;}
.ms-label {font-size: 0.9rem !important;}
.ms-value {font-size: 0.9rem !important;}
.ms-phone-data {gap: 0.5rem !important;}
.ms-contatcs-B .icms-svg-icon {
height: 1.2rem !important;
vertical-align: -0.125em;
width: 1.2rem !important;
}
.ms-whatsapp-link {
gap: 0 !important;
font-size: 0.9rem !important;
}
.ms-outline-button {
padding: 12px 5px !important;
}
.content_item {
padding: 0.5rem;
}
.ms-menu {
padding: 0 0.91rem !important;
}
.ms-contatcs-B .ms-main-title {
font-size: 1rem !important;
}
.ms-contatcs-B .ms-address-card {
padding: 1rem 0.5rem 2rem 0.5rem !important;
}
.step-title { font-size: 1.3rem !important;}
.roof-tab {min-height: 63px !important;padding: 10px !important;font-size: 1.2rem !important;}
.roof-image {width: min(100%, 250px) !important;}
.color-swatch {height: 60px !important;}
.calculator .field label {font-size: 1rem !important;}
}
@media (min-width: 576px) {
.container, .container-sm {max-width: calc(100% - 50px);}
}
@media (min-width: 1981px) {
.ms-content h1 {font-size: calc(2rem + 1vw);}
.ms-slider-container.ms-contacts {
max-height: 300px !important;
height: 300px !important;
min-height: 300px;
width: 100% !important;
max-width: 1920px;
}
.ms-slider-container.ms-contacts h1 {
font-weight: 600;
font-size: calc(1.8rem + 0.5vw);
}
.ms-content p {
font-size: calc(1.3rem + 0.5vw);
}
.container, .container-sm {
max-width: 1920px;
}
}
@media (min-width: 1920px) {
#whatsapp{
right: calc((100vw - 1920px) / 2 + 1rem);
}
}
@media (min-width: 2561px) {
#whatsapp{
right: calc((100vw - 1920px) / 3 + 1rem);
}
}
@media (min-width: 3840px) {
#whatsapp{
right: calc((100vw - 1920px) / 2.5 + 1rem);
}
}
.content_item {}
.breadcrumb {padding: 0.75rem 1.5rem;}
.breadcrumb svg {color:#007A47;}
.ms-page-contactsB {
width: 100%;
max-width: 1920px;
min-height: 100vh;
margin: 0 auto;
padding: 58px 48px 86px;
}
article h1 {position:relative;padding: 0.75rem 0;
margin: 3rem 0;margin-left: 1rem;display:none;
border-bottom: 1px solid rgba(26, 26, 26, 0.125);}
article h1:before {
background: #007A47;
bottom: 0;
content: "";
display: block;
height: 1px;
left: 0;
margin: 0 0 -1px;
position: absolute;
width: 3rem;
}
article h1 span {
font-size: 2.5rem;
text-transform: uppercase;
font-weight: 700;
color: #007a47;
}
.ms-contacts-layout {
display: grid;
grid-template-columns: minmax(560px, 740px) minmax(620px, 1fr);
gap: 46px;
align-items: stretch;
}
.ms-contatcs-B {color:#40494C;}
.ms-contatcs-B .ms-phones-card {padding: 2rem 2rem 3rem 2rem ;}
.ms-contatcs-B .ms-main-title {margin-bottom: 0 !important;margin-top:1rem;font-size: 1.5rem; }
.ms-contatcs-B .ms-card {box-shadow: none;}
.ms-contatcs-B .ms-compact-card {padding: 2rem 2rem 3rem 2rem ;}
.ms-phone-row.ms-phone-email {grid-template-columns: minmax(0, 1fr) 0px !important;}
.ms-contatcs-B .icms-svg-icon {height: 2rem;vertical-align: -0.125em;width: 2rem;}
.ms-whatsapp-link .icms-svg-icon {height: 2rem;vertical-align: -0.125em;width: 2rem;}
.ms-schedule-row .icms-svg-icon {height: 2rem;vertical-align: -0.125em;width: 2rem;}
.ms-contacts-layout a:focus, .ms-contacts-layout a:hover{text-decoration:none;}
.ms-contatcs-B .ms-address-card {padding: 2rem 2rem 3rem 2rem ;}
.ms-contatcs-B .ms-address-card {grid-template-columns: minmax(0, 1fr) 180px;}
.ms-contatcs-B .ms-address-data address {font-size: 1.3rem;}
.ms-contatcs-B .ms-address-card .icms-svg-icon {margin-top: 0 !important;height: 2rem;vertical-align: -0.125em;width: 2rem;}
.ms-contatcs-B address {margin-bottom: 0 !important;}
.ms-contatcs-B .ms-outline-button {font-size: 1.3rem;}
.ms-contatcs-B .ms-address-data {font-size: 1.3rem;}
.ms-contatcs-B .ms-address-card strong {font-size: 1.3rem; font-weight:600;}
.ms-contacts-info {
display: flex;
flex-direction: column;
gap: 43px;
}
.ms-contacts-info .icms-svg-icon {
height: 2em;
width: 2em;
}
.ms-address-card .icms-svg-icon {margin-top:-3em;}
.ms-contact-section h2 {
margin: 0 0 21px;
color: #007A47;
font-size: 29px;
font-weight: 700;
line-height: 1.15;
text-align: center;
}
.ms-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 9px 22px rgba(32, 54, 46, 0.12);
}
.ms-phones-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 394px;
padding: 43px 44px;
gap: 1rem;
}
.ms-phone-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 170px;
align-items: center;
gap: 24px;
}
.ms-phone-data,
.ms-whatsapp-link,
.ms-compact-card,
.ms-address-data {
display: flex;
align-items: center;
}
.ms-phone-data {
min-width: 0;
gap: 18px;
}
.ms-label {
display: block;
margin-bottom: 3px;
font-size: 1.3rem;
font-weight: 400;
}
.ms-value {
font-size: 1.3rem;
font-weight: 600;
transition: color 0.2s ease;
}
a.ms-value:hover,
a.ms-value:focus-visible {
color: #40494C;
}
.ms-whatsapp-link {
justify-content: flex-start;
gap: 12px;
color: #007A47;
font-size: 1.3rem;
font-weight: 600;
transition: color 0.2s ease;
}
.ms-whatsapp-link:hover,
.ms-whatsapp-link:focus-visible {
color: #005E35;
}
.ms-compact-card {
min-height: 139px;
padding: 35px 44px;
gap: 17px;
}
.ms-address-card {
display: grid;
min-height: 183px;
padding: 35px 44px;
align-items: center;
gap: 25px;
}
.ms-address-data {
gap: 17px;
}
.ms-address-data address {
font-style: normal;
font-weight: 600;
line-height: 1.48;
}
.ms-outline-button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
padding: 12px 20px;
color: #007A47;
border: 2px solid #007A47;
border-radius: 8px;
font-weight: 600;
transition: color 0.2s ease, background-color 0.2s ease;
}
.ms-outline-button:hover,
.ms-outline-button:focus-visible {
color: #fff;
background: #007A47;
text-decoration:none;
}
.ms-schedule-card {
display: flex;
min-height: 245px;
flex-direction: column;
justify-content: center;
padding: 42px 44px;
gap: 17px;
}
.ms-schedule-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 215px;
align-items: center;
gap: 15px;
}
.ms-schedule-row strong {
font-weight: 600;
white-space: nowrap;
}
.ms-map-code {
min-height: 1260px;
overflow: hidden;
background: #fff;
margin-top: 50px;
border-radius: 10px;
box-shadow: 0 9px 22px rgba(32, 54, 46, 0.12);
}
.ms-map-code iframe,
.ms-map-code > div {
display: block;
width: 100% !important;
height: 100% !important;
min-height: inherit;
border: 0;
}
:focus-visible {
outline: 3px solid rgba(0, 140, 86, 0.35);
outline-offset: 4px;
}
@media (max-width: 1250px) {
.ms-contacts-layout {
grid-template-columns: minmax(500px, 620px) minmax(400px, 1fr);
gap: 30px;
}
.ms-phones-card,
.ms-compact-card,
.ms-address-card,
.ms-schedule-card {
padding-right: 30px;
padding-left: 30px;
}
.ms-phone-row {
grid-template-columns: minmax(0, 1fr) 175px;
}
.ms-address-card {
grid-template-columns: minmax(0, 1fr) 170px;
}
.ms-schedule-row {
grid-template-columns: 30px minmax(0, 1fr) 175px;
font-size: 17px;
}
}
@media (max-width: 960px) {
.ms-contacts-layout {
grid-template-columns: 1fr;
}
.ms-contacts-info {
gap: 36px;
}
.ms-map-code {
min-height: 520px;
margin-top: 18px;
}
}
@media (max-width: 600px) {
.ms-contact-section h2 {
margin-bottom: 15px;
font-size: 24px;
}
.ms-phones-card,
.ms-compact-card,
.ms-address-card,
.ms-schedule-card {
min-height: 0;
padding: 28px 22px;
}
.ms-phones-card {
gap: 30px;
}
.ms-phone-row {
grid-template-columns: 1fr;
gap: 12px;
}
.ms-label,
.ms-value,
.ms-whatsapp-link,
.ms-address-data address {
font-size: 18px;
}
.ms-address-card {
grid-template-columns: 1fr;
}
.ms-outline-button {
width: 100%;
min-height: 52px;
font-size: 18px;
}
.ms-schedule-row {
grid-template-columns: 28px 1fr;
gap: 9px 13px;
font-size: 17px;
}
.ms-schedule-row strong {
grid-column: 2;
}
.ms-map-code {
min-height: 390px;
}
}
.dropdown-item.active, .dropdown-item:active {
background: none !important;
}
.nav-item.is-active a.active {text-decoration: #D0D5D8 underline; text-decoration-style: dotted; text-underline-offset: 6px;}
/* about */
.page-shell {
width: min(100%, 1920px);
margin: 0 auto;
}
.card-surface {
background: #fff;
border-radius: 10px;
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.06);
}
.media-box {
display: flex;
align-items: center;
justify-content: center;
}
.media-box span {
font-weight: 400;
line-height: 1;
}
/* Верхний блок */
.intro-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 2.7vw, 52px);
align-items: stretch;
}
.intro-photo {
}
.intro-photo img {
border-radius: 10px;
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.06);
min-height: clamp(320px, 31.6vw, 607px);
}
.intro-photo span {
font-size: clamp(44px, 3.1vw, 60px);
}
.intro-text {
min-height: clamp(420px, 31.6vw, 607px);
padding: clamp(34px, 3.05vw, 58px) clamp(30px, 3.05vw, 58px);
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(20px, 1.6vw, 31px);
}
.intro-text p {
margin: 0;
font-size: 1.3rem;
line-height: 1.42;
font-weight: 400;
}
/* Виды деятельности */
.activities-section {
margin-top: clamp(64px, 6.2vw, 118px);
}
.activities-section h2 {
margin: 0 0 clamp(38px, 3.65vw, 70px);
color: #006D3F;
font-size: clamp(28px, 2.35vw, 45px);
line-height: 1.1;
font-weight: 700;
letter-spacing: 0.01em;
}
.activities-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(24px, 2.05vw, 39px);
}
.activity-card {
overflow: hidden;
min-width: 0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.activity-card:hover {
transform: translateY(-8px);
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.1);
}
.activity-photo {
height: clamp(200px, 13.6vw, 300px);
border-radius: 10px 10px 0 0;
}
.activity-photo span {
font-size: clamp(38px, 2.9vw, 56px);
}
.activity-body {
padding: clamp(22px, 1.5vw, 29px) clamp(18px, 1.2vw, 24px) clamp(26px, 1.8vw, 35px);
}
.activity-body h3 {
margin: 0 0 10px;
color: #006D3F;
font-size: 1.3rem;
line-height: 1.32;
font-weight: 700;
}
.activity-body p {
margin: 0;
color: #2d3436;
font-size: 1.3rem;
line-height: 1.42;
font-weight: 400;
}
/* Нижний CTA */
.cta-section {
margin-top: clamp(75px, 6.4vw, 123px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 0.98fr);
gap: clamp(46px, 5vw, 96px);
align-items: center;
}
.cta-copy {
display: flex;
align-items: stretch;
gap: clamp(22px, 2vw, 38px);
min-width: 0;
}
.cta-line {
width: 3px;
flex: 0 0 3px;
background: #006D3F;
border-radius: 3px;
}
.cta-copy strong {
display: block;
color: #485053;
font-size: clamp(30px, 2.55vw, 49px);
line-height: 1.15;
font-weight: 700;
}
.cta-copy p {
margin: 10px 0 0;
color: #485053;
font-size: clamp(22px, 2vw, 38px);
line-height: 1.24;
font-weight: 400;
}
.cta-actions {
display: grid;
gap: 18px;
}
.cta-button {
min-height: clamp(82px, 5.5vw, 127px);
padding: 0 clamp(28px, 3vw, 58px);
border: 3px solid #006D3F;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
color: #006D3F;
text-decoration: none;
font-size: clamp(1.2rem, 1.5vw, 1.8rem);
text-transform:uppercase;
line-height: 1.1;
font-weight: 600;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.cta-arrow {
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 24px solid #006D3F;
flex: 0 0 auto;
transition: border-left-color .2s ease, transform .2s ease;
}
.nav-btn:hover .cta-arrow-calc { border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 18px solid #fff;}
.cta-arrow-calc {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 18px solid #006D3F;
flex: 0 0 auto;
transition: border-left-color .2s ease, transform .2s ease;
}
.nav-btn:hover .cta-arrow-calc-back { border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 18px solid #fff;}
.cta-arrow-calc-back {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 18px solid #006D3F;
flex: 0 0 auto;
transition: border-left-color .2s ease, transform .2s ease;
}
.cta-button:hover {
background: #006D3F;
color: #fff;
transform: translateY(-2px);
text-decoration:none;
}
.cta-button:hover .cta-arrow {
border-left-color: #fff;
transform: translateX(4px);
}
.cta-button:focus-visible {
outline: 3px solid rgba(0, 122, 71, .25);
outline-offset: 4px;
}
/* Планшет */
@media (max-width: 1200px) {
.intro-grid {
grid-template-columns: 1fr;
}
.activities-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity-photo {
height: 250px;
}
.cta-section {
grid-template-columns: 1fr;
gap: 42px;
}
.cta-actions {
max-width: 900px;
width: 100%;
}
}
@media (max-width: 900px) {
.page-shell {
padding-inline: 22px;
}
.intro-grid {
grid-template-columns: 1fr;
}
.intro-photo,
.intro-text {
min-height: auto;
}
.intro-text {
padding: 30px 26px;
}
.activities-section {
margin-top: 70px;
}
}
/* Мобильные */
@media (max-width: 640px) {
.page-shell {
padding: 18px 14px 36px;
}
.intro-grid {
gap: 20px;
}
.intro-text {
padding: 24px 20px;
gap: 18px;
}
.intro-text p {
font-size: 15px;
line-height: 1.55;
}
.activities-section h2 {
margin-bottom: 28px;
}
.activities-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.activity-photo {
height: auto;
aspect-ratio: 16 / 8.5;
}
.activity-body {
padding: 20px 18px 24px;
}
.cta-section {
margin-top: 62px;
gap: 30px;
}
.cta-copy {
gap: 17px;
}
.cta-line {
width: 2px;
flex-basis: 2px;
}
.cta-copy strong {
font-size: 27px;
}
.cta-copy p {
font-size: 20px;
line-height: 1.3;
}
.cta-button {
min-height: 72px;
padding: 0 22px;
border-width: 2px;
font-size: 20px;
}
.cta-arrow {
border-top-width: 10px;
border-bottom-width: 10px;
border-left-width: 18px;
}
}
/* about */
/* services */
.work-page {
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 0.5rem;
}
.work-page .cta-section { margin-top: clamp(1rem, 6.4vw, 2rem) !important;margin-bottom: clamp(2rem, 6.4vw, 3rem) !important;}
.works-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 54px 20px;
}
.work-card {
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
background: #fff;
border-radius: 10px;
box-shadow: 0 7px 18px rgba(35, 51, 46, 0.14);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-card:hover {
transform: translateY(-8px);
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.1);
}
.work-card__photo {
width: 100%;
aspect-ratio: 2 / 1;
display: grid;
place-items: center;
flex: 0 0 auto;
background: #b3b3b3;
color: #fff;
font-size: clamp(45px, 4vw, 68px);
font-weight: 400;
line-height: 1;
}
.work-card__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.work-card__content {
flex: 1;
min-height: 310px;
padding: 34px 25px 34px;
}
.work-card__title {
margin: 0 0 24px;
color: #007a47;
font-size: 1.3rem;
font-weight: 700;
line-height: 1.32;
text-transform: uppercase;
}
.work-card__list {
margin: 0;
padding: 0 0 0 26px;
list-style: none;
}
.work-card__list li {
position: relative;
margin: 0;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.38;
margin-bottom: 0.5rem;
}
.work-card__list li + li {
margin-top: 2px;
}
.work-card__list li::before {
content: "";
position: absolute;
left: -25px;
top: 5px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 17px solid #007a47;
}
/* Ноутбуки / небольшие десктопы */
@media (max-width: 1500px) {
.work-page {
padding: 40px;
}
.works-grid {
gap: 38px;
}
.work-card__content {
min-height: 320px;
padding: 28px 22px 30px;
}
.work-card__title {
font-size: 23px;
}
.work-card__list li {
font-size: 18px;
}
}
/* Планшеты: 2 карточки в ряд */
@media (max-width: 1100px) {
.work-page {
padding: 32px;
}
.works-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
.work-card__content {
min-height: 300px;
}
.work-card__title {
font-size: 22px;
}
.work-card__list li {
font-size: 17px;
}
}
/* Телефоны: 1 карточка в ряд */
@media (max-width: 700px) {
.work-page {
padding: 20px 16px 32px;
}
.works-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.work-card {
border-radius: 12px;
}
.work-card__photo {
font-size: 45px;
}
.work-card__content {
min-height: 0;
padding: 24px 20px 28px;
}
.work-card__title {
margin-bottom: 18px;
font-size: clamp(20px, 5.4vw, 24px);
}
.work-card__list {
padding-left: 23px;
}
.work-card__list li {
font-size: clamp(16px, 4vw, 18px);
line-height: 1.45;
}
.work-card__list li::before {
left: -20px;
top: 7px;
border-top-width: 8px;
border-bottom-width: 8px;
border-left-width: 15px;
}
}
/* services */
/* products */
.ms-produtcs-list {margin-top: clamp(2rem, 6.2vw, 3rem);}
.ms-produtcs-list a {color: #006D3F;}
.ms-produtcs-list a:hover, .ms-produtcs-list a:focus {color: #005E35;text-decoration:none;}
.ms-produtcs-list .activity-photo {
height: auto !important;}
.product-page {
width: min(100%, 1920px);
margin: 0 auto;
overflow: hidden;
}
.product {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
gap: clamp(30px, 2vw, 60px);
padding: 1.5rem 0;
}
.product__left,
.product__right {
min-width: 0;
}
.product__left {
display: flex;
flex-direction: column;
gap: 20px;
}
.product__right {
display: flex;
flex-direction: column;
gap: 26px;
}
.product__intro {
padding-top: 4px;
}
.product__eyebrow {
margin: 0 0 7px;
color: #006D3F;
font-weight: 800;
font-size: clamp(12px, .88vw, 16px);
line-height: 1.2;
}
.product h1 {
margin: 0;
font-size: clamp(44px, 4.4vw, 78px);
line-height: .98;
letter-spacing: -0.045em;
font-weight: 900;
}
.product__lead {
max-width: 760px;
margin: 14px 0 0;
color: #2d3436;
font-size: clamp(17px, 1.2vw, 23px);
line-height: 1.35;
}
.product__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 26px;
}
.product-page .btn {
min-height: 66px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.5rem;
padding: 0 1.2rem;
border-radius: 8px;
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 1.2rem;
box-shadow: 0 7px 18px rgba(0, 0, 0, .08);
transition: transform .2s ease, filter .2s ease;
}
.product-page .btn:hover {
transform: translateY(-2px);
filter: brightness(1.04);
color:#D0D5D8;
}
.btn--green {
background: linear-gradient(135deg, #005E35, #007A47);
}
.btn--orange {
background: linear-gradient(135deg, #ff6619, #ff4d00);
}
.btn__icon {
width: 28px;
height: 28px;
}
.btn__icon svg,
.btn__arrow {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
vertical-align: baseline;
}
.btn__arrow {
width: 25px;
height: 25px;
}
/* ---------- gallery ---------- */
.gallery {
min-width: 0;
}
.gallery > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.gallery__stage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
min-height: 800px;
overflow: hidden;
border-radius: 6px;
background: #d9dcde;
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.06);
}
.gallery__slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity .28s ease;
}
.gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
#slide-1:checked ~ .gallery__stage .gallery__slide--1,
#slide-2:checked ~ .gallery__stage .gallery__slide--2,
#slide-3:checked ~ .gallery__stage .gallery__slide--3,
#slide-4:checked ~ .gallery__stage .gallery__slide--4 {
opacity: 1;
visibility: visible;
z-index: 1;
}
.gallery__badge {
position: absolute;
top: 20px;
left: 18px;
display: flex;
align-items: center;
gap: 18px;
padding: 14px 20px;
border-radius: 8px;
color: #fff;
background: linear-gradient(135deg, rgba(22, 140, 53, .96), rgba(25, 129, 46, .92));
box-shadow: 0 9px 22px rgba(10, 90, 30, .18);
}
.gallery__badge strong {
font-size: clamp(28px, 2vw, 38px);
line-height: 1;
}
.gallery__badge span {
font-size: clamp(11px, .83vw, 14px);
line-height: 1.25;
font-weight: 800;
}
.gallery__arrow {
position: absolute;
top: 50%;
z-index: 2;
width: 42px;
height: 42px;
display: grid;
place-items: center;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(255,255,255,.93);
box-shadow: 0 4px 16px rgba(0,0,0,.12);
cursor: pointer;
transition: transform .2s ease, background .2s ease;
}
.gallery__arrow:hover {
transform: translateY(-50%) scale(1.06);
background: #fff;
}
.gallery__arrow--left {
left: 14px;
}
.gallery__arrow--right {
right: 14px;
}
.gallery__arrow svg {
width: 21px;
height: 21px;
fill: none;
stroke: #344054;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.gallery__counter {
position: absolute;
right: 14px;
bottom: 13px;
padding: 7px 12px;
border-radius: 18px;
color: #fff;
background: rgba(33, 39, 45, .72);
font-size: 13px;
font-weight: 800;
}
.gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 35px;
margin-top: 14px;
}
.gallery__thumb {
height: 160px;
overflow: hidden;
border: 2px solid transparent;
border-radius: 6px;
background: #eef0f2;
cursor: pointer;
transition: border-color .2s ease, transform .2s ease;
}
.gallery__thumb:hover {
transform: translateY(-2px);
}
.gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
#slide-1:checked ~ .gallery__thumbs .gallery__thumb--1,
#slide-2:checked ~ .gallery__thumbs .gallery__thumb--2,
#slide-3:checked ~ .gallery__thumbs .gallery__thumb--3,
#slide-4:checked ~ .gallery__thumbs .gallery__thumb--4 {
border-color: #006D3F;
}
/* ---------- cards ---------- */
.description-card,
.info-card {
border: 1px solid #e3e7eb;
border-radius: 10px;
box-shadow: 0 6px 22px rgba(20, 35, 50, .035);
}
.description-card {
padding: clamp(20px, 1.65vw, 30px);
background:
linear-gradient(135deg, rgba(255,255,255,.25), rgba(237,241,244,.8)),
#f4f6f7;
}
.description-card h2, .info-card h2
{
font-size: 1.8rem;
font-weight: 700;
color: #006D3F;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.description-card p {
color: #424b59;
font-size: clamp(1rem, .98vw, 1.3rem);
line-height: 1.42;
}
.info-card {
padding: clamp(20px, 1.65vw, 30px);
min-height: 180px;
}
.info-card--spec {
background:
radial-gradient(circle at 0 0, rgba(43, 171, 84, .12), transparent 42%),
linear-gradient(135deg, #f6fbf7, #eef7f0);
border-color: #dcebe0;
min-height: 290px;
}
.info-card--benefits {
margin-top: auto;
background:
radial-gradient(circle at 0 0, rgba(43, 171, 84, .12), transparent 42%),
linear-gradient(135deg, #f6fbf7, #eef7f0);
border-color: #dcebe0;
min-height: 290px;
}
.info-card ul, .description-card ul {
list-style: none;
margin: 1.2rem 0 1.2rem;
padding: 0;
display: grid;
gap: 0.5rem;
}
.info-card ul:first-child { margin: 1.2rem 0 0;}
.info-card p {color: #46505d;
font-size: clamp(1rem, .98vw, 1.3rem);
line-height: 1.38;
margin-bottom: 0.5rem;align-items: center;}
.info-card ul li, .description-card ul li {
display: grid;
grid-template-columns: 30px 1fr;
align-items: start;
gap: 0.2rem;
color: #46505d;
font-size: clamp(1rem, .98vw, 1.3rem);
line-height: 1.38;
margin-bottom: 0.5rem;
}
.info-card li:before, .description-card li:before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-top: 0.1rem;
}
/* ---------- applications ---------- */
.applications {
padding: 20px clamp(18px, 1.5vw, 86px) clamp(28px, 1.5vw, 56px);
background:
linear-gradient(180deg, #f3f6f7 0%, #f8fafb 100%);
border-top: 1px solid #edf0f2;
border-radius: 10px;
margin-top: 1.5rem;
}
.applications__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 18px;
}
.applications__head h2 {
margin: 0;
font-size: clamp(24px, 1.65vw, 31px);
line-height: 1.08;
}
.applications__head p {
margin: 5px 0 0;
color: #2d3436;
font-size: clamp(13px, .9vw, 17px);
}
.applications__all {
flex: 0 0 auto;
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 11px;
padding: 0 22px;
border: 1px solid #006D3F;
border-radius: 6px;
color: #006D3F;
background: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.applications__all svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.applications__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 20px;
}
.app-card {
overflow: hidden;
min-width: 0;
border: 1px solid #e5e9ec;
border-radius: 7px;
background: #fff;
box-shadow: 0 7px 18px rgba(20, 35, 50, .035);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.app-card:hover {
transform: translateY(-6px);
box-shadow: 7px 7px 25px rgba(0, 0, 0, 0.1);
}
.app-card__media {
position: relative;
overflow: hidden;
background: #dce3e6;
}
.app-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(16,36,25,.05));
pointer-events: none;
}
.app-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.app-card__icon {
position: absolute;
left: 14px;
bottom: 12px;
z-index: 2;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 8px;
color: #fff;
background: rgba(22, 140, 53, .93);
border: 1px solid rgba(255,255,255,.45);
font-size: 23px;
box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.app-card__icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.app-card h3 {
margin: 0;
min-height: 54px;
padding: 10px 13px 12px;
color: #303743;
font-size: 1.2rem;
line-height: 1.18;
}
/* ---------- responsive ---------- */
@media (max-width: 1260px) {
.product {
grid-template-columns: 1fr 1fr;
padding-left: 34px;
padding-right: 34px;
}
.applications {
padding-left: 34px;
padding-right: 34px;
}
.gallery__stage {
min-height: 330px;
}
.applications__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product__actions {
grid-template-columns: 1fr 1fr;
}
.btn {
padding: 0 18px;
gap: 12px;
}
}
@media (max-width: 1024px) {
.product {
grid-template-columns: 1fr;
gap: 28px;
}
.product__left,
.product__right {
display: contents;
}
.gallery {
order: 1;
}
.product__intro {
order: 0;
}
.description-card {
order: 2;
}
.info-card--spec {
order: 3;
}
.info-card--benefits {
order: 4;
}
.gallery__stage {
aspect-ratio: 16 / 9;
min-height: unset;
}
.gallery__thumb {
height: 96px;
}
.applications__grid {
grid-template-columns: repeat(3, 1fr);
}
.app-card__media {
}
}
@media (max-width: 720px) {
.product,
.applications {
padding-left: 16px;
padding-right: 16px;
}
.product {
padding-top: 18px;
}
.product h1 {
font-size: clamp(42px, 13vw, 64px);
}
.product__lead {
font-size: 16px;
}
.product__actions {
grid-template-columns: 1fr;
gap: 10px;
}
.btn {
min-height: 58px;
}
.gallery__stage {
border-radius: 8px;
}
.gallery__badge {
top: 12px;
left: 12px;
gap: 11px;
padding: 10px 12px;
}
.gallery__badge strong {
font-size: 26px;
}
.gallery__badge span {
font-size: 10px;
}
.gallery__thumbs {
gap: 8px;
}
.gallery__thumb {
height: 72px;
}
.gallery__arrow {
width: 38px;
height: 38px;
}
.info-card,
.description-card {
border-radius: 10px;
}
.applications__head {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.applications__all {
width: 100%;
justify-content: center;
}
.applications__grid {
grid-template-columns: repeat(1, 1fr);
gap: 12px;
}
.app-card__media {
}
}
@media (max-width: 480px) {
.product {
gap: 20px;
}
.product__eyebrow {
font-size: 11px;
}
.product h1 {
font-size: 42px;
}
.gallery__stage {
aspect-ratio: 1 / 1;
}
.gallery__thumbs {
grid-template-columns: repeat(4, minmax(68px, 1fr));
overflow-x: auto;
padding-bottom: 3px;
}
.gallery__thumb {
min-width: 68px;
height: 62px;
}
.gallery__badge {
max-width: calc(100% - 70px);
}
.gallery__badge span {
display: none;
}
.applications__grid {
grid-template-columns: 1fr;
}
.app-card {
display: grid;
grid-template-columns: 42% 58%;
align-items: stretch;
}
.app-card__media {
height: 112px;
}
.app-card h3 {
min-height: 112px;
display: flex;
align-items: center;
padding: 14px;
font-size: 14px;
}
}
/* products */
.content_item .value p {font-size:1.3rem;}
.calculator { width: min(100% - 32px, 1040px); margin: 0 auto; padding: 0; }
.step-title { margin-bottom: 2rem; color: #00864f; font-size: 2rem; line-height: 1.15; text-align: center; text-transform: uppercase; font-weight: 700; }
.roof-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 3vw, 40px); margin-bottom: clamp(28px, 5vw, 58px); }
.roof-tab { width: 100%; min-height: 82px; padding: 15px; border: 3px solid #00864f; border-radius: 10px; color: #00864f; background: #fff; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: .2s; }
.roof-tab:hover { background: #eaf6f0; }
.roof-tab.active { color: #fff; background: #00864f; }
.roof-picture { display: grid;
place-items: center;
/* min-height: clamp(250px, 43vw, 440px); */
margin-bottom: 3rem;
padding: 1rem;
overflow: hidden;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 28px rgba(33, 53, 45, .11);}
.roof-image { display: none; width: min(100%, 650px); height: auto; }
.roof-image.active { display: block; }
.wall { fill: #edf3f0; stroke: #54615d; stroke-width: 4; }
.side { fill: #dce8e2; stroke: #54615d; stroke-width: 4; }
.roof { fill: #00864f; stroke: #006f42; stroke-width: 4; }
.roof-light { fill: #00a261; }
.calculator .edge { fill: none; stroke: #54615d; stroke-width: 4; stroke-linecap: round; }
.building-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 42px; }
.calculator .field { display: grid; gap: 12px; }
.calculator .field label {font-size: 1.3rem;text-align: center; }
.calculator .field input { width: 100%;
height: 60px;
border: 2px solid transparent;
border-radius: 10px;
color: #454d4b;
background: #fff;
box-shadow: 0 10px 28px rgba(33, 53, 45, .11);
font-size: 1.8rem;
text-align: center;
transition: .2s;}
.calculator .field input::placeholder { color: #cdd3d1; opacity: 1; }
.calculator .field input:focus { border-color: #00864f; outline: 4px solid rgba(0,134,79,.15); }
.calculator .navigation { display: flex; justify-content: center; gap: 38px; margin-top: 3rem; }
.calculator .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-width: 180px; min-height: 60px; padding: 12px 24px; border: 2px solid #00864f; border-radius: 10px; color: #00864f; background: transparent; font-size: 20px; font-weight: 700; cursor: pointer; transition: .2s; }
.calculator .nav-btn:hover { color: #fff; background: #00864f; }
.roof-tab:focus-visible, .nav-btn:focus-visible, .add-opening:focus-visible, .remove-opening:focus-visible { outline: 4px solid rgba(0,134,79,.2); outline-offset: 3px; }
.opening-section + .opening-section { margin-top: 2rem; }
.opening-rows { display: grid; gap: 28px; }
.opening-row { margin: 0; padding: 0; border: 0; min-width: 0; }
.opening-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 42px); }
.opening-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.add-opening, .remove-opening { border: 0; color: #454d4b; background: transparent; font-weight: 700; cursor: pointer; }
.add-opening { padding: 10px 0 10px 12px; font-size: clamp(17px, 2vw, 22px); }
.add-opening span { margin-left: 12px; }
.add-opening:hover, .remove-opening:hover { color: #00864f; }
.add-opening:disabled { opacity: .5; cursor: default; }
.remove-opening { display: block; margin: 10px 0 0 auto; padding: 8px 0; font-size: 15px; }
.calculator .status { min-height: 24px; text-align: center; line-height: 1.5; }
.calculator .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.panel-section + .panel-section { margin-top: 3rem; }
.panel-controls { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(210px, .8fr); gap: clamp(22px, 4vw, 48px); align-items: end; }
.select-field { display: grid; gap: 16px; }
.select-field label { font-size: 1.3rem; text-align: center; }
.select-wrap { position: relative; }
.select-wrap::after { content: '▼'; position: absolute; top: 50%; right: 26px; color: #00864f; font-size: 26px; pointer-events: none; transform: translateY(-50%); }
.select-wrap select { width: 100%;
height: 65px;
padding: 10px 65px 10px 25px;
appearance: none;
border: 3px solid #00864f;
border-radius: 10px;
color: #00864f;
background: #fff;
font-size: 1.6rem;
font-weight: 700;
text-align: center;
cursor: pointer; }
.select-wrap select:focus-visible { outline: 4px solid rgba(0,134,79,.18); outline-offset: 3px; }
.color-section {margin-top: 3rem; }
.color-section .step-title { margin-bottom: 2rem; }
.color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(35px, 7vw, 82px); }
.color-button { display: grid; grid-template-columns: minmax(130px, 210px) 1fr; gap: clamp(18px, 3vw, 38px); align-items: center; width: 100%; padding: 5px; border: 2px solid transparent; border-radius: 10px; color: #454d4b; background: transparent; font-size: 1.8rem; font-weight: 700; text-align: left; cursor: pointer; transition: .18s; }
.color-swatch { position: relative; display: block; width: 100%; height: 82px; border: 3px solid #fff; border-radius: 10px; background: var(--swatch); box-shadow: 0 5px 16px rgba(33,53,45,.08); }
.color-button-gray-border .color-swatch { border-color: #A1A9AE; }
.color-button-pattern .color-swatch { background: repeating-linear-gradient(135deg, #fff 0 10px, #bcc3c6 10px 14px, #fff 14px 24px); }
.color-button.active { border-color: #00864f; background: rgba(0,134,79,.05); }
.color-button.active .color-swatch::after { content: '✓'; position: absolute; top: 8px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #00864f; font-size: 19px; }
.color-button:hover { background: rgba(0,134,79,.05); }
.color-button:focus-visible { outline: 4px solid rgba(0,134,79,.2); outline-offset: 3px; }
.calculator .contact-page { padding-top: 1rem; }
.calculator .contact-form { width: 100%; }
.calculator .contact-form > .step-title { margin-bottom: clamp(54px, 8vw, 88px); }
.calculator .contact-field { display: grid; gap: 18px; margin-bottom: 32px; }
.calculator .contact-field label, .customer-type legend { font-size: 1.6rem; text-align: center; }
.calculator .contact-field input { width: 100%; height: 80px; padding: 10px 32px; border: 2px solid transparent; border-radius: 10px; color: #454d4b; background: #fff; box-shadow: 0 10px 28px rgba(33, 53, 45, .11); font-size: 2rem; text-align: center; transition: .2s; }
.contact-field input::placeholder { color: #cfd4d6; opacity: 1; }
.contact-field input:focus { border-color: #00864f; outline: 4px solid rgba(0,134,79,.15); }
.customer-type { margin: 28px 0 0; padding: 0; border: 0; }
.customer-type legend { width: 100%; margin-bottom: 18px; }
.customer-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 4vw, 46px); }
.customer-button { display: grid;
place-items: center;
min-height: 80px;
padding: 12px;
border: 3px solid #00864f;
border-radius: 10px;
color: #00864f;
background: #fff;
font-size: 1.8rem;
font-weight: 700;
cursor: pointer;
transition: .2s;
width: 100%;}
.customer-button:hover { background: #eaf6f0; }
.customer-button.active { color: #fff; background: #00864f; }
.customer-button:focus-visible { outline: 4px solid rgba(0,134,79,.2); outline-offset: 3px; }
.privacy-check { display: flex; align-items: center; gap: 18px; margin-top: clamp(58px, 8vw, 88px); font-size: clamp(18px, 2.4vw, 29px); line-height: 1.35; cursor: pointer; }
.privacy-check input { position: absolute; opacity: 0; pointer-events: none; }
.checkmark { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border: 3px solid #00864f; border-radius: 10px; background: #fff; }
.privacy-check input:checked + .checkmark::after { content: '';
position: absolute;
left: 16px;
width: 13px;
height
: 25px;
border: solid #00864f;
border-width: 0 7px 7px 0;
transform: rotate(45deg);
top: 6px; }
.privacy-check input:focus-visible + .checkmark { outline: 4px solid rgba(0,134,79,.2); outline-offset: 3px; }
.privacy-check a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.final-actions { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: clamp(68px, 9vw, 100px); }
.calculate-button { min-width: min(100%, 590px); min-height: 98px; padding: 18px 35px; border: 0; border-radius: 10px; color: #fff; background: #00864f; font-size: clamp(25px, 3.6vw, 39px); font-weight: 800; text-transform: uppercase; cursor: pointer; transition: .2s; }
.calculate-button:hover { background: #006f42; transform: translateY(-1px); }
.calculate-button:focus-visible, .back-link:focus-visible { outline: 4px solid rgba(0,134,79,.22); outline-offset: 4px; }
.back-link { padding: 8px 15px; border: 0; color: #00864f; background: transparent; font-size: 18px; font-weight: 700; cursor: pointer; }
@media (max-width: 768px) {
.calculator { width: min(100% - 24px, 1040px); padding-top: 26px; }
.roof-tabs, .building-fields { grid-template-columns: 1fr; gap: 18px; }
.roof-tab { min-height: 62px; }
.roof-picture { min-height: 230px; margin-bottom: 48px; padding: 14px; }
.calculator .field input { height: 68px; }
.calculator .navigation { gap: 12px; margin-top: 48px; }
.calculator .nav-btn { flex: 1; min-width: 0; min-height: 54px; padding: 10px 14px; font-size: 17px; }
.panel-controls { grid-template-columns: 1fr; }
.select-wrap select { height: 68px; }
.color-grid { gap: 16px; }
.color-button { grid-template-columns: 1fr; gap: 8px; text-align: center; }
.color-swatch { height: 66px; }
.contact-form > .step-title { margin-bottom: 42px; }
.contact-field input { height: 76px; padding: 10px 14px; }
.customer-buttons { gap: 12px; }
.customer-button { min-height: 70px; }
.privacy-check { align-items: flex-start; gap: 13px; }
.checkmark { flex-basis: 40px; width: 40px; height: 40px; border-radius: 9px; }
.privacy-check input:checked + .checkmark::after { left: 11px; top: 4px; width: 10px; height: 21px; border-width: 0 6px 6px 0; }
.calculate-button { min-height: 76px; }
}
@media (max-width: 480px) {
.opening-fields { grid-template-columns: 1fr; gap: 16px; }
.opening-row + .opening-row { padding-top: 24px; border-top: 1px solid #dfe5e2; }
.opening-fields label { text-align: left; font-size: 18px; }
}
@media (max-width: 1200px) {
.ms-slide video {
width: auto;
max-height: 700px;
}
}