@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Thin.ttf');
    font-weight: 100;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-UltraLight.ttf');
    font-weight: 200;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Semibold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Extrabold.ttf');
    font-weight: 800;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Black.ttf');
    font-weight: 900;
}

:root {
    --textColorDefault: #202020;
    --textColorBlack: #000000;
    --textColorLight: #a0a0a0;
    --backColor: #ffffff;
    --backColor2: #EFF1F2;
    --backColor3: #f8f8fa;
    --accentColorDarkest: #000E74;
    --accentColor: #005EC4;
    --accentColorLight: #1E7CE2;
    --lineLightColor: #dedede;

    --border-radius: 15px;
    --border-radius-half: 7px;
    --border-radius-micro: 4px;
    --sectionPadding: 80px;

    /* --accentColorLight: #fcc600;
    --accentColor2: #dd6b00;
    --footerColorDark: #65656a;
      --backDarkColor: #a2a2a2;*/
    --headerHeight: 90px;
    font-family: "Gilroy", sans-serif;
    font-weight: normal;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
    :root {
        --headerHeight: 70px;
    }
}

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

body,
html {
    height: 100%;
}

body {
    background-color: var(--backColor);
    font-family: "Gilroy", sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1.3;
    position: relative;
    visibility: visible;
    overflow-x: hidden;
    color: var(--textColorDefault);
    /*padding-right: 0 !important;*/
}

.container {
    max-width: 1440px;
}

.section {
    padding: var(--sectionPadding) 0;
}

.content {
    column-gap: 30px;
    row-gap: 30px;
}

b,
p b {
}

a {
    text-decoration: none;
    color: var(--accentColorDarker);
}

a:hover {
    color: var(--accentColorDark);
}

body,
html {
    font-size: 16px;
}

@media (max-width: 767px) {
    body,
    html {
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    body,
    html {
        font-size: 14px;
    }
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: inherit;
}

h1 {
    font-size: 3.75rem;
    line-height: 1;
    color: var(--accentColor);
}

.h1-below {
    font-size: 2.25rem;
    line-height: 1;
}

@media (max-width: 767px) {
    h1 {
        font-size: 2rem;
        font-weight: 700;
    }

    .h1-below {
        font-size: 1.3rem;
        font-weight: 500;
    }

    .hero-box .d-flex:has(> .novinka) {
        flex-direction: column;
    }
}

.hero-title-small {
    font-size: 3.5rem;
}

h2 {
    font-weight: 500;
    font-size: 2.5rem;
    color: var(--textColorBlack);
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    h2 {
        font-size: 2rem;
    }
}

h3 {
    font-weight: normal;
    font-size: 1.625rem;
    color: var(--textColorBlack);
}

.assortment-item h3 {
    font-weight: normal;
    font-size: 1.25rem;
    color: var(--textColorBlack);
}

h4 {
    font-weight: normal;
    font-size: 1.25rem;
    color: var(--textColorBlack);
}

@media (max-width: 767px) {
    h4 {
        font-size: 1.125rem;
    }
}

.title-black {
    color: var(--textColorDefault);
}

p {
    /*margin-bottom: 0;*/
}

.button {
    padding: 15px 30px;
    border: none;
    background: linear-gradient(
            90deg,
            var(--accentColor) 0%,
            var(--accentColor) 100%
    );
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: 3px 3px 4px rgba(77, 32, 21, 0.2);
    color: #fff;
    border-radius: var(--border-radius-micro);
    margin-top: 70px;
    transition: all 0.2s ease-in-out, border-radius 0.5s ease;
}

.section-options {
    background-color: var(--backColor);
}

.section-control {
    background-color: var(--backColor2);
}

.control-cards-item {
    display: flex;
    gap: 30px;
    flex-grow: 1;
    background-color: var(--backColor);
    border-radius: var(--border-radius-half);
    min-height: 361px;
}

.img {
    width: auto;
    max-height: 340px;
}

.control-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 30px 30px 0;
}

.control-point {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 1200px) {
    .control-cards-item {
        display: flex;
        flex-direction: column;
    }

    .control-content {
        padding: 30px;
    }

    .img {
        max-height: 300px;
    }
}

.about-product {
    background-color: var(--backColor2);
}

.images {
    width: 100%;
    border-radius: var(--border-radius-half);
}

.illustration {
    width: 100%;
    border-radius: var(--border-radius);
    object-fit: cover;
}

