html {box-sizing: border-box;scroll-behavior: smooth;}

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

.main { margin-top: -22px;}
.open-sans {font-family: "Open Sans", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-variation-settings:	"wdth" 100;}
body { margin: 0; display: flex; flex-direction: column; font-size: 16px; font-weight: 400; color: #000; }
a {text-decoration: none; color: inherit;}
button { cursor: pointer; border: none; background-color: transparent;}
ul, li, ol { list-style: none; padding: 0; margin: 0;}
p { margin: 0px;}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0;}
.container { width: 88%; margin: 0 auto; padding: 0 10px;}
.title { font-size: 43px; font-weight: 400; letter-spacing:  -1.5px;line-height: 1;  color: #008dd2;}
.btn {transition: background-color 300ms ease ;padding: 15px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); color: #fff; background-color: #008dd2 ; font-weight: 600; line-height: 1.4; letter-spacing: -0.16px; border-radius: 33px}
.btn:hover { background-color: #044769;}
.main { flex: 1 1 auto;}
.header { padding: 5px 0; position: sticky; top: 0; left: 0; right: 0px; bottom: 0; z-index: 99; background: #fff;}
.header.scrolled .header__inner {padding: 0;}
.header__logo {display: flex;flex-shrink: 0;width: 15%;max-width: 200px}
.header__logo img {width: 100%;}
.header__inner { display: flex; align-items: center; justify-content: space-between;  padding: 15px 0; transition: 300ms;}
.header__list { display: flex; align-items: center; }
.header__item + .header__item {margin-left: 50px;}
.header__item {}
.header__link { color: #232323; transition: 0.3s; padding-bottom: 8px; border-bottom: 2px solid rgba(0,0,0,0);font-weight: 600}
.header__link:hover { color: #000; border-color: rgba(0,0,0,1)}

.header__action { position: relative; color: #008dd2; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; justify-content: center;}
.header__action:hover span { width: 30px; border-radius: 22px; right: -38px;}
.header__action span {position: absolute; right: -20px; transition: 350ms ease; background-color: #008dd2; color: #fff; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;border-radius: 50%; margin-left: 5px; }
.header__actions { position: relative; display: flex; align-items: center}
.header__lang { display:none; position: absolute; z-index: 100; top: 30px; left: 0; right: 0; background-color: #fff; box-shadow: 0 0 5px 1px #666; flex-direction: column;}
.header__lang-btn { padding: 7px 35px; font-size: 16px; font-weight: 500; text-align: center;}
.header__lang-btn:hover { background-color: #ddd; }
.header__lang.active { display: flex;}

.top {position: relative}
.top::before { content:""; position: absolute;inset: 0; background-color: rgba(0,0,0,0.5); z-index: 2;}
.top__video { display: block; min-height: 300px; height: calc(100vh - 200px); object-fit: cover; width: 100%;} /* высота хедера)*/
.top__video-wrap {position: absolute; top: 50%; left: 0%; right: 0; transform: translateY(-50%); z-index: 3;}
.top__video-content { display: flex; align-items: center; justify-content: center; flex-direction: column;}
.top__video-title { color: #fff; font-size: 64px; font-weight: 400;line-height: 1; letter-spacing: -3px; display: flex; flex-direction: column; align-items: center;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6)}
.top__video-subtitle { text-align: center;color: #fff; font-size: 52px; padding: 0 10px; font-weight:400;line-height: 1;display: flex; flex-direction: column; align-items: center;margin-top:10px;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6)}
.top__btn {width: 40px; height: 40px; font-size: 64px;position: absolute; bottom: 0; color: #fff; z-index: 3; left: 50%; transform: translate(-50%, -100%)}
.images .container{ position: relative; display: flex; justify-content: space-between; margin-bottom: 16px; z-index: 3;align-items: center}
.images__image-1 { max-width: 30%;display: flex;margin:0 auto}
.images__image-1 img{ width:100%}

.images__content { padding: 90px 90px 0 90px; background-color: #008dd2;width: 40%;display: flex;flex-direction: column}
.images__text { color: #fff; font-size: 18px; line-height: 1.5;}
.images__image-2 {width: 100%;display: flex}
.images__image-2 img{width: 100%;}
.certificats {margin-bottom: 60px; margin-top: 20px;}
.certificats__inner { max-width: 75%;}
.certificats__title { margin-bottom: 20px; }
.certificats__subtitle { line-height: 1.4; margin-bottom: 25px;}
.certificats__btns {display: flex; align-items: center; }
.certificats__btn { }

.certificats__btn + .certificats__btn { margin-left: 25px}

.guarantee {padding: 40px 0; color: #fff; background-color: #065e86;}
.guarantee__title {font-size: 22.4px; font-weight: 700; margin-bottom: 16px;}
.guarantee__subtitle { margin-bottom: 16px; max-width: 70%;}
.guarantee__btn  { display: inline-block;}

.brands { padding: 48px 0; background-color: #008dd2;}
.brands__inner {margin-bottom: 100px; overflow: hidden;}
.brands__title { color: #fff;}
.brands__subtitle {color:#fff;margin-top:10px}
.slider__window { margin-top: 70px; width: 100%; height: 300px; position: relative;
    --swiper-pagination-color: #007aff;
    --swiper-navigation-color: #ffffff;
    --swiper-scrollbar-drag-color: #007aff;
    --swiper-slide-bg-color: #f0f0f0; }
.brands__slider { display: flex; align-items: center;  gap: 62px; overflow: hidden }
.brand__slide {background-color: lightblue; position: relative; min-width: 300px;}
.brand__slide::after { content: ""; padding-bottom: 70%; display: block;}
.brand__slide-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}

.why {padding: 48px 0 80px; background-color: #008dd2; }
.why__inner {}
.why__title { color: #fff; max-width: 665px; margin-bottom: 200px;}
.why__list { display: flex; align-items: stretch; justify-content: space-between;}
.why__item {}
.why__item + .why__item { margin-left: 32px;}
.why__item-text {border-bottom: 2px solid #008dd2; padding-bottom: 20px; }
.why__item-text strong{ font-weight: 700; color: #004c72; font-size: 62px; line-height: 1; letter-spacing: -3px;}
.why__item-description { color: #fff; margin-top: 20px;}

.banner {position: relative; padding: 64px 0; background-color: lightblue; background-image: url("/images/site/main-banner.jpg"); background-size: cover; background-repeat: no-repeat; background-position: bottom; background-attachment: fixed;}
.banner::before { content:""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 2;}
.banner__title { position: relative;  z-index: 3; color: #fff; font-size: 22.4px;  font-weight: 700; text-align: center;  display: block;}

.footer { padding: 32px 0 16px; background-color: #008dd2;}
.footer__logo {display: flex;max-width: 200px}
.footer__inner { display: grid; grid-template-columns: repeat(4, 1fr);}
.footer__box { padding: 0 16px;}
.footer__box-container {}
.footer__title {color: #fff; font-weight: 700; margin-bottom: 8px; display: inline-block;}
.footer__about-company {color: #333; line-height: 1.4; }
.footer__box-container + .footer__box-container { margin-top: 32px;}

.footer__socials { margin-top: 8px; display: flex; align-items: center;}
.footer__social-link { width: 40px; height: 40px; background-color: #fff; border-radius: 50%;}
.footer__social-link + .footer__social-link { margin-left: 8px;}
.footer__social-link { display: flex; align-items: center; justify-content: center;}

.footer__email, .footer__phone{ color: #333; }
.footer__email { text-decoration: underline;}
.footer__email:hover { text-decoration: none;}

.footer__email,.footer__phone{transition: color 0.6s ; position: relative;background-image: unset;background-size: 10000px 2px;background-repeat: no-repeat;background-position: 0px 1.2em;background-position: -10000px 1.2em;}
.footer__email:hover, .footer__phone:hover {transition: color 0.6s ; color:#254cac; transition: background-position 2s ease-in-out;background-image: linear-gradient(currentColor 50%, currentColor 50%);	background-position: 0px 1.2em; }
.footer__copyright { color: #333; margin: 0 auto; text-align: center; margin-top: 32px;}
.footer__copyright a { color: #333}
.whatsapp-icon {width: 30px;height: 30px;border-radius: 3px;background: url('/images/site/whatsapp.svg') center no-repeat;background-size: cover;margin-left: 10px;margin-top: -5px}
.usage{padding: 50px 0 70px 0;}
.usage__items {display: flex;justify-content: space-between;margin-top:50px}
.usage__item {display: flex;flex-direction: column;padding: 20px;background: #008dd2;width: calc((100% - 30px) / 4);position: relative}
.usage__item-title {display: flex;align-items: center;color:#fff;margin:auto;align-self: center;text-align: center;}
.usage__item-title em {font-style: normal;font-weight: 900;position: absolute;opacity: .2;left:0;top:0;width: 50px;line-height: 50px;font-size: 40px;text-align: center}
.usage__image{display: flex;width: 100%;margin-top:15px;}
.usage__image img{width: 100%; height: auto; object-fit: cover;}
.production__inner{display: flex;align-items: start}
.production__inner video {width: 50%;flex-shrink: 0}
.production__content {display: flex;flex-direction: column;padding: 50px}
.production__content .title {}
.production__text {display: flex;flex-direction: column;margin-top:40px;line-height: 1.4}
.production__text p + p {margin-top:5px}

.contacts {padding: 100px 0;}
.contacts__inner {display: flex;align-items: center}
.contacts__left{width: 50%;display: flex;flex-direction: column;flex-shrink: 0}
.contact__item  {color:#46414c}
.contact__item + .contact__item {margin-top:35px;}
.contact__item span {font-weight: bold;}
.contact__item div {display: flex;margin-top:5px;}
.contact__item div a {color:#008dd2;text-decoration: underline}
.contact__item div a:hover {text-decoration: none}
.contact__item div p {}
.contacts__form {display: flex;width: 50%;flex-direction: column;background: url('images/site/sifon1.jpg') center  no-repeat;background-size: cover;margin-right: 40px;box-shadow: 0 0 10px rgba(0,0,0,.1);}
.contacts__form form {display: flex;width: 100%;flex-direction: column;background: rgba(255,255,255,.9);padding: 50px}
.contacts__form form .form-title {width: 100%;text-align: center;font-size: 28px;font-weight: 500;color:#008dd2;margin-bottom: 20px}
.form-item {margin-top:20px;display: flex;flex-direction: column}
.form-item label {font-size: 14px;font-weight: 500;margin-bottom: 10px;color:#46414c}
.form-item label em {font-style: normal;color:#df0000;}
.form-input {width: 100%;padding: 10px 12px;border:1px solid #f0f0f0}
.contacts__form button[type="submit"] {color:#fff;font-size: 16px;text-align: center;background: #008dd2;padding: 15px 55px;align-self: center;margin-top:40px;border-radius: 50px}
select.form-input { height: 39px; color: #000; background-color: transparent; border-radius: 0px; border: 1px solid #f0f0f0; appearance: auto;}
.burger-menu__btn { display: none; flex-direction: column;gap: 4px; padding: 10px; margin-left: 40px;}
.burger-menu__btn span{ width: 20px; height: 2px; background-color: #000;}
.burger-menu { visibility: hidden;  transform: translateX(-110%); transition: all 300ms ease; display: flex;}
.bg { position: absolute; inset: 0;
    z-index: 10; background-color: rgba(0,0,0,0.3); opacity: 0; transition: 300ms ease-in; pointer-events: none;}
.bg.active { display: block; transition: 300ms ease-in; opacity: 1;}

.form-captcha {display: flex;align-items: center;float:left;width: 100%; flex-wrap: wrap; justify-content: center; margin-top: 15px;}
.form-captcha .refresh-captcha {margin-right: 10px; transition: 400ms ; object-fit: cover; display: flex; align-items: center}


.form-captcha input {padding: 11px 5px !important;}

.refresh-captcha { }
.form-captcha-body { width: 100%; margin-top: 10px; display: flex; justify-content: center; align-items: center;}
.form-captcha-body input { border: 1px solid #f0f0f0; width: 100%;}
.refresh-animation {
    animation: rotateRefresh 0.7s ease-in-out forwards;
}

.form-item {  }
.input-file {display: inline-flex;  align-items: center;padding: 10px 20px;background-color: transparent;
    color: #fff; border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;  }
.input-file:hover {background-color: #ddd }
.input-file i { margin-right: 10px; font-size: 18px; }
.input-file input[type="file"] {
    display: none;
}
.input-file::after {
    /*content: "Выберите файл";*/
    font-size: 16px;
}

/* Стили для отображения выбранного файла */
.input-file.has-file::after {
    content: attr(data-file-name);
    color: #333;
}

/* Дополнительные стили для состояния "файл выбран" */
.input-file.has-file {
    background-color: #e9ecef;
    color: #333;
    border: 1px solid #ced4da;
}

.form-send__success { display: flex; align-items: center; justify-content: center; padding: 30px;}
.form-send__success i { font-size: 36px; color: #1cd42b; }
.form-send__success-text { margin-left: 30px; font-size: 18px; color: #000; }

@keyframes rotateRefresh {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }
@media (max-width: 1500px) {
    .images__content { width: 50%; padding: 40px 40px 0 40px;}
}

@media (max-width: 1200px) {
    .main { margin-top: 0px;}
    .header__item + .header__item { margin-left: 30px;}
    .header__logo { margin-right: 10px;}
    .header__actions { margin-left: 10px;}
    .header__list { display: none;}
    .burger-menu__btn { display: flex; }
    body { position: relative}
    .burger-menu{ visibility: hidden; position: fixed; top: 0; left: 0; bottom: 0; width: 200px; z-index: 15; }
    .burger-menu.active{ height: auto; display: flex; transform: translateX(0%);  transition: all 300ms ease;  visibility: visible;}
    .burger-menu .header__list { display: flex;  min-width: 220px; flex-direction: column; background-color: #fff; box-shadow: 0 0 5px 1px #666; padding: 10px; align-items: start;}
    .burger-menu .header__list .header__item + .header__item { margin: 0; }
    .header { padding: 0px;}
    .burger-menu .header__list .header__item {border-bottom: 1px solid #ddd;}
    .burger-menu .header__list .header__item { margin: 0; padding: 5px 0; width: 100%; }
    .burger-menu .header__list .header__item .header__link {padding: 0;}
    .why__title { margin-bottom: 60px;}
    .why__item-text strong { font-size: 40px;}

    .production { position: relative;}
    .production__content { padding: 30px;}

    /*.production__title { color: #fff;}*/
    /*.production__text { color: #fff;}*/
    .production__inner { flex-direction: column;}
    .production__inner video { width: 100%; max-height: 400px;/*  height: 100%; position: absolute; top: 0; left: 0px;*/ object-fit: cover; object-position: center center;}

    /*.production__inner::after { content: ""; display: block; padding-bottom: 100%;}*/

    .contacts__form { width: 60%;}
    .contacts__form form {padding: 20px;}
}

@media (max-width: 992px) {
    .header.scrolled .header__inner { padding: 5px 0;}
    .top__video-title { font-size: 52px;}
    .top__video-subtitle { font-size: 36px;}
    .guarantee__subtitle { max-width: 100%;}
    .title { font-size:  36px;}
    .brands__inner { margin-bottom: 70px;}

    .usage__items { flex-wrap: wrap; gap: 15px; }
    .usage__item { width: calc((100% - 30px) / 2);}

    .images__image-1 { max-width: max-content;}
    .images__content { width: 100%;}
    .images__content { padding: 15px 15px 0 15px;; margin-left: 30px;}
    .images__text { font-size: 16px;}
    .certificats__inner { max-width: 100%;}

    .footer__inner { grid-template-columns: 1fr 1fr; gap: 15px;}


}

@media (max-width: 768px) {
    .top__video-title { font-size: 36px; }
    .top__video-subtitle { font-size: 20px;}
    .usage__item { padding: 10px;}
    .usage { padding: 50px 0}
    .top__btn i { font-size: 48px;}
    .images .container { flex-direction: column;}
    .images__content { order: 1; margin-left: 0px; padding: 0px; margin-top: 30px;}
    .images__image-1 { order: 2; display: none;}
    .images { background-color: #008dd2;}
    .title { font-size: 30px;}
    .certificats { margin-bottom: 50px;}
    .brands__inner { margin-bottom: 40px;}
    .usage__items { margin-top: 30px;}
    .why__list { flex-wrap: wrap; gap: 10px; }
    .why__item { width: calc(100% / 2 - 10px);}
    .why__item + .why__item { margin-left: 0px;}
    .why__title { margin-bottom: 30px;}
    .contacts__form button[type="submit"] { padding-block: 8px; margin-top: 30px;}
    .contacts__inner { flex-direction: column;}
    .contacts__form { margin-right: 0px; width: 70%;}
    .contacts__left { margin-top: 20px; width: 100%; }
}

@media (max-width: 660px) {
    .certificats__btns { flex-direction: column; gap: 10px;}
    .certificats__btn {flex-grow: 1; width: 100%; text-align: center;}
    .certificats__btn.btn { padding: 8px 0;}
    .certificats__btn + .certificats__btn { margin-left: 0; }
    .brands__inner { margin-bottom: 30px;}
    .why { padding: 40px 0;}
    .production__text p { font-size: 14px;}
    .production__text p + p { margin-top: 8px;}
    .production__text { margin-top: 30px;}
    .contacts__form {  width: 100%;}
    .contacts { padding: 50px 0;}
    .footer__inner { grid-template-columns: 1fr; }
    .form-captcha img {object-fit: contain;}
}


@media (max-width: 500px) {
    .usage__items { margin-top: 30px;}
    .usage { padding: 40px 0}
    .usage__image { position: relative;}
    .usage__image::after { content: ""; padding-bottom: 80%; display: block;}
    .usage__image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
    .usage__item { width: 100%;}
    .title { font-size: 24px;}
    .certificats__subtitle { font-size: 14px;}
    .guarantee__subtitle { font-size: 14px;}
    .guarantee__title { font-size: 18px;}
    .btn { padding: 8px 35px; font-size: 14px;}
    .why__item { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .why__item-description { text-align: center; margin-top: 0px; }
    .why__item-text { padding-bottom: 0px; margin-bottom: 15px;}
    .contacts { padding: 30px 0;}

    .form-send__success-text { font-size: 16px;}

}
@media (max-width: 360px) {
    .guarantee { padding: 30px 0;}
    .images .container { width: 100%;}
    .images__text { font-size: 14px;}
    .top__video-title { font-size: 30px;}
    .top__video-subtitle { font-size: 16px;}
    .brands__subtitle { font-size: 14px;}
    .usage { padding: 30px 0}

}