.illustration-2 {
    height: 100%;
    object-fit: contain;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.benefit-cards-item {
    display: flex;
    align-items: flex-end;
    height: 430px;
    border-radius: var(--border-radius-half);
    border: 1px solid var(--accentColor);
    overflow: hidden;
}

.card-content {
    display: flex;
    flex-direction: column;
    background-color: var(--backColor3);
    text-align: center;
    padding: 15px 10px;
    gap: 10px;
}

.card-title {
    color: var(--accentColor);
}

.item1 {
    background: url(../images/electrobenefits1.jpg) no-repeat center / cover;
}

.item2 {
    background: url(../images/electrobenefits2.jpg) no-repeat center / cover;
}

.item3 {
    background: url(../images/electrobenefits3.jpg) no-repeat center / cover;
}

.item4 {
    background: url(../images/electrobenefits4.jpg) no-repeat center / cover;
}

.section-benefit {
    background-color: var(--backColor3);
}

.benefit-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
}

.icon_benefit {
    width: 72px;
    height: 72px;
}

.form-wrap {
    display: flex;
    justify-content: center;
}

.form-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--backColor);
    padding: 30px;
}

.form-field {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 2px solid var(--accentColor2);
    border-radius: var(--border-radius-micro);
    padding: 15px 10px;
    max-width: 400px;
}

.form-field img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0;
}

.form-field input {
    border: none;
    outline: none;
    font-size: 1rem;
    color: red;
    width: 100%;
    background-color: transparent;
    font-weight: 600;
}

.form-button {
    margin-top: 0;
    width: 60%;
}

.profit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    padding: 25px 7px;
    background-color: var(--backColor3);
    border-radius: var(--border-radius-micro);
}

.icon_profit {
    height: 100px;
}

/*

.header-container h3 {
  font-weight: bold;
  color: var(--accentColor);
}

.logo,
.sticky-header .logo,
.sticky-header.sticky .logo {
  height: 45px;
}

@media (max-width: 767px) {
  .sticky-header .logo,
  .sticky-header.sticky .logo {
    max-width: 130px;
  }
}

.logo-block {
  display: flex;
  align-items: center;
}

.header-area {
  height: var(--headerHeight);
}

.row {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
}

.header-area div {
  height: 100%;
}

*/

/*.header-container {
    height: var(--headerHeight);
}*/

.hero-box {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

@media (max-width: 767px) {
    .hero-box {
        row-gap: 120px;
    }
}

.hero-promo {
    display: flex;
    align-items: center;
    column-gap: 30px;
    row-gap: 10px;
    padding: 5px 15px;
    background-color: var(--backColor3);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px #00000016;
    width: fit-content;
}

.hero-promo img {
    height: 80px;
    object-fit: contain;
    object-position: left;
}

.hero-promo p span {
    color: var(--accentColorDarkest);
    font-size: 1.25rem;
}

.hero-promo p strong {
    font-size: 1.5em;
    font-weight: bold;
}

.hero-promo h4 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accentColor);
}

@media (max-width: 767px) {
    .section-hero .hero-promo {
        display: none;
    }
}

@media (min-width: 768px) {
    .section-hero-mobile {
        display: none;
    }
}

.section-hero-mobile {
    padding-top: 0;
    padding-bottom: 30px;
    margin-top: -10px;
}

.section-hero-mobile .hero-promo {
    box-shadow: 0 4px 16px #00000030;
}

.hero-promo > * {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero-promo-right {
    text-align: end;
}

.hero-promo > *:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.hero-promo p {
    margin-bottom: 0;
}

.section-hero {
    background-image: url('../images/hero-back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: var(--sectionPadding);
    padding-top: 20px;
}

@media (max-width: 767px) {
    .section-hero {
        height: 500px;
        padding-bottom: 20px;
        padding-top: 20px;
    }
}

.section-hero .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-advantages {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.hero-advantages div {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

@media (max-width: 767px) {
    .section-hero .hero-advantages {
        /*max-width: 50%;*/
        display: none;
    }

    .hero-advantages div {
        align-items: start;
    }
}

@media (min-width: 768px) {
    .section-hero .placeholder-block {
        /*display: none;*/
    }
}

.hero-advantages p {
    margin-bottom: 0;
}

button.button-stroke,
a.button-stroke,
.button-stroke,
button.button-light,
button.button-accent,
a.button-light,
a.button-accent,
.offcanvas-menu-nav a.button-accent,
.button-light,
.button-accent {
    width: fit-content;
    display: flex;
    font-size: 1rem;
    padding: 20px 40px;
    border-radius: 100px;
    background-color: var(--accentColor);
    color: white;
    text-decoration: none;
    text-transform: none;
    line-height: 1;
    box-shadow: 0 4px 16px #00000016;
    transition: box-shadow 0.3s ease;
    border: 0;
    font-weight: 500;
    align-items: center;
    column-gap: 10px;
}

button.button-stroke:has(> img.left),
a.button-stroke:has(> img.left),
.button-stroke:has(> img.left),
button.button-light:has(> img.left),
button.button-accent:has(> img.left),
a.button-light:has(> img.left),
a.button-accent:has(> img.left),
.offcanvas-menu-nav a.button-accent:has(> img.left),
.button-light:has(> img.left),
.button-accent:has(> img.left) {
    padding: 14px 38px 14px 18px;
}


button.button-stroke:has(> img.right),
a.button-stroke:has(> img.right),
.button-stroke:has(> img.right),
button.button-light:has(> img.right),
button.button-accent:has(> img.right),
a.button-light:has(> img.right),
a.button-accent:has(> img.right),
.offcanvas-menu-nav a.button-accent:has(> img.right),
.button-light:has(> img.right),
.button-accent:has(> img.right) {
    padding: 14px 18px 14px 38px;
}

button.button-stroke,
a.button-stroke,
.button-stroke {
    padding: 14px 38px;
    background-color: transparent;
    color: white;
    box-shadow: none;
    border: 2px solid white;
}

button.button-stroke:has(> img.left),
a.button-stroke:has(> img.left),
.button-stroke:has(> img.left) {
    padding: 14px 38px 14px 18px;
}

button.button-stroke:has(> img.right),
a.button-stroke:has(> img.right),
.button-stroke:has(> img.right) {
    padding: 14px 18px 14px 38px;
}


@media (max-width: 767px) {
    button.button-stroke,
    a.button-stroke,
    .button-stroke,
    button.button-light,
    button.button-accent,
    a.button-light,
    a.button-accent,
    .button-light,
    .offcanvas-menu-nav a.button-accent,
    .button-accent {
        padding: 15px 25px;
    }

    button.button-stroke,
    a.button-stroke,
    .button-stroke {
        padding: 13px 23px;
    }

    button.button-stroke:has(> img.left),
    a.button-stroke:has(> img.left),
    .button-stroke:has(> img.left),
    button.button-light:has(> img.left),
    button.button-accent:has(> img.left),
    a.button-light:has(> img.left),
    a.button-accent:has(> img.left),
    .button-light:has(> img.left),
    .offcanvas-menu-nav a.button-accent:has(> img.left),
    .button-accent:has(> img.left) {
        padding: 15px 25px 15px 15px;
    }

    button.button-stroke:has(> img.right),
    a.button-stroke:has(> img.right),
    .button-stroke:has(> img.right),
    button.button-light:has(> img.right),
    button.button-accent:has(> img.right),
    a.button-light:has(> img.right),
    a.button-accent:has(> img.right),
    .button-light:has(> img.right),
    .offcanvas-menu-nav a.button-accent:has(> img.right),
    .button-accent:has(> img.right) {
        padding: 15px 15px 15px 25px;
    }

    button.button-stroke:has(> img.left),
    a.button-stroke:has(> img.left),
    .button-stroke:has(> img.left) {
        padding: 13px 23px 13px 13px;
    }

    button.button-stroke:has(> img.right),
    a.button-stroke:has(> img.right),
    .button-stroke:has(> img.right) {
        padding: 13px 13px 13px 23px;
    }
}

button.button-light,
a.button-light,
.button-light {
    background-color: white;
    color: var(--accentColorDarkest);
}

button.button-light:hover,
a.button-light:hover,
.button-light:hover,
.button-light:hover,
a.button-light:hover,
button.button-light:hover,
.button-accent:hover,
a.button-accent:hover,
button.button-accent:hover {
    background-color: var(--accentColorLight);
    color: white !important;
    box-shadow: 0 8px 32px #00000024;
}

.buttons-row {
    display: flex;
    column-gap: 20px;
    row-gap: 10px;
    flex-wrap: wrap;
}

.logo-block a {
    display: flex;
}

.logo-block {
    height: var(--headerHeight);
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;
}

.logo-block p {
    margin-bottom: 0;
    margin-left: 10px;
    font-size: 0.85rem;
    color: var(--textColorLight);
}

img.logo {
    height: 60px;
}

@media (max-width: 767px) {
    img.logo {
        height: 40px;
    }
}

.header-mobile {
    padding: 0 15px;
}

.header-navigation {
    display: flex;
    align-items: center;
    column-gap: 30px;
}

.assortment-item h4 {
    position: relative;
    padding-right: 20px;
}

.assortment-item h4::after {
    content: url("./../images/icon-arrow-right.svg");
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}

.assortment-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.assortment-item .image-block {
    margin-bottom: 10px;
    border: 1px solid var(--lineLightColor);
    border-radius: var(--border-radius);
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
}

.assortment-item:hover .image-block {
    border: 1px solid var(--accentColor);
}

.assortment-item .image-block img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.assortment-item .image-block img:nth-child(1) {
    opacity: 1;
}

.assortment-item .image-block img:nth-child(2) {
    opacity: 0;
}

.assortment-item:hover .image-block img:nth-child(1) {
    opacity: 0;
}

.assortment-item:hover .image-block img:nth-child(2) {
    opacity: 1;
}

.mb-6 {
    margin-bottom: 40px;
}

.mt-6 {
    margin-top: 40px;
}

.assortment-item.no-standard {
    background-color: var(--accentColor);
    border-radius: var(--border-radius);
    padding: 20px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
}

.assortment-item.no-standard h3 {
    font-size: 1.625rem;
    color: white;
}

.assortment-item.no-standard img {
    height: 60px;
    width: 60px;
}

@media (max-width: 767px) {
    .assortment-item.no-standard {
        padding: 10px;
    }

    .assortment-item.no-standard h3 {
        font-size: 1.125rem;
    }

    .assortment-item.no-standard img {
        height: 32px;
        width: 32px;
    }

    .assortment-item.no-standard button.button-light {
        padding: 10px 15px;
    }
}

.karniz-type-selector-desktop {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
}

.karniz-type-selector-desktop > * {
    flex: 1;
    color: white;
    font-size: 1rem;
    padding: 15px 10px;
    text-align: center;
    border-radius: var(--border-radius-micro);
    min-height: calc(2 * 1rem * 1.3 + 30px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

@media (max-width: 767px) {
    .karniz-type-selector-desktop > * {
        width: calc(50% - 10px);
        min-width: calc(50% - 10px);
        border: 1px solid #ffffff40;
    }
}

.karniz-type-selector-desktop > *:hover {
    flex: 1;
    background-color: #ffffff20;
}

.karniz-type-selector-desktop > *.active {
    background-color: #ffffff;
    color: var(--accentColor);
}

.karniz-type-selector-desktop.control-selector > * {
    color: var(--textColorDefault);
    border-bottom: 1px solid var(--backColor2);
}

@media (max-width: 767px) {
    .karniz-type-selector-desktop.control-selector {
        gap: 10px;
    }

    .karniz-type-selector-desktop.control-selector > * {
        border: 1px solid var(--backColor2);
    }
}

.karniz-type-selector-desktop.control-selector > *:hover {
    background-color: var(--backColor2);
}

.karniz-type-selector-desktop.control-selector > *.active {
    color: white;
    background-color: var(--accentColor);
    border-bottom: 1px solid var(--accentColor);
}

.section-blue {
    background-color: var(--accentColor);
    color: white;
}

.section-light {
    background-color: var(--backColor2);
}

.section-blue h2,
.section-blue h3,
.section-blue h4,
.section-blue h5,
.section-blue h6,
.section-blue p,
.section-blue a {
    color: white;
}

.slider-carousel .sliderInner img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.form-section {
    margin-bottom: 20px;
}

.form-section label {
    /*display: block;*/
}

.options-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.options-grid.inverse {
    flex-direction: row;
    gap: 20px
}

.options-grid.tiles {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px
}

.option-box {
    background: #e9ecef;
    padding: 10px 15px;
    border-radius: var(--border-radius-half);
    cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 8px;
}

/* custom radio start */

.custom-radio {
    display: inline-flex !important;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
}

.custom-radio input[type="radio"] {
    display: none;
}

.radio-mark {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff80;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    display: flex;
}

.custom-radio input[type="radio"]:checked + .radio-mark {
    border: 2px solid #ffffff;
}

.custom-radio input[type="radio"]:checked + .radio-mark::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.custom-radio.dark .radio-mark {
    border: 2px solid #005EC480;
}

.custom-radio.dark input[type="radio"]:checked + .radio-mark {
    border: 2px solid var(--accentColor);
}

.custom-radio.dark input[type="radio"]:checked + .radio-mark::after {
    background: var(--accentColor);
}

/* custom radio end */

/* custom checkbox start */

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    /*font-size: 16px;*/
    /*margin: 10px 0;*/
}

.tiles .custom-checkbox,
.inverse .custom-checkbox {
    flex-direction: column;
    align-items: start;
}

.tiles .custom-checkbox {
    flex: 1;
    min-width: 40%;
    align-items: center;
    border: 1px solid #f0f0f0;
    border-radius: var(--border-radius-half);
    padding-bottom: 10px;
}

.custom-checkbox img {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius-micro);
}

.custom-checkbox input[type="checkbox"] {
    display: none; /* Скрываем стандартный чекбокс */
}

.checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff80;
    position: relative;
    margin-right: 10px;
    transition: all 0.2s ease;
}

.tiles .checkbox-box {
    border: 2px solid #005EC480;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-box {
    border: 2px solid #ffffff;
}

.tiles .custom-checkbox input[type="checkbox"]:checked + .checkbox-box {
    border: 2px solid var(--accentColor);
}

/* Галочка — псевдоэлемент */

.custom-checkbox input[type="checkbox"]:checked + .checkbox-box::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Галочка — псевдоэлемент */

.tiles .custom-checkbox input[type="checkbox"]:checked + .checkbox-box::after {
    border-color: var(--accentColor);
}

/* custom checkbox end */

/* custom range slider start*/

.slider-container {
    margin-top: 15px;
    width: 100%;
    display: flex;
}

.slider-container input {
    width: 100%;
}

.slider-value {
    font-weight: normal;
    /*margin-left: 10px;*/
    flex-shrink: 0;
}

.range-slider-wrapper {
    position: relative;
    width: 100%;
    /*max-width: 500px;*/
    margin-top: 40px;
    /*margin: 40px auto;*/
    /*display: flex;*/
    /*flex-direction: column;*/
}

.range-slider-wrapper > .ranges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

input[type="range"] {
    width: 100%;
    appearance: none;
    height: 2px;
    background: white;
    outline: none;
    margin: 0;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-value {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: black;
    padding: 4px 10px;
    border-radius: var(--border-radius-micro);
    font-weight: normal;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}

/* custom range slider end*/

.section-indi-color h3 {
    margin-bottom: 20px;
}

.section-indi-color h4 {
    margin-bottom: 40px;
}

.control-desc-block {
    display: flex;
    flex-direction: column;
    width: 180px;
    cursor: pointer;

    background: none !important;
    outline: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.control-desc-block img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.3875;
    border: 1px solid var(--lineLightColor);
    border-radius: var(--border-radius-half);
    object-fit: cover;
}

.control-desc-block > button,
.control-desc-block > div {
    position: relative;
}

.control-desc-block img:nth-child(1) {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.control-desc-block img:nth-child(2) {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

.control-desc-block:hover img:nth-child(1) {
    opacity: 0;
    border: 1px solid var(--accentColor);
}

.control-desc-block:hover img:nth-child(2) {
    opacity: 1;
    border: 1px solid var(--accentColor);
}

.control-desc-block h4 {
    width: 100%;
    margin-top: 10px;
}

.control-desc-blocks {
    display: flex;
    justify-content: center;
    width: 100%;
    column-gap: var(--bs-gutter-x);
}

@media (max-width: 991px) {
    *:has(> .control-desc-blocks) {
        display: flex;
        overflow-x: auto;
    }

    .control-desc-blocks {
        width: fit-content;
        padding-bottom: 15px;
    }

    .control-desc-blocks > * {
        min-width: 200px;
    }
}

.gif-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.section-measurement,
.section-about-company,
.section-advantages {
    padding: 0 !important;
}

.section-measurement .container,
.section-advantages .container {
    padding-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
    background-color: var(--backColor2);
    border-radius: var(--border-radius);
}

.section-measurement .container {
    padding-bottom: 0;
}

.section-measurement {
    margin-bottom: var(--sectionPadding);
}

.section-about-company .container {
    padding-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
    background-color: var(--accentColor);
    border-radius: var(--border-radius);
}

.section-advantages h3 {
    font-weight: bold;
    margin-bottom: 30px;
}

.section-advantages h6 {
    font-weight: 900;
    color: var(--accentColorDarkest);
    opacity: 0.075;
    font-size: 15.625rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.advantages-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    height: 100%;
}

.advantages-text-block > div {
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .advantages-text-block {
        flex-direction: row;
        justify-content: start;
        padding-top: 15px;
        align-items: center;
        column-gap: 10px;
    }

    .section-advantages h3 {
        margin-bottom: 10px;
    }

    .section-advantages h6 {
        font-size: 10rem;
        position: static;
        transform: none;
        line-height: 1;
    }
}

.row:has(.advantages-text-block) {
    margin-top: 30px;
}

.row:has(.advantages-text-block):nth-of-type(odd) {
    flex-direction: row-reverse;
}

.row:has(.advantages-text-block):nth-of-type(odd) h6 {
    right: unset;
    left: 0
}

.videos iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-half);
    background-color: #f8f8f8;
}

.achievements-blocks {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.achievements-blocks > * {
    height: 120px;
    width: calc((100% - 15px * 3) / 4);
}

.achievements-block {
    border: 1px solid white;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px 15px 10px 20px;
    color: white !important;
}

.achievements-block > * {
    margin: 0 !important;
}

.achievements-block h3 {
    font-size: 2rem;
    font-weight: 500;
}

.achievements-blocks img {
    object-fit: contain;
}

.section-about-company h2,
.section-about-company h3,
.section-about-company p,
.section-about-company {
    color: white;
}

.section-about-company .sliderInner img {
    background-color: white !important;
    object-fit: contain !important;
    padding: 10px;
}

.section-partners h3 strong {
    color: var(--accentColor);
}

.partners-block {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%;
}

.partners-block > img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    /*border-radius: var(--border-radius);*/
    border-radius: 30px;
}

.partners-block > div {
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.partners-block > div > img {
    width: 40px;
    height: 40px;
}

.section-partners .button-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--border-radius);
    background-color: var(--backColor2);
    padding: 40px;
    column-gap: 20px;
    row-gap: 15px;
}

.section-partners .button-block h4 {
    max-width: 30%;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .section-partners .button-block {
        padding: 30px 15px;
    }

    .section-partners .button-block h4 {
        width: 100%;
        min-width: 100%;
        margin-bottom: 0;
    }
}

.section-details .slider-carousel img {
    height: 550px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .section-details .slider-carousel img {
        height: 300px;
        object-fit: cover;
    }
}

.section-price-list form {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.section-price-list form > * {
    margin-bottom: 20px;
}

.section-price-list form > div.d-flex {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

form input[type="text"],
form input[type="tel"],
form input[type="email"] {
    display: flex;
    font-size: 1rem;
    padding: 17px 30px;
    border-radius: 100px;
    border: 1px solid var(--accentColor);
    color: var(--textColorDefault);
    line-height: 1;
    min-width: 270px;
    width: fit-content;
}

form select,
select.custom-select {
    appearance: none; /* Убираем стандартную стрелку */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="blue" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;

    display: flex;
    font-size: 1rem;
    padding: 17px 30px;
    /*border-radius: 28px 28px 4px 4px;*/
    border-radius: 8px;
    border: 1px solid var(--accentColor);
    color: var(--textColorDefault);
    line-height: 1;
    min-width: 270px;
    width: fit-content;
}

#section-price-list form input {
    display: none;
}

#section-price-list form input.active {
    display: flex;
}

.footer-logo img {
    height: 48px;
    width: auto;
    margin-bottom: 30px;
}

.requisites {
    color: var(--textColorLight);
}

footer ul {
    padding-left: 0;
}

footer ul li {
    list-style: none;
    margin-top: 5px;
}

footer ul li a {
    color: var(--accentColorDarkest);
}

footer ul li a:hover {
    color: var(--accentColor);
}

footer .row {
    row-gap: 30px;
}

footer .row .col-12 {
    display: flex;
    flex-direction: column;
}

footer a:has(> img) {
    color: var(--textColorBlack);
    margin-bottom: 10px;
}

footer a:has(> img):hover {
    color: var(--accentColor);
}

footer {
    background-color: var(--backColor2);
    padding-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
    /*padding-bottom: 0;*/
}

.row.desc {
    display: none;
}

@media (max-width: 767px) {
    .row.desc {
        row-gap: 80px;
    }

    .section-indi-color .illustration {
        /*height: 300px;*/
        height: 150px;
    }

    .section-indi-color .row {
        row-gap: 20px;
    }
}

.row.desc.active {
    display: flex;
}

.hidden {
    display: none;
}

.hidden.active {
    display: flex;
}

.calc-buttons-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 15px;
    row-gap: 10px;
}

.calc-buttons-row > * {
    margin-bottom: 0;
}

.request-calculation-form .client-data-form {
    width: 100%;
}

.request-calculation-form .client-data-form > * {
    width: 100%;
}

.header-contacts-col {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

.header-contacts-col a {
    font-size: 1rem;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.header-navigation a {
    color: var(--textColorBlack);
}

.header-contacts-col a:hover {
    color: var(--accentColor);
}

/*header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 100;
    box-shadow: 0 4px 16px #00000010;
}*/

/*.wrapper {
    padding-top: 90px;
}*/

header {
    position: fixed;
    top: -90px; /* скрыт за пределами экрана */
    width: 100%;
    background-color: white;
    transition: top 0.3s ease;
    box-shadow: 0 4px 16px #00000010;
    z-index: 999;
}

.header-visible {
    top: 0;
}

.hero-location-icon {
    width: 28px;
    height: 28px;
    padding: 2px;
    background-color: var(--accentColor);
    border-radius: 30px;
    margin-right: 10px;
}

.hero-top-buttons-row {
    display: flex;
    column-gap: 30px;
    justify-content: end;
}

@media (max-width: 767px) {
    .hero-top-buttons-row {
        display: none;
    }

    .hero-location-icon {
        width: 24px;
        height: 24px;
    }
}

.hero-top-buttons-row .flex-column {
    row-gap: 8px;
}

.hero-top-buttons-row a.button-light {
    color: var(--accentColorDarkest);
}

.hero-top-buttons-row a {
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.hero-top-buttons-row a:hover {
    color: var(--backColor2);
}

.novinka {
    background-color: white;
    box-shadow: 0 2px 8px #00000010;
    display: flex;
    column-gap: 10px;
    padding: 0 0 0 15px;
    height: 36px;
    align-items: center;
    border-radius: 50px;
    margin-left: 20px;
    cursor: pointer;
    color: var(--textColorDefault);
    width: fit-content;
}

.info-cloud img,
.novinka img {
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.info-cloud {
    position: absolute;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.info-cloud p {
    margin-bottom: 0;
    font-weight: 500;
    color: var(--textColorDefault);
}

.info-cloud-1 {
    top: 100px;
    left: 50%;
    transform: translateX(-110%);
}

.info-cloud-2 {
    top: 250px;
    left: 50%;
    transform: translateX(-110%);
}

@media (max-width: 767px) {
    .info-cloud-2,
    .info-cloud-1 {
        display: none;
    }
}

.info-popup,
#info-popup {
    position: absolute;
    background: white;
    padding: 10px 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius);
    margin-top: 8px;
    pointer-events: all;
    max-width: 290px;
    cursor: pointer;
}

.hidden {
    display: none;
}

.hidden.visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.info-3 {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.client-data-form,
form {
    display: flex;
    flex-direction: column;
}

.client-data-form > *,
form > * {
    margin-bottom: 15px;
}

.client-data-form label,
form label {
    margin-bottom: 5px;
}

p.text-small {
    font-size: 0.85em;
}

p a {
    color: var(--accentColor);
}

.profit-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profit-block svg {
    margin-bottom: 20px;
    width: 48px;
    height: 24px;
}

.profit-block p {
    margin-bottom: 0;
    line-height: 1;
    font-size: 1.25rem;
    color: var(--accentColor);
}

.profit-block h3 {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--accentColor);
}

.section-partnership ul li {
    font-size: 1.25rem;
}

.color-back-block {
    background-color: var(--backColor2);
    padding: 30px;
    border-radius: var(--border-radius);
}

@media (max-width: 767px) {
    .color-back-block {
        padding: 20px 15px;
    }
}

.partners-types-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 20px;
}

.partners-types-grid > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-bottom: 20px;
    text-align: center;
    align-items: center;
}

@media (max-width: 1280px) {
    .partners-types-grid > div {
        min-width: calc((100% - 3 * 20px) / 4);
    }
}

@media (max-width: 767px) {
    .partners-types-grid > div {
        min-width: calc((100% - 20px) / 2);
    }
}


.partners-types-grid > div > img {
    width: 128px;
    height: 128px;
}

@media (max-width: 767px) {
    .partners-types-grid > div > img {
        width: 72px;
        height: 72px;
    }
}

.partners-types-grid h5 {
    font-size: 0.85rem;
}

.lang-selector {
    display: flex;
    align-items: center;
    flex-direction: column;
    column-gap: 0;
    row-gap: 0;
    border-radius: var(--border-radius-half);
    border: 1px solid #f0f0f0;
}

div:has(> .header-location-block) .lang-selector,
.offcanvas-header .lang-selector {
    flex-direction: row;
    column-gap: 5px;
}

.lang-selector a {
    padding: 4px 8px;
    color: var(--textColorLight);
}

.lang-selector a.active {
    color: var(--textColorBlack);
    font-weight: bold;
}

.section-hero .lang-selector {
    border: 1px solid #ffffff80;
}

.section-hero .lang-selector a {
    color: #ffffff80;
}

.section-hero .lang-selector a.active {
    color: white;
}

.modal-body h4 {
    font-weight: bold;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 30px;
}

@media (max-width: 767px) {
    .modal-body {
        padding: 20px 15px;
    }

    .section-partnership .row {
        row-gap: 20px;
    }
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select:focus {
    border-color: var(--accentColor);
    outline: none;
}

ol, ul {
    padding-left: 20px;
}

.wrapper {
    overflow-x: hidden;
}

.btn-menu-close,
.header-menu-btn {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    align-items: center;
    justify-content: center
}

.btn-menu-close img,
.header-menu-btn img {
    width: 24px;
    height: 24px;
}

.header-location-block {
    display: flex;
    align-items: center;
    max-width: 50%;
}

@media (max-width: 767px) {
    .header-location-block p {
        font-size: 0.85rem;
    }
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offcanvas-menu-nav ul {
    padding-left: 0;
}

.offcanvas-menu-nav ul li {
    list-style: none;
    display: flex;
}

.offcanvas-menu-nav a {
    font-size: 1.25rem;
    padding: 4px 0;
}

.offcanvas-menu-nav .header-phones {
    margin-top: 30px;
    margin-bottom: 15px;
}

.offcanvas-menu-nav .header-phones a {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    column-gap: 15px;
    color: var(--textColorDefault);
}

.offcanvas-menu-nav .header-phones a img {
    height: 28px;
    width: 28px;
}

.offcanvas-menu-nav .header-phones a:hover {
    color: var(--accentColor);
}

.floating-button {
    display: flex;
    width: fit-content;
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: transform 0.3s ease;
}

.floating-button:hover {
    transform: scale(1.1);
}

.cooperation-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.strikethrough {
    text-decoration: line-through;
}

footer a {
    font-size: 1.125rem;
    display: flex;
    column-gap: 10px;
    align-items: center;
}

footer .contacts a img {
    width: 24px;
    height: 24px;
}

.footer-bottom {
    padding: 30px 0;
    background-color: var(--accentColorDarkest);
}

.footer-bottom .col-12 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 10px;
}

.footer-bottom .col-12 > * {
    width: fit-content;
}

.footer-bottom p,
.footer-bottom a {
    color: white;
    margin-bottom: 0;
}

.footer-bottom a:hover {
    color: var(--accentColorLight);
}

.section-page-title {
    background: linear-gradient(90deg, #000E74c0, #000E74c0), url('./../images/6223746659.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.section-page-title h1 {
    color: white;
    font-size: 3rem;
}

.main-content tbody,
.main-content td,
.main-content th,
.main-content tr {
    border: 1px solid #c0c0c0;
}

.main-content td {
    padding: 8px;
    vertical-align: baseline;
}

@media (min-width: 767px) {
    div:has(> .header-location-block) .lang-selector {
        display: none;
    }
}

@media (max-width: 1100px) {
    .hero-top-buttons-row .button-light {
        display: none;
    }
}