/*
--------------------
Connecting fonts
--------------------
*/
@font-face {
    font-family: "inter";
    src: local("Inter"),
        url(../fonts/inter.woff2) format('woff2'),
        url(../fonts/inter.woff) format('woff');
}

@font-face {
    font-family: "inter";
    src: local("Inter"),
        url(../fonts/inter-medium.woff2) format('woff2'),
        url(../fonts/inter-medium.woff) format('woff');
    font-weight: 500;
}

@font-face {
    font-family: "inter";
    src: local("Inter"),
        url(../fonts/inter-semibold.woff2) format('woff2'),
        url(../fonts/inter-semibold.woff) format('woff');
    font-weight: 600;
}

@font-face {
    font-family: "inter";
    src: local("Inter"),
        url(../fonts/inter-bold.woff2) format('woff2'),
        url(../fonts/inter-bold.woff) format('woff');
    font-weight: 700;
}

@font-face {
    font-family: "bebausneue";
    src: local("Bebaus Neue"),
        url(../fonts/bebausneue.woff2) format('woff2'),
        url(../fonts/bebausneue.woff) format('woff');
}


/*
--------------------
Color styles
--------------------
*/
:root {
    --blue: #072267;
    /* --blue2: #D4E1F5; */
    --blue2:  rgba(239, 239, 239, 1);
    --blue3: #0458AF;
    /* --lightblue: rgba(38, 103, 207, 0.1); */
    --lightblue: rgba(239, 239, 239, 1);
    --lightgrey: #dedede;
    --grey: #A9A8B0;
    --grey2: #F5F5F6;
    --grey3: #EDEEF2;
    --grey4: #ECECEC;
    --grey5: #E9F0FA;
    --grey7: #e6e6e6;
    --dark: #252525;
    --white: #ffffff;
    --black: #212121;
}

/*
--------------------
Base styles
--------------------
*/
body {
    font-family: "inter", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    color: var(--black);
    margin: 0;
    display: flex;
    flex-direction: column;
    letter-spacing: -0.04em;
}

body, html {height: 100%;}
body.lock, body.modal-open-noscroll {overflow: hidden;}

body.lock:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.59);
    display: block;
    z-index: 999;
}

input:not([type=checkbox]):not([type=radio]),
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input, textarea, a:focus, input:focus, button:active, button:focus, select:focus {outline:none !important; box-shadow: none !important;}
button::-moz-focus-inner {border: 0 !important;}

/* Убираем стрелки у number-input */
/* Хром, Сафари, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

/* Firefox 100+ */
input[type=number] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* псевдоэлементы Firefox */
input[type=number]::-moz-number-spin-box,
input[type=number]::-moz-number-spin-up,
input[type=number]::-moz-number-spin-down {
  display: none !important;
}


p {
    margin: 0 0 15px;
    line-height: 1.3;
}

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

h1, h2, h3 {
    font-family: "bebausneue";
    font-size: 82px;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0;
    letter-spacing: 0;
}

h1 {margin-bottom: 40px;}
h2 {font-size: 64px;}
h3 {font-size: 40px;}

h2.title {margin-bottom: 10px;}

h5 {
    font-size: 24px;
    font-weight: 600;
}

section {padding: 40px 0;}
/* section.lightblue {margin: 60px 0;} */
section.lightblue {margin: 0px 0;}

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

.unstyled {
    padding: 0;
    margin: 0;
    list-style: none;
}

.btn-primary {background: var(--blue);}
.btn-primary {border-color: var(--blue);}
.bg-primary-subtitle {background: rgba(38, 103, 207, 0.1);}
.bg-primary-subtitle:hover {background: var(--grey2);}


.btn {
    padding: 17px 30px;
    font-size: 20px;
    border-radius: 15px;
    font-weight: 600;
}

.btn:hover {
    background-color: #225cb2;
    color: var(--white);
}

.btn-lg {
    border-radius: 20px;
    font-size: 20px;
    font-weight: 600;
    padding: 24px 30px;
}

.btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: auto;
}

.btn-arrow:after {
    content: "";
    background: url(../img/arrow-btn.svg) center no-repeat;
    width: 14px;
    height: 14px;
}

.btn-light {
    background: var(--white);
    color: var(--blue);
}

.btn-light:hover {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}

.btn-light.btn-arrow:after {background: url(../img/arrow-btn4.svg) center no-repeat;}

.blue {background: var(--blue);}
.lightblue {background: var(--blue2);}

.btn-primary-light {
    background: var(--lightgrey);
    color: var(--black);
}

.btn-primary-light:hover {
    background-color: var(--grey7);
}

.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cart-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9999px; background: #e11d48; color: #fff;
    font-size: 12px; line-height: 18px; text-align: center; font-weight: 600;
}
.cart-badge[data-zero="1"], .cart-badge:empty { display: none; }

.cart-clear{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0; margin-top:8px; border-top:1px solid #eee;
}
.cart-clear .clear-text{ font-size:14px; color:#6b7280; }
.remove-btn-all {
    position: unset !important;
}
.row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.column-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
}

.text-big p {font-size: 24px;}
.text-big p:last-child {margin-bottom: 0;}
.grey {background: var(--grey3);}
.lightgrey {background: var(--grey2);}
.white {background: var(--white);}

section.grey {
    padding: 120px 0;
    margin: 60px 0;
}

section.pt {padding-top: 120px;}

[id] {scroll-margin-top: 250px;}

/*
--------------------
Styles for Swiper
--------------------
*/
.swiper {width: 100%;}
.swiper-slide  {cursor: pointer;}

.swiper-btn {
    position: relative;
    display: flex;
    gap: 10px;
}

.swiper-btn .swiper-button-prev, .swiper-btn .swiper-button-next {
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    position: relative;
    width: 48px;
    height: 48px;
    background: var(--lightblue);
    border-radius: 7px;
}

.swiper-btn .swiper-button-prev:hover, .swiper-btn .swiper-button-next:hover {background: var(--blue2);}

.swiper-btn .swiper-button-prev:after, .swiper-btn .swiper-button-next:after {
    content: "";
    background: url(../img/slider-btn.svg) center no-repeat;
    width: 9px;
    height: 14px;
}

.swiper-btn .swiper-button-prev:after {transform: rotate(180deg);}

.swiper-pagination-progressbar {
    height: 5px;
    background: var(--lightblue);
    border-radius: 40px;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--blue);
    border-radius: 40px;
}

section.breadcrumbs {
    padding-bottom: 15px;
    margin-bottom: -30px;
    line-height: 100%;
}

.breadcrumb-item.active {color: var(--blue);}
.breadcrumb-item a, .breadcrumb-item.active {font-weight: 500;}

main section:last-child {padding-bottom: 120px;}

.breadcrumb {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    list-style: none !important;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
}

.breadcrumb-item {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-item::before {
    display: none !important;
}

.breadcrumb-item:not(:last-child)::after {
    content: " / ";
    color: var(--blue);
    margin: 0 5px;
}

.h2-title {
    color: var(--dark);
    font-family: "inter", Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    line-height: 105%;
    text-transform: none;
}

.title-block h1,
.title-block span {
    font-family: "bebausneue";
    font-size: 64px;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0;
    letter-spacing: 0;
    display: inline;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .title-block h1,
    .title-block span {
        font-family: "bebausneue";
        font-size: 32px;
    }
}

/*
--------------------
Styles for Swiper
--------------------
*/

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    color: #092267;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    color: #092267;
}

/* company about */
.project-page .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.about-block .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    color: white;
}

.project-page .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.about-block .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    color: white;
}

/*
--------------------
Styles for Header
--------------------
*/
header {
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    background: #ffffff;
    
}

.header--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

.header-block {padding: 25px 0;}

header .logo {
    padding: 10px 13px;
    background: var(--lightblue);
    border-radius: 10px;
}
header .logo img {
    height: 100%;
    width: 100px;
}
.button-blk {gap: 10px;}

.nav-btn, .cart-btn {
    background: var(--lightblue) url(../img/nav.svg) center no-repeat;
    width: 60px;
    height: 60px;
    padding: 10px;
}

.nav-btn.active {
    background: var(--lightblue) url(../img/close.svg) center no-repeat;
    border: none;
}

.cart-btn {background: var(--lightblue) url(../img/cart.svg) center no-repeat;}

.nav-btn:hover, .cart-btn:hover {background-color: var(--blue2);}

.btn-calc {
    width: 35%;
    max-width: 270px;
}

.email, .contacts {
    display: flex;
    flex-direction: column;
}

.email, .contacts {gap: 8px;}

.email a {
    font-size: 18px;
    font-weight: 600;
}

.email span, .contacts .btn {
    color: var(--grey);
    font-size: 14px;
}

.contacts .btn:hover {
    text-decoration: none;
    background-color: unset;
}

.contacts .btn {
    text-decoration: underline;
    padding: 0;
}

.tel-link {
    font-size: 18px;
    font-weight: 700;
    text-align: right;
}

.messengers {gap: 10px;}

.messengers .btn {
    font-size: 18px;
}

.messengers li a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.tg {background: #2AABEE;}
.tg:hover {background: #27a2e4; color: var(--white);}
.wa {background: #35C435;}
.wa:hover {background: #32b932; color: var(--white);}

.search-block {gap: 10px;}

.search-block input {
    background: var(--grey2);
    border: none;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 15px;
    min-width: 260px;
}

.search-block button {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-block {
    display: none;
    padding: 20px 0;
    border-top: 1px solid var(--grey2);
}

.nav-block.active {display: flex;}
.nav-block nav {width: 70%;}

@media (min-width: 1200px) {
    .nav-block {
        display: flex;
        padding: 0;
        border-top: 1px solid var(--grey2);
        /* overflow: hidden; */
        max-height: 0;
        opacity: 0;
        /* transition: max-height 0.1s ease, opacity 0.05s linear, padding 0.1s ease; */
    }

    .nav-block.active {
        padding: 35px 0;
        opacity: 1;
        /* max-height: var(--nav-block-max-height, 1000px); */
    }
}

.nav-dropdown {
    display: none;
    box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    list-style: none;
    margin-top: 10px;
    min-width: 310px;
    background: var(--white);
    border-radius: 15px;
}

.nav-dropdown a {
    color: var(--dark);
    gap: 45px;
}

.nav-dropdown a:hover {text-decoration: none;}

.link-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

.link-dropdown span {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(../img/dropdown-icon.svg) center no-repeat;
    text-align: center;
}

.nav-dropdown .link-dropdown {justify-content: space-between;}
.nav-dropdown .link-dropdown span {transform: rotate(-90deg);}


.nav-dropdown li {padding: 15px;}
.nav-dropdown li:hover {background: var(--grey2);}
nav li {position: relative;}

header nav > ul > li:before {
    content: "";
    width: 100%;
    height: 50px;
    position: absolute;
    top: 100%;
    left: 0;
}

header nav li:hover > .nav-dropdown, .nav-dropdown.open {
    display: block;
    position: absolute;
}

header nav li:hover > .nav-dropdown .nav-dropdown, header nav li > .nav-dropdown .nav-dropdown.open {
    left: 100%;
    top: 0;
    margin-top: 0;
    padding: 0;
}


/*
----------------------
Styles for Mobile nav
----------------------
*/
.create-nav {
    position: fixed;
    background: #fff;
    width: 100%;
    max-width: 394px;
    height: 100%;
    min-height: 100%;
    z-index: 999;
    right: 0;
    top: 0;
    padding: 15px 20px 20px;
    overflow: auto;
}

.create-nav-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
}

.create-nav-header .search-block {
    width: 55%;
    background: var(--lightblue);
    padding: 14px 22px;
    border-radius: 10px;
    margin-left: auto;
}

.create-nav-header .search-block input {
    padding: 0;
    background: none;
    min-width: 0;
    order: 2;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
}

.create-nav-header .search-block input::-webkit-input-placeholder {color: var(--blue); opacity: 0.3;}
.create-nav-header .search-block input:-moz-placeholder {color: var(--blue); opacity: 0.3;}
.create-nav-header .search-block input::-moz-placeholder {color: var(--blue); opacity: 0.3;}
.create-nav-header .search-block input:-ms-input-placeholder {color: var(--blue); opacity: 0.3;}

.create-nav-header .search-block button {
    background: none !important;
    padding: 0;
    height: auto;
    width: auto;
}

.create-nav-header .search-block button img {width: 19px;}

.create-nav-header .nav-btn {
    width: 50px;
    height: 50px;
    margin-left: 0;
    padding: 18px;
}

.create-nav-header .cart-btn {
    display: block;
    width: 50px;
    height: 50px;
    padding: 18px;
}

.create-nav-body nav ul {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px;
}

.create-nav-body nav ul li {
    border-bottom: 1px dashed #2121214D;
    width: 100%;
    padding: 15px 0;
}

.create-nav-body nav ul li a {
    font-size: 24px;
    font-weight: 500;
}

.create-nav-body .nav-dropdown.open {
    position: relative;
    background: none;
    box-shadow: none;
    padding: 0 0 0 20px;
    margin: 0;
}

.create-nav-body .nav-dropdown.open li:last-child {
    border: none;
    padding-bottom: 0;
}

.create-nav-body nav li > .nav-dropdown .nav-dropdown.open {
    left: 0;
    padding-left: 20px;
}

.create-nav-body .nav-dropdown.open a {
    font-size: 16px;
    font-weight: 400;
}

.create-nav-body .nav-dropdown li:hover {background: none;}

.create-nav-body .contacts {
    flex-direction: column;
    margin: 10px 0 20px;
    gap: 10px;
}

.create-nav-body .contacts a {
    background: var(--lightblue);
    width: 100%;
    text-align: center;
    padding: 11.5px 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 500;
}

.create-nav-body .btn-calc {
    max-width: 100%;
    width: 100%;
}

.create-nav-body .messengers {flex-direction: column-reverse;}
.create-nav-body .messengers li {width: 100%;}

.create-nav-body .messengers li a {
    width: 100%;
    height: 50px;
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
}

.create-nav-body .messengers li a img {display: none;}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    border-radius: 10px;
    border: 1px solid var(--grey2);
    padding: 25px 20px;
}

.search-results-header {color: var(--grey);}
.search-result-item {padding: 15px 0;}
.search-result-item:not(:last-child) {border-bottom: 1px solid var(--grey2);}

.search-result-link {
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-result-link:after {
    content: "";
    background: url(../img/arrow-btn2.svg) center no-repeat;
    width: 14px;
    height: 14px;
}

.search-result-link:hover {color: var(--blue3);}
.search-result-link:hover:after {background: url(../img/arrow-btn3.svg) center no-repeat;}

/*
--------------------
Styles for Offer
--------------------
*/
.offer {overflow: hidden;}
.offer h1 {margin-bottom: 0;}
.offer-content {margin-top: 20px;}

.offer-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
}

.offer-info p {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

.offer-info ul li {
    color: var(--black);
    opacity: 0.5;
}

.lines li {
    position: relative;
    opacity: 1;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lines li:first-child:before {
    bottom: 0;
    top: 0;
}

.lines li:after, .lines li:first-child:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, rgba(33, 33, 33, 0.5) 0 10px, transparent 10px 20px);
}

.offer-image {
    align-items: center;
    display: flex;
}

.offer-image img {
    width: 120%;
    margin-left: -10%;
}

/*
--------------------
Styles for Services
--------------------
*/
.service-card {
    background: var(--lightblue);
    border-radius: 20px;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    height: 100%;
}

.service-card span {
    font-size: 22px;
    font-weight: 500;
    width: 86%;
    max-width: 225px;
    line-height: 110%;
}

.services-icon {
    width: 42px;
    height: 42px;
    background: var(--white);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
}

.service-card p {
    margin: 0;
    opacity: 0.7;
}


/*
--------------------
Styles for Equipment
--------------------
*/
.equipment-block, .equipment-title {width: 100%;}

.equipment-block {
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.equipment-blk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.equipment .swiper-slide {height: auto;}

.equipment-product {
    padding: 16px;
    background: var(--lightblue);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 100%;
}

.equipment-image {position: relative;}

.equipment-image img {
    width: 100%;
    border-radius: 10px;
}

.equipment-image span {
    background: var(--white);
    position: absolute;
    top: 16px;
    left: 20px;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 500;
}

.equipment-btn {gap: 10px;}

.equipment-info {
    display: flex;
    flex-direction: column;
    gap: 34px;
    flex: 1;
    padding: 0 16px;
}

.equipment-info p {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    line-height: 105%;
}

.equipment-info ul {
    display: flex;
    flex-direction: column;
    gap: 13px;
    opacity: 0.7;
    margin-top: auto;
}

.equipment-info ul li span {font-weight: 500;}

/*
--------------------
Styles for Proposal
--------------------
*/
.proposal-block {
    padding: 50px;
    border-radius: 30px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    position: relative;
}

.proposal-block h2 {
    color: var(--white);
    max-width: 85%;
    line-height: 115%;
} 

.proposal-block p {
    max-width: 500px;
    line-height: 125%;
}

.proposal-block button {
    width: 100%;
    max-width: 420px;
}

.proposal-block:after {
    content: "";
    width: 77px;
    height: 77px;
    bottom: 50px;
    right: 50px;
    top: auto;
    position: absolute;
    background: var(--white) url(../img/service-icon4.svg) center no-repeat;
    background-size: 40px;
    border-radius: 50%;
}

/*
------------------------
Styles for Sertificates
------------------------
*/
.sertificates .tab-content {
    height: 100%;
    padding: 40px;
    border-radius: 15px;
    background: var(--lightblue);
}

.sertificates .tab-content img {max-width: 100%;}

.sertificates .nav {
    gap: 23px;
}

.sertificates .nav-link {
    padding: 30px 20px;
    background: var(--lightblue);
    color: rgba(33, 33, 33, 0.7);
    font-size: 24px;
    border-radius: 10px;
}

.sertificates .nav-link:hover {
    background: var(--blue);
    color: var(--white);
}

.sertificates .nav-link.active {
    background: var(--blue);
    font-weight: 500;
}

.sertificates .mySwiper {
    max-width: 200px;
    margin: 0;
}

.sertificates .mySwiper .swiper-slide {
    border: 1px solid rgba(33, 33, 33, 0.2);
    width: 57px;
    height: 57px;
    text-align: center;
    border-radius: 10px;
}

.sertificates .mySwiper .swiper-slide-thumb-active {border: 1px solid var(--blue);}
.sertificates .mySwiper img {height: 100%;}

.sertificates .mySwiper2 {
    margin-bottom: 48px;
    text-align: center;
}

.sertificate-img {
    position: relative;
    gap: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sertificate-img .swiper-button-prev, .sertificate-img .swiper-button-next {
    width: 32px;
    height: 32px;
    background: var(--white);
}

.sertificate-img .swiper-button-prev:after, .sertificate-img .swiper-button-next:after {background-size: 8px;}
.sertificates h2 {max-width: 700px;}

.sertificates .tab-content>.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sertificates .accordion-button {
    background: var(--blue);
    color: var(--white);
    padding: 23.5px;
    text-align: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 24px;
}

.sertificates .accordion-button.collapsed {
    background: var(--lightblue);
    color: rgba(33, 33, 33, 0.7);
}

.sertificates .accordion-button::after {content: none;}

.sertificates .accordion, .sertificates .accordion-item {
    gap: 23px;
    flex-direction: column;
    display: flex;
}

.sertificates .accordion-item {border: none;}
.sertificates .accordion-body {padding: 0;}
.sertificates .accordion-item:first-of-type>.accordion-header .accordion-button,
.sertificates .accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {border-radius: 10px;}

/*
--------------------
Styles for Projects
--------------------
*/
.title-row {margin-bottom: 30px;}

.project-info {
    background: var(--lightblue);
    padding: 30px 18px;
    border-radius: 0 0 20px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-info h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 16px;
    display: block;
}

.project-info p {
    margin: 0 0 26px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    text-overflow: ellipsis;
}

.project-info span.city {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.5;
    margin: auto 0 26px;
}

.projects .project-info .tags {
    margin-top: auto;
    margin-bottom: 12px;
}

.projects .project-info .tags .city {
    margin: 0;
}

.projects .project-info .btn-arrow {
    margin-top: 0;
}

.projects-block, .projects-img {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.projects-block {height: 100%;}
.projects .swiper-slide {height: auto;}

.projects .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projectSwiper img, .projectSwiper4 img {border-radius: 20px 20px 0 0;}

.projectSwiper2 .swiper-slide img, .projectSwiper3 .swiper-slide img {
    border-radius: 5px;
    height: 70px;
}

.projects .swiper-pagination-progressbar, .recommend .swiper-pagination-progressbar, .swiper-pag .swiper-pagination-progressbar {
    position: relative;
    margin-top: 17px;
}

/*
--------------------
Styles for Examples
--------------------
*/
.examples-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    padding: 50px 0 65px;
    position: relative;
    overflow: hidden;
}

.examples-block.line-block {padding: 55px 0;}

.line-block:before, .line-block:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      rgba(33, 33, 33, 0.5) 0 10px,
      transparent 10px 20px
    );
}

.line-block:after {
    top: auto;
    bottom: 0;
}

.examples-block p {
    max-width: 750px;
}

.examples-block button {
    width: 100%;
    max-width: 420px;
}

.examples-block img {
    position: absolute;
    bottom: -45px;
    right: 0;
}

/*
--------------------
Styles for About
--------------------
*/

.about-blk, .about-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-btn {
    display: flex;
    gap: 20px;
}

.about-btn a {
    flex: 1;
    border-radius: 10px;
    font-size: 24px;
    padding: 19px;
}

.about-info {
    background: var(--lightblue);
    padding: 30px;
    border-radius: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-info p {
    margin: 0;
    font-size: 22px;
}

.about-info p span {font-weight: 600;}

.about-info p.info-text {
    color: rgba(33, 33, 33, 0.7);
    font-size: 20px;
    line-height: 120%;
    margin-top: auto;
}

.about-images .swiper-slide {height: auto;}

.about-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aboutSwiper img {
    border-radius: 20px;
    max-height: 315px;
}

.aboutSwiper2 img {border-radius: 5px;}


/*
--------------------
Styles for Reviews
--------------------
*/
.reviews-page.lightblue {
    padding-bottom: 120px;
    margin: 0;
}

.reviews {overflow: hidden;}
.reviews .reviewsSwiper {overflow: visible;}
.reviews-title {margin-bottom: 30px;}

.reviewsSwiper .swiper-slide {
    height: auto;
    opacity: 0.4;
}

.review-blk {
    background: var(--white);
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 40px; */
}

.review-blk span.company-name {
    display: block;
    font-size: 24px;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 20px;
}

.review-blk p {margin-bottom: 10px;}
.review-blk .flex {margin-top: auto;}
.review-blk span.date {font-weight: 600;}

.review-blk .place {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--grey2);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 10px;
}

.review-blk .place.google {background: var(--grey2) url(../img/place1.svg) center no-repeat;}
.review-blk .place.gis {background: var(--grey2) url(../img/place2.svg) center no-repeat;}
.review-blk .place.yandex {background: var(--grey2) url(../img/place3.svg) center no-repeat;}
.review-blk .place.text {background: var(--grey2) url(../img/service-icon4.svg) center no-repeat;}
.reviews .swiper-slide.swiper-slide-visible {opacity: 1;}

.reviews .swiper-btn .swiper-button-prev, .reviews .swiper-btn .swiper-button-next {
    background: none;
    border: 1px solid var(--blue);
}

.reviews .swiper-btn .swiper-button-prev:hover, .reviews .swiper-btn .swiper-button-next:hover {background: var(--blue);}
.reviews .swiper-btn .swiper-button-prev:hover:after, .reviews .swiper-btn .swiper-button-next:hover:after {filter: brightness(0) invert(1);}

/*
---------------------------
Styles for Questionnaires
---------------------------
*/
.questionnaires-title p {
    font-size: 20px;
    margin-bottom: 0;
}

.questionnaires-title p span {display: block;}
.questionnaires-title p a {text-decoration: underline;}

.questionnaires-block {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.questionnaires-blk {
    background: var(--lightblue);
    padding: 22px;
    border-radius: 10px;
    height: 83px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.questionnaires-blk:hover {background: var(--blue2);}

.questionnaires-blk span {
    opacity: 0.7;
    font-size: 24px;
}

.questionnaires-blk a {
    text-decoration: underline;
    font-size: 20px;
}

.questionnaires-blk a:hover {text-decoration: none;}

.questionnaires-links{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.badge {
    background: var(--white);
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 500;
    color: var(--blue);
    text-decoration: unset !important;
    font-size: 20px !important;
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .badge {
        font-size: 12px !important;
    }
}
/*
--------------------
Styles for Kp
--------------------
*/
.kp-title p {
    max-width: 80%;
    font-size: 20px;
    margin-bottom: 0;
}

.kp .form {
    background: var(--lightblue);
    border-radius: 30px;
    padding: 36px 40px;
    margin-top: 30px;
}

.form-control {
    height: 67px;
    border: 1px solid rgba(38, 103, 207, 0.4);
    border-radius: 15px;
    background: var(--white);
    padding: 24px;
}

.form-control::-webkit-input-placeholder {color: rgba(38, 103, 207, 0.4);}
.form-control:-moz-placeholder {color: rgba(38, 103, 207, 0.4);}
.form-control::-moz-placeholder {color: rgba(38, 103, 207, 0.4);}
.form-control:-ms-input-placeholder {color: rgba(38, 103, 207, 0.4);}

.form textarea {height: 177px;}
.form-check-label {cursor: pointer;}
.form-check-label a {color: var(--black);}

.form-check-input {
    border-color: var(--black);
    background-color: transparent;
    border-radius: 0 !important;
}

.form button {width: 100%;}

.adds {
    position: relative;
    padding: 9px;
    display: flex;
    align-items: center;
}

.adds label {
    font-size: 14px;
    color: rgba(38, 103, 207, 0.4);
    border: 1px solid rgba(38, 103, 207, 0.4);
    display: inline-flex;
    align-items: center;
    height: 50px;
    border-radius: 10px;
    padding: 15px 10px;
    gap: 10px;
    margin: 0;
}

.adds label:after {
    content: "";
    background: url(../img/file.svg) no-repeat;
    width: 9px;
    height: 16px;
}

.adds input[type="file"] {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    left: 0;
    cursor: pointer;
    margin: 0;
}

.file-name {
    font-size: 14px;
    margin-left: 10px;
    font-weight: 500;
}

.form .row {margin-bottom: 10px;}
.form .row.col-check {margin: 10px 0 36px;}

.modal-body form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-header {
    padding: 0;
    border: none;
}

.modal-header .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.modal-dialog {
    width: 96%;
    max-width: 700px;
}

.modal-body {padding: 0;}

.answer-block p {
    margin: 0;
    font-weight: 500;
    font-size: 42px;
    line-height: 115%;
}

.answer-block button {
    width: 100%;
    height: 80px;
    border-radius: 15px;
    font-weight: 500;
    font-size: 18px;
    margin-top: 30px;
}

#answerModal .modal-dialog, #vacancieModal .modal-dialog {max-width: 1180px;}

.check-list-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.check-list-block .form-check-input {
    border-color: #8C8C94;
    border-radius: 2px !important;
    border-width: 2px;
    width: 16px;
    height: 16px;
    margin: 5px 10px 0 0;
}

.check-list-block .form-check-input:checked[type=checkbox] {border: none;}

.check-list {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 25px;
    font-size: 18px;
}

.check-list h5 {margin-bottom: 40px;}

.check-list textarea {
    border: none;
    height: auto;
    width: 100%;
    resize: none;
    height: 18px;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
}

.modal-title {
    font-size: 42px;
    max-width: 600px;
    font-weight: 500;
    line-height: 115%;
}

.modal-content {
    border-radius: 20px;
    padding: 50px;
    gap: 40px;
}

.modal-body button {
    border-radius: 15px;
    font-weight: 500;
    font-size: 24px;
}


/*
---------------------
Styles for Rekvizity
---------------------
*/
.data-row:first-child {border-top: 1px dashed rgba(33, 33, 33, 0.5);}

.data-row {
    border-bottom: 1px dashed rgba(33, 33, 33, 0.5);
    padding: 15px 10px;
    transition: background-color 0.2s;
    font-size: 18px;
    gap: 30px;
}

.data-row:hover {background-color: var(--lightblue);}

.data-label {
    line-height: 100%;
    opacity: 0.3;
}

.data-value {
    font-weight: 500;
    margin-right: 10px;
    text-align: right;
}

.copy-btn {
    background: url(../img/copy.svg);
    width: 16px;
    height: 16px;
    border: none;
}

.copy-feedback {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
}
.max-h-400 {
    max-height: 400px;
}
.download-section a,
.download-section button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}
.download-section a:after,
.download-section button:after {
    content: "";
    background: url(../img/download.svg) center / contain no-repeat;
    width: 21px;
    height: 27px;
}

@media print {
    .copy-btn, .download-section {
        display: none !important;
    }
    
    .company-card {
        box-shadow: none;
        margin: 0;
    }
}

/*
----------------------
Styles for - O zavode
----------------------
*/
.line-block {
    position: relative;
    padding: 40px 0;
}

.policy-block p {
    margin-bottom: 24px;
    line-height: 145%;
}

.about-company-block p {
    margin-bottom: 24px;
    line-height: 145%;
}

/*
--------------------
Styles for Contacts
--------------------
*/
.contacts-image img {
    width: 100%;
    border-radius: 20px;
}

.contacts-blk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    padding: 30px;
    border-radius: 10px;
    background: var(--lightblue);
}

.contacts-blk span {
    font-size: 32px;
    font-weight: 600;
    line-height: 100%;
}

.contacts-blk p, .contacts-blk a {
    font-size: 24px;
    font-weight: 500;
    color: var(--blue);
    margin: 0;
}

.contacts-info {
    display: flex;
    align-items: center;
    gap: 10px;
}


/*
--------------------
Styles for Cart
--------------------
*/
.cart-item:first-child:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, rgba(33, 33, 33, 0.5) 0 10px, transparent 10px 20px);
}

.cart-item {
    padding: 30px 0;
    position: relative;
}

.cart-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, rgba(33, 33, 33, 0.5) 0 10px, transparent 10px 20px);
}

.cart-image img {
    width: 100px;
    height: 70px;
    object-fit: contain;
}

.product-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 7px;
}

.product-description p {
    margin: 0;
    opacity: 0.5;
    font-size: 14px;
}

.cart-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn {
    width: 25px;
    height: 25px;
    border: 1px solid var(--black);
    opacity: 0.5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    line-height: 1;
    padding-bottom: 2px;
}

.quantity-input {
    width: 40px;
    text-align: center;
    border: none;
    border-radius: 0;
    padding: 5px;
    font-weight: 600;
    font-size: 18px;
    line-height: 110%;
}

.price {font-size: 18px;}

.remove-btn {
    width: 25px;
    height: 25px;
    border: 1px solid var(--black);
    opacity: 0.5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}

.total-section {padding: 30px 0;}

.total-section p, .total-amount {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 110%;
}

.text-muted {
    opacity: 0.7;
    font-weight: 500;
    font-size: 14px;
    line-height: 110%;
}

.cart-item .cart-image {flex: 2;}
.cart-item .cart-info {flex: 4;}
.cart-item .cart-quantity {flex: 2;}
.cart-item .cart-price {flex: 2;}

.total-section p {flex: 6;}
.text-muted {flex: 2; text-align: center;}
.total-amount {flex: 2; text-align: right;}

.cart-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

/*
--------------------
Styles for Vacancies
--------------------
*/
.vacancies-blk {
    padding: 50px 50px 100px;
    background: var(--white);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.vacancie-title {
    font-size: 42px;
    font-weight: 600;
    line-height: 109%;
}

.vacancie-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 50px;
}

.vacancie-list ul {
    margin: 0;
    padding-left: 20px;
}

.vacancie-list ul li {
    font-size: 24px;
    font-weight: 500;
}

.vacancie-list span {
    font-size: 32px;
    font-weight: 600;
    color: var(--blue);
    line-height: 100%;
}

.vacancie-btn {
    display: flex;
    gap: 20px;
}

.vacancie-btn button {
    font-size: 32px;
    font-weight: 600;
    align-items: center;
}

.vacancie-btn > * {
    flex: 1;
    max-width: 463px;
    height: 149px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 10px;
}

.vacancie-contact {
    padding: 25px;
    justify-content: space-between;
}

.vacancie-contact span {
    font-size: 24px;
    opacity: 0.4;
    line-height: 100%;
}

.vacancie-contact a {
    font-size: 32px;
    font-weight: 600;
    line-height: 100%;
}

.vacancie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.vacancie-item {
    width: 43%;
    background: var(--lightblue);
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 24px;
}

.vacancie-icon {
    width: 53px;
    height: 53px;
    background: var(--white);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vacancies-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.vacancy-hidden {
    display: none !important;
}

.vacancie-more {margin-top: 20px;}

.vacancie-more:after {
    content: "";
    background: url(../img/icon-more.svg) no-repeat;
    width: 21px;
    height: 23px;
}

/*
---------------------
Styles for Portfolio
---------------------
*/

.projects-img .main-image{
    max-height: 290px;
}
.portfolio .tab-block {
    gap: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.portfolio .tab-block button {
    font-size: 18px;
    padding: 7px 15px;
    line-height: 100%;
    border-radius: 20px;
    border: none;
}

.portfolio .tab-blk {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.portfolio .tab-blk .nav {
    gap: 10px;
    flex-wrap: nowrap;
}

.portfolio .tab-blk .nav-item {flex-shrink: 0;}

.portfolio .tab-blk button {
    background: var(--lightblue);
    color: var(--black);
}

.portfolio .tab-blk button:hover {
    background: var(--blue);
    color: var(--white);
}

.portfolio .tab-blk button.active {
    background: var(--blue);
    color: var(--white);
}

.portfolio .tab-content > .active {
    display: flex;
    gap: 10px;
}

.portfolio .tab-content button {
    color: var(--blue);
    background: transparent;
    border: 1px solid rgba(38, 103, 207, 0.4);
}

.portfolio .tab-content button:hover {
    background: var(--blue);
    color: var(--white);
}

.portfolio .tab-content button.active {
    background: var(--blue);
    color: var(--white);
}

.portfolio .project-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.portfolio .project-info .tags {
    margin-top: auto;
    margin-bottom: 18px;
}

.portfolio .project-info .btn-arrow {
    margin-top: 0;
}

.portfolio .tags {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: auto 0 26px;
}

.portfolio .tags span {
    font-weight: 500;
    border-radius: 10px;
    margin: 0;
}

.portfolio .tags .city {
    border: 1px solid var(--blue);
    color: var(--blue);
    padding: 10px 10px;
    opacity: 1;
    margin: 0;
}

.portfolio .tags .year {
    font-size: 14px;
    color: var(--white);
    background: var(--blue);
    padding: 10px;
}

.btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    width: 100%;
}

.btn-more:after {
    content: "";
    background: url(../img/icon-more.svg) center / contain no-repeat;
    width: 21px;
    height: 23px;
}

/*
------------------------
Styles for Review page
------------------------
*/
section.add-review {margin: 0;}

.add-review-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-review-block > div {
    background: var(--white);
    border-radius: 30px;
    padding: 50px;
}

.add-review-info ul {
    margin: 30px 0 0;
    padding-left: 20px;
    font-size: 24px;
    font-weight: 600;
    line-height: 135%;
}

.add-review .form textarea {height: 418px;}

.recommend-blk {
    background: var(--lightblue);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.recommend-blk img {
    border-radius: 20px 20px 0 0;
    width: 100%;
}

.recommend-info {
    padding: 20px 20px 30px;
    border-radius: 0 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: var(--lightblue);
    flex: 1;
}

.recommend-info span {
    font-size: 20px;
    font-weight: 600;
    line-height: 120%;
}

.recommend .swiper-wrapper {
    height: unset;
}

.recommend .swiper-slide {
    height: auto;
    display: flex;
}

.recommend .recommend-info .btn-arrow {
    margin-top: auto;
}
.recommend .recommend-image {
    background: var(--grey2);
    border-radius: 10px;
    margin: 16px 16px 0;
}

/*
------------------------
Styles for 404 page
------------------------
*/

.not-found {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f9fafb;
    padding: 40px 20px;
}

.not-found .container {
    max-width: 600px;
}

.not-found-block h1 {
    font-size: 72px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 20px;
}

.not-found-block p {
    font-size: 18px;
    color: #4b5563;
    margin-bottom: 40px;
}

.not-found img {
    width: 120px;
    height: auto;
    margin: 0 auto 40px;
    display: block;
}

.not-found .btn.btn-primary.btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb;
    color: #fff;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
}

.not-found .btn.btn-primary.btn-arrow:hover {
    background-color: #1e40af;
}

/*
------------------------
Styles for Card project
------------------------
*/
.details-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.details-blk {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: var(--white);
    border-radius: 20px;
    padding: 30px 55px;
    position: relative;
}

.details-blk h5 {
    font-size: 18px;
    color: var(--blue);
    margin: 0;
}

.details-blk p {
    margin-bottom: 0;
    opacity: 0.7;
    max-width: 84%;
}

.details-blk span.text-blue {
    color: var(--blue);
    font-weight: 600;
    font-size: 32px;
    line-height: 110%;
    max-width: 60%;
}

.details-blk .details-company {
    text-align: right;
    opacity: 0.5;
}

.details-blk.yandex:after {
    content: "";
    position: absolute;
    top: 50px;
    right: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.details-blk.text:after {background: var(--grey2) url(../img/service-icon4.svg) center no-repeat;}
.details-blk.yandex:after {background: var(--grey2) url(../img/place3.svg) center no-repeat;}
.details-blk.gis:after {background: var(--grey2) url(../img/place2.svg) center no-repeat;}
.details-blk.google:after {background: var(--grey2) url(../img/place1.svg) center no-repeat;}


/*
------------------------
Styles for Project page
------------------------
*/
.project-page-image {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    height: 350px;
}
  
.casesSwiper {flex: 1;}
.casesSwiper2 {width: 124px;}

.casesSwiper img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
.casesSwiper2 img {
    border-radius: 5px;
    display: block;
    width: 100%;
    height: 100%;
}
  
.project-page-info ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-page-info ul li {
    flex:1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.project-page-info ul li {
    font-size: 22px;
    font-weight: 500;
}

.project-page-info ul li span {
    color: var(--grey);
    font-size: 18px;
    font-weight: 400;
}

/*
---------------------
Styles for Card page
---------------------
*/
.card-images {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.card-images .swiper-slide {height: auto;}

.card-images .swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.card-images .cardSwiper img {
    border-radius: 20px;
    height: 490px;
    object-fit: contain;
}

.cardSwiper2 {margin-top: auto;}

.custom-number {
    display: flex;
    align-items: center;
    width: 100px;
    height: 60px;
    justify-content: center;
    background: var(--white);
    border: 2px solid rgba(38, 103, 207, 0.2);
    border-radius: 10px;
}
  
.custom-number button {
    background: url(../img/up.svg) center no-repeat;
    width: 20px;
    height: 15px;
    border: none;
}

.custom-number button.minus {transform: rotate(180deg);}
  
.custom-number input {
    width: 50px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 110%;
}
  
.card-quantity {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.add-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.add-cart:after {
    content: "";
    background: url(../img/icon-cart.svg) center no-repeat;
    width: 22px;
    height: 20px;
}

.card-flex {gap: 24px;}

.card-description {
    background: var(--lightblue);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.card-description span {
    font-size: 32px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.card-description p {
    margin-top: auto;
    margin-bottom: 0;
    line-height: 110%;
    opacity: 0.8;
}

.card-description button.btn-primary {justify-content: center;}

.card-btn {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-btn a {
    font-size: 18px;
    font-weight: 600;
    padding: 15.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.card-btn a:after {
    content: "";
    width: 20px;
    height: 22px;
}

.card-btn a.icon1:after {background: url(../img/icon-card1.svg) center no-repeat;}
.card-btn a.icon2:after {background: url(../img/icon-card2.svg) center no-repeat;}

.card-tehnic .lines li {
    font-size: 18px;
    font-weight: 500;
}

.card-tehnic .lines li span {
    font-weight: 600;
    opacity: 0.4;
}


/*
-------------------------
Styles for Article page
-------------------------
*/
.article-block {margin-bottom: 40px;}

.article-block p {
    margin-bottom: 0;
    width: 53%;
    font-size: 18px;
    font-weight: 500;
}

.article-tabs {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.article-tabs .nav {gap: 10px;}

.article-tabs .nav li button {
    color: var(--blue);
    padding: 2px 15px;
    border-radius: 20px;
    border: 1px solid rgba(38, 103, 207, 0.4);
    font-size: 18px;
}

.article-tabs .nav li button:hover {
    background: var(--blue);
    color: var(--white);
}

.article-tabs .nav li button.active {background: var(--blue);}

.articles .article-col {
    display: flex;
    flex-direction: column;
}

.article-blk {
    width: 100%;
    background: var(--lightblue);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-blk img {
    width: 100%;
    border-radius: 20px 20px 0 0;
}

.article-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    gap: 15px;
}

.article-info .btn-arrow {
    margin-top: unset;
}

.article-tag {
    background: var(--blue);
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    border-radius: 10px;
    color: var(--white);
    margin-bottom: 15px;
}

.article-info .article-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 100%;
    color: var(--black);
}

.article-info p {
    font-size: 14px;
    line-height: 130%;
    margin-bottom: 0;
}

.article-info .article-date {
    margin: auto 0 15px;
    opacity: 0.5;
    font-weight: 500;
    font-size: 18px;
}

.article-info a {width: 100%;}

.articles .article-info .btn-arrow {
    margin-top: 0;
}


/*
---------------------
Styles for Post page
---------------------
*/
.post-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.post-title h1 {margin-bottom: 0;}

.post-date {
    font-size: 20px;
    opacity: 0.4;
    font-weight: 500;
}

.post-title .bold {
    font-size: 32px;
    font-weight: 600;
    line-height: 110%;
    max-width: 1000px;
    margin: 16px 0 30px;
}

.article-page p:not(.bold), .post p:not(.bold) {
    max-width: 850px;
    opacity: 0.7;
    line-height: 110%;
}

.post-image img {
    border-radius: 30px;
    width: 100%;
    display: block;
}

section.toc {padding: 40px 0;}

.toc-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--white);
    border-radius: 30px;
    padding: 30px 50px;
}

.toc h3, .post h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 110%;
    margin: 0 0 10px;
    font-family: "inter", Arial, sans-serif;
    color: var(--black);
    text-transform: none;
}

.lines2 {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lines2 li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lines2 li:before {
    content: "";
    width: 15px;
    height: 2px;
    border-radius: 100px;
    background: var(--blue);
}

.lines2 li a {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    color: var(--blue);
}

.post-block {
    display: flex;
    flex-direction: column;
    gap: 110px;
}

.lines3 {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    opacity: 0.7;
    line-height: 110%;
}

.lines3 li:before {content: "- ";}

.post p {
    font-size: 24px;
    line-height: 110%;
}

.post {font-size: 24px;}
.post .bold {font-weight: 600;}
.post .italic {font-style: italic;}

.post-blk {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 850px;
}

.post-blk ul {
    margin: 0 0 10px;
    opacity: 0.7;
    line-height: 110%;
}

blockquote {
    border-left: 5px solid var(--blue);
    padding-left: 16px;
    opacity: 0.7;
    line-height: 110%;
}

.post-blk p.bold {margin-bottom: 0;}
.post-blk-row {margin-bottom: 20px;}
.post-blk p.black {opacity: 1;}

.post-blk p a {
    color: var(--black);
    text-decoration: underline;
}

.post-blk p button {
    padding: 0;
    border: none;
    background: none;
    font-weight: 600;
    text-decoration: underline;
}

.article-page .article-tag {margin-bottom: 0;}

/*
--------------------
Styles for Catalog
--------------------
*/
.catalog-title {margin-bottom: 60px;}

.catalog-title p {
    max-width: 610px;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.8;
}

.ctlg-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    flex-wrap: wrap;
}

.catalog-content {flex: 1;}

.catalog-page {
    max-width: 1200px;
    margin: 0 auto;
}

.catalog-title {
    margin-bottom: 60px;
}

.catalog-title h1 {
    /* font-size: 32px; */
    margin-bottom: 16px;
}

.catalog-title p {
    max-width: 610px;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.8;
}

.ctlg-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.filtr {
    width: 265px;
    background: var(--lightblue);
    padding: 20px 12px;
    position: sticky;
    top: 120px;
    border-radius: 10px;
}

.filter-title {
    display: block;
    color: var(--blue);
    font-size: 18px;
    font-weight: 500;
    line-height: 145%;
}

.filter-section {
    position: relative;
    padding: 20px 0;
}

.filter-section:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      rgba(33, 33, 33, 0.5) 0 5px,
      transparent 5px 10px
    );
}

.filtr .dropdown-content {
    display: none;
    margin-top: 15px;
}

.filtr .dropdown-content.open {display: block;}

.filtr .checkbox-item {
    padding: 12.5px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.filtr .checkbox-item input {
    width: 16px;
    height: 16px;
}

.filtr .checkbox-item label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
}

.section-title:after {
    content: "";
    background: url(../img/icon-dropdown.svg) center no-repeat;
    width: 7px;
    height: 6px;
}

.filter-btn {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ctlg-blk {
    transition: opacity 0.3s ease;
}

.ctlg-blk.hidden {
    display: none !important;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.section-title:after {
    content: "";
    background: url(../img/icon-dropdown.svg) center no-repeat;
    width: 7px;
    height: 6px;
    transition: transform 0.3s ease; /* Анимация поворота */
}

.section-title.active:after {
    transform: rotate(180deg); /* Поворот стрелки */
}


.sort-block {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 100px;
}

.sort-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sort-section label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.sort-select {
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    cursor: pointer;
}

/* Styles for select */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-wrapper select {display: none;}

.custom-select {
    position: relative;
    border: 1px solid var(--blue);
    border-radius: 10px;
    cursor: pointer;
    background: var(--white);
}

.custom-select__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--blue);
}

.custom-select__trigger::after {
    content: "";
    position: relative;
    background: url(../img/icon-select.svg) no-repeat;
    right: 0;
    width: 11px;
    height: 7px;
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.custom-select.open .custom-select__trigger::after {transform: rotate(0);}

.custom-options {
    position: absolute;
    display: none;
    top: calc(100% + 7px);
    right: 0;
    background: var(--white);
    border-top: 0;
    border-radius: 15px;
    z-index: 1000;
    width: 280px;
    max-height: 145px;
    overflow-y: auto;
    box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
}

.custom-select.open .custom-options {
    display: block;
}

.custom-option {
    position: relative;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.custom-option:hover, .custom-option.selected {
    background: var(--lightblue)
}


/* styles for range */
.double-range-slider {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 21px 0;
}

.double-range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 1px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    outline: none;
    z-index: 1;
}

.double-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 21px;
    height: 21px;
    background: var(--blue);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 8px solid var(--white);
    box-shadow: 0px 1px 5.6px 0px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

.double-range-slider input[type="range"]::-moz-range-thumb {
    width: 21px;
    height: 21px;
    background: var(--blue);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 8px solid var(--white);
    box-shadow: 0px 1px 5.6px 0px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

.slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
    transform: translateY(-50%);
    border-radius: 3px;
}

.slider-range {
    position: absolute;
    height: 100%;
    background: var(--blue);
    border-radius: 3px;
}

.range-label {
    position: absolute;
    top: 15px;
    color: var(--blue);
    font-weight: 500;
    font-size: 14px;
    transform: translateX(-50%);
    pointer-events: none;
    text-align: center;
}

.catalog-content .equipment-image img {
    height: 240px;
    object-fit: contain;
}

.catalog-content .equipment-product {gap: 20px;}
.catalog-content .equipment-info {padding: 0;}

.catalog-content .equipment-info ul {
    gap: 3px;
    font-size: 12px;
}

.equipment-price {
    font-size: 18px;
    font-weight: 600;
}

.filtr-modal {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: var(--lightblue);
    border-radius: 10px;
}

#filtrModal .modal-dialog {width: 90%; margin: auto;}
#filtrModal .modal-content {padding: 0;}
#filtrModal .filtr {width: 100%;}
#filtrModal .section-title {font-size: 16px;}

#filtrModal .btn-close {
    position: absolute;
    top: calc(100% + 18px);
    margin: auto;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: var(--grey5) url(../img/close.svg) center no-repeat;
    border-radius: 10px;
    opacity: 1;
}

.catalog-content .equipment-image {
    background: var(--grey2);
    border-radius: 10px;
}

/*
--------------------
Styles for Calc
--------------------
*/
.calc .check-list h5 {margin-bottom: 20px;}

.calc .check-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 25px;
}

.calc.grey {
    margin: 0;
    padding: 60px 0;
}

.calc .form-check {
    font-size: 14px;
    margin-bottom: 0;
    gap: 13px;
    display: flex;
    align-items: center;
    padding: 0;
}

.check-blk {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.check-blk button {
    border: 2px solid var(--blue);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    background: var(--white);
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.check-blk button:after {
    content: "";
    background: url(../img/calc-icon.svg) center no-repeat;
    width: 14px;
    min-width: 14px;
    height: 8px;
    transform: rotate(180deg);
    transition: all ease-out .2s;
}

.check-blk button.collapsed:after {transform: none;}

.check-content {
    border-radius: 8px;
    border: 1px solid #DEE2E6;
    margin-top: 3px;
    padding: 0 20px 8px;
}

.check-content span {
    font-size: 14px;
    font-weight: 500;
    color: #6C757D;
    display: block;
    padding: 9.5px 0;
}

.calc input[type="radio"] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50% !important;
}

.calc .checkbox-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10.5px 0;
}

.calc .checkbox-item label {
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.check-content .check-input {
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    width: 100%;
    padding: 9.5px 16px;
    color: rgba(0, 0, 0, 0.4);
}

.check-content .col2 {
    -webkit-column-count:2;  
    -moz-column-count:2;  
    column-count:2;
    overflow: hidden;
}

.check-content .col2 .checkbox-item {
    -webkit-column-break-inside: avoid;
              page-break-inside: avoid;
                   break-inside: avoid;
    width: 100%;
}

.check-list-total {
    padding: 42px 36px;
    border-radius: 20px;
    color: var(--white);
}

.check-list-total p {
    max-width: 450px;
    font-size: 20px;
    line-height: 110%;
}

.check-list-total p.calc-total-price {
    font-family: "bebausneue";
    font-size: 61px;
    max-width: 85%;
    line-height: 100%;
    letter-spacing: 0;
}

.check-list-total button {margin-top: 24px;}



/*
--------------------
Styles for Footer
--------------------
*/
footer {
    margin-top: auto;
    padding: 65px 0;
}

footer h5 {
    color: var(--blue);
    margin-bottom: 30px;
}

.footer-block {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

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

.contact-block {width: 29%;}

.contact-blk {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-blk span {
    display: block;
    font-size: 18px;
    color: var(--blue);
}

.contact-blk a, .contact-blk p {
    color: var(--black);
    font-size: 24px;
    font-weight: 600;
}

.contact-blk p {margin-bottom: 0;}

.catalog-block {
    width: 35%;
}

.catalog-list, .company-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company-list {gap: 5px;}

.catalog-list a, .company-list a {
    color: var(--black);
    opacity: 0.6;
    line-height: 1;
}

.catalog-list a:hover, .company-list a:hover {opacity: 1;}

.company-block {
    width: 24%;
    margin-left: auto;
}
.company-block .company-list {
    margin-bottom: 10px;
}
footer .messengers {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

footer .messengers a {
    color: var(--white);
    border-radius: 10px;
}

.contact-section {
    margin: 40px 0 35px;
    background: var(--white);
    padding: 34px;
    border-radius: 20px;
}

.contact-section span {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.contact-section button {
    width: 100%;
    max-width: 600px;
}

.flogo {gap: 22px;}


.flogo img {
    height: 40px;
}
.bottom-section a {
    text-decoration: underline;
    opacity: 1;
    line-height: 1;
}

.bottom-section a:hover {text-decoration: none;}

.copyright {
    color: var(--blue);
    opacity: 0.6;
    line-height: 1;
}

footer .contact-info {
    max-width: 95%;
}

/*
--------------------
Styles for Adaptive
--------------------
*/
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1210px;}
}

@media (max-width: 1199px) {
    nav li:hover > .nav-dropdown {display: none;}
    nav li .nav-dropdown.open {display: block;}
    .footer-block {flex-wrap: wrap;}
    .contact-block {width: 100%;}
    .contact-blk {flex-direction: row; flex-wrap: wrap; gap: 20px 0;}
    .contact-item {width: 50%;}
    .contact-item:last-child {width: 100%;}
    .catalog-block {width: 50%;}
    .company-block {width: 40%;}
    .contact-section button {max-width: 340px;}
    .contacts .btn, .email {display: none;}
    header .logo {order: 1;}
    .contacts {order: 2; gap: 0; align-items: center;}
    header .messengers {order: 3;}
    .button-blk {order: 4;}
    .btn-calc {order: 5; max-width: 250px;}
    .btn-calc:after {content: none;}
    header nav, header .search-block, .nav-block.active, header nav > ul > li:before {display: none;}
    .search-results {width: 260px; left: auto; right: 0;}
    h1, h2 {font-size: 62px;}
    h3 {font-size: 30px;}
    .examples-block img {max-width: 300px; bottom: -10px;}
    .examples-block p {max-width: 60%;}
    .about-btn a {font-size: 18px;}
    .reviews .swiper-slide {width: 380px;}
    .reviews h2 {max-width: 65%;}
    .form .form-check {font-size: 15px;}
    .answer-block p, .modal-title {font-size: 34px;}
    .vacancie-item {font-size: 20px;}
    .modal-title {max-width: 60%;}
    .details-blk span.text-blue {font-size: 24px;}
    .details-blk p, .project-page-info ul li {font-size: 20px;}
    .details-block {gap: 20px;}
    .article-block p {width: 80%;}
    .article-tabs .nav {flex-wrap: nowrap; white-space: nowrap; overflow: auto; -ms-overflow-style: none; scrollbar-width: none;}
    .about-info p {font-size: 20px;}
    .ctlg-block .filtr {display: none;}
    .check-list-total p {font-size: 16px;}
    .check-list-total p.calc-total-price {font-size: 40px;}
}

@media (max-width: 991px) {
    footer {padding: 50px 0;}
    footer h5 {margin-bottom: 20px;}
    footer .contact-block h5 {margin-bottom: 30px;}
    .catalog-block, .company-block {width: 100%;}
    .company-list {gap: 4px;}
    .contact-blk p {max-width: 510px;}
    .contact-section {order: 2; margin: 30px 0 20px; flex-direction: column; padding: 15px 18px 20px; gap: 15px;}
    .contact-section span {font-size: 24px;}
    .contact-section button {max-width: 100%;}
    .bottom-section {flex-wrap: wrap; gap: 15px 40px; justify-content: flex-start; order: 4;}
    .footer-flex {display: flex; flex-direction: column;}
    .footer-block {order: 1; gap: 30px;}
    footer .messengers {order: 3; flex-direction: row; margin-bottom: 28px;}
    footer .messengers > * {flex: 1;}
    .btn-calc {max-width: 157px; padding: 13.5px 15px; font-size: 14px;}
    h1, h2 {font-size: 42px;}
    h3 {font-size: 24px;}
    .text-big p {font-size: 20px;}
    .offer-info p {order: 1;}
    .offer-image {order: 2;}
    .offer-info ul, .offer-info button {order: 3;}
    .offer-info button {border-radius: 15px;}
    .offer-info ul li {opacity: 0.8; padding: 14px 0;}
    .offer-info {gap: 16px;}
    .offer-info p {font-size: 20px; font-weight: 400;}
    section {padding: 25px 0;}
    .reviews-page.lightblue {padding-bottom: 50px;}
    section.pt {padding-top: 50px;}
    section.grey {padding: 50px 0; margin: 25px 0;}
    .service-card {padding: 16px 20px; gap: 22px; font-size: 14px;}
    .service-card span {font-size: 16px; max-width: 190px;}
    .equipment-block {gap: 40px;}
    .column-block {gap: 20px;}
    .swiper-btn .swiper-button-prev, .swiper-btn .swiper-button-next {width: 43px; height: 43px;}
    .equipment-title {align-items: flex-end;}
    .equipment-product {padding: 8px; gap: 20px; border-radius: 10px;}
    .equipment-info {padding: 0 10px;}
    .equipment-info p {font-size: 23px;}
    .equipment-info ul li:nth-child(n+2) {display: none;}
    .catalog-content .equipment-info ul li:nth-child(n+2) {display: block;}
    .equipment-blk {gap: 10px;}
    .proposal-block button {max-width: 380px;}
    .proposal-block {padding: 50px 35px;}
    .proposal-block h2 {max-width: 80%;}
    .sertificates .tab-content>.tab-pane {display: block;}
    .sertificates .fade:not(.show) {opacity: 1;}
    .sertificates h2 {max-width: 80%;}
    .sertificate-img .swiper-button-prev, .sertificate-img .swiper-button-next {display: none;}
    .examples-block img {position: relative; margin: 0 auto; bottom: 0;}
    .examples-block {padding-bottom: 10px;}
    .examples-block p {max-width: 445px;}
    .examples-block {padding-top: 34px;}
    .about-btn a {font-size: 24px;}
    .about-info span.info-text {margin-top: 90px;}
    .review-blk {gap: 30px;}
    .reviews h2 {max-width: 415px;}
    .questionnaires-title p {max-width: 470px;}
    .questionnaires-title p span {display: inline;}
    .questionnaires-blk span, .questionnaires-blk a {font-size: 16px;}
    .form-control {height: 60px; padding: 20px;}
    .form textarea {height: 146px;}
    .kp .form {padding: 40px 30px 45px;}
    .adds label {border: none; height: 100%; color: var(--blue); flex-direction: row-reverse;}
    .adds label:after {background: url(../img/file2.svg) no-repeat; width: 14px; height: 18px;}
    .form .row.col-check {margin: 25px 0; gap: 20px;}
    .form .row {margin-left: -5px; margin-right: -5px;}
    .form .row > div {padding: 0 5px;}
    .form .row.col-check > div {margin: 0;}
    .kp-title p {max-width: 73%;}
    section.breadcrumbs {margin: 0; padding: 0;}
    h1 {margin-bottom: 20px;}
    .breadcrumb-item a, .breadcrumb-item.active {color: rgba(33, 33, 33, 0.3); font-size: 14px; font-weight: 400;}
    .breadcrumb-item:not(:last-child)::after {color: rgba(33, 33, 33, 0.3);}
    .download-section button {margin-top: 20px;}
    .check-list {padding: 30px 25px;}
    .check-list h5 {margin-bottom: 20px;}
    .form .row, .col-text {order: 3;}
    .check-list {order: 2;}
    .form .row.col-check {order: 3;}
    .check-list-total {order: 4;}
    .form button {order: 4;}
    .contacts-blk {gap: 17px; padding: 13px 15px;}
    .contacts-blk span {font-size: 16px;}
    .contacts-blk p, .contacts-blk a {font-size: 14px;}
    .contacts-blk img {height: 12px;}
    .contacts-page .row {--bs-gutter-x: 10px; --bs-gutter-y: 10px;}
    .product-title, .quantity-input, .price {font-size: 14px;}
    .quantity-btn, .remove-btn {width: 18px; height: 18px;}
    .total-section p, .total-amount {font-size: 20px; order: 1;}
    .cart-item .cart-quantity {flex: 1;}
    .cart-price {gap: 10px;}
    .cart-item .cart-image, .cart-item .cart-price {flex: 1.5;}
    .total-section {flex-wrap: wrap;}
    .text-muted {order: 2; min-width: 100%; text-align: right; margin-top: 4px;}
    .vacancies-blk {padding: 40px 25px; gap: 30px;}
    .vacancie-title {font-size: 24px;}
    .vacancie-icon {width: 29px; height: 29px;}
    .vacancie-icon img {width: 19px; height: 19px; object-fit: contain;}
    .vacancie-item {font-size: 14px; padding: 8px 12px; width: calc(50% - 6px);}
    .vacancie {gap: 12px;}
    .vacancie-list span, .vacancie-list ul li {font-size: 20px;}
    .vacancie-list ul {max-width: 65%;}
    .vacancie-btn button, .vacancie-contact a {font-size: 18px;}
    .vacancie-contact span {font-size: 14px; opacity: 1;}
    .vacancie-btn > * {height: 83px; padding: 15px;}
    .vacancie-list {gap: 10px;}
    .portfolio .tags {margin-bottom: 10px;}
    .add-review-info ul {font-size: 20px;}
    .add-review .form textarea {height: 146px;}
    .add-review-block > div {padding: 30px 25px;}
    .title-row {margin-bottom: 20px;}
    .details-blk p {max-width: 100%;}
    .details-blk.yandex:after {top: 25px; right: 25px;}
    .details-blk .details-company {text-align: left;}
    .details-blk span.text-blue {max-width: 500px;}
    .details-blk {padding: 35px 25px;}
    .project-page-info ul li {padding: 30px 0;}
    .card-images {gap: 10px;}
    .card-description {min-height: 593px;}
    .card-tehnic .lines li {font-size: 14px;}
    .card-images .cardSwiper img {height: 100%;}
    .article-block p {font-size: 20px; width: 100%;}
    .article-info {padding: 16px 17px; gap: 20px;}
    .article-tag {font-size: 12px; margin: 0;}
    .article-info .article-title, .article-info .article-date {font-size: 14px; margin: 0;}
    .article-info p {font-size: 12px;}
    .post-title {gap: 10px;}
    .post-date {font-size: 14px;}
    .post-title .bold {margin: 20px 0 10px;}
    .post, .post-title .bold, .toc h3, .post h3, .post p {font-size: 20px;}
    .post-image img {border-radius: 0;}
    section.toc {padding: 40px 0;}
    .post-block {gap: 60px;}
    .nav-btn, .cart-btn {width: 50px; height: 50px;}
    .catalog-content .equipment-info p {font-size: 20px;}
    .examples-block.line-block {padding: 34px 0 10px;}
    .remove-btn {padding: 0 0 1px;}
    .check-list-block {margin-bottom: 20px;}
}

@media (max-width: 767px) {
    .btn {padding: 13.5px 15px; font-size: 14px;}
    .btn-lg {padding: 18.5px 15px;}
    .cart-btn {display: none;}
    header .logo {padding: 6px; width: 80px; height: 50px; display: flex; align-items: center; justify-content: center;}
    /* header .logo img {width: 100%;} */
    header .logo img {height: 28px;}
    .tel-link {font-size: 16px;}
    .email-link {font-size: 15px;}
    .container, .container-sm {max-width: 100%; padding: 0 20px;}
    .nav-btn {width: 50px; height: 50px; padding: 15px;}
    .services .row {flex-wrap: nowrap; overflow: auto; -ms-overflow-style: none; scrollbar-width: none;}
    .services .row::-webkit-scrollbar {display: none;}
    .services .row > div {max-width: 282px;}
    h1, h2 {font-size: 32px;}
    h3, .offer-info p {font-size: 16px;}
    .proposal-block {gap: 20px;}
    .proposal-block:after {content: none;}
    .proposal-block h2 {font-size: 28px; max-width: 100%;}
    .proposal-block {padding: 30px 20px 35px;}
    .proposal-block button {max-width: 100%; gap: 10px;}
    .sertificates .tab-content {padding: 40px 30px;}
    .text-big p {font-size: 16px;}
    .examples-block {padding-top: 27px;}
    .reviews h2 {max-width: 315px;}
    .kp .form {padding: 26px;}
    .form form {display: flex; flex-direction: column; gap: 15px;}
    .form .row {margin-bottom: 0; gap: 15px; --bs-gutter-y: 0; --bs-gutter-x: 0;}
    .form .row.col-check {gap: 15px;}
    .form .row > div {margin: 0;}
    .form .row.col-check {margin: 0;}
    .form .form-check {margin: 0;}
    .kp-title p {max-width: 100%; font-size: 16px;}
    h2.title {margin-bottom: 20px;}
    .kp .form {margin-top: 20px;}
    .questionnaires-block {margin-top: 40px;}
    .answer-block p {font-size: 20px;}
    .data-row {font-size: 16px; gap: 15px; flex-direction: column; align-items: flex-start;}
    .data-value {text-align: left;}
    .data-row .flex {width: 100%;}
    .download-section button {margin-top: 30px;}
    .check-list h5 {font-size: 16px; margin-bottom: 10px; font-weight: 400;}
    .check-list {padding: 20px 20px 30px;}
    .about-company-block p {font-size: 20px; display: none;}
    .about-company-block p.show-mobile {display: block;}
    .policy-block p {font-size: 20px; display: none;}
    .policy-block p.show-mobile {display: block;}
    .toggle-text-btn {font-size: 14px; color: var(--blue); border: none; background: none; display: flex; align-items: center; gap: 10px;}
    .toggle-text-btn:after {content: ""; background: url(../img/check.svg) no-repeat; width: 12px; height: 6px; transition: all linear 0.2s;}
    .toggle-text-btn.active:after {transform: rotate(180deg);}
    .cart-item .cart-image {flex: 1;}
    .cart-image img {width: 70px;}
    .product-title, .product-description p {font-size: 12px;}
    .cart-item .cart-info, .total-amount {flex: 3;}
    .vacancie-list ul, .modal-title {max-width: 100%;}
    .portfolio .tags .city {
        font-size: 12px; 
        /* border-radius: 40px; */
    }
    .review-blk span.company-name {font-size: 16px;}
    .review-blk {padding: 20px;}
    .project-page-image {height: 250px;}
    .project-page-info ul li {padding: 20px 0;}
    .casesSwiper img {border-radius: 20px 20px 0 0;}
    .casesSwiper2 img {border-radius: 0 0 5px 5px;}
    .lines li:after, .lines li:first-child:before {background: repeating-linear-gradient(to right, rgba(33, 33, 33, 0.5) 0 5px, transparent 5px 10px);}
    .btn-more:after {height: 18px;}
    .download-section button:after {height: 16px;}
    .catalog-content .equipment-info p {font-size: 16px;}
    .catalog-content .equipment-info {gap: 20px;}
    .card-description {min-height: 100%;}
    .card-flex {gap: 12px; margin-bottom: 34px;}
    .calc .check-list h5 {font-weight: 500; font-size: 17px; margin-bottom: 0;}
    .calc .check-list {padding: 35px;}
    .calc .checkbox-item label, .check-blk button {font-size: 14px;}
    .check-list textarea {height: auto;}
    .check-list-total p.calc-total-price {font-size: 24px; max-width: 365px;}
    .check-list-total {padding: 40px 30px;}
}

@media (min-width: 576px) {
    .swiper-pag .swiper-pagination-progressbar {display: none;}
}

@media (max-width: 575px) {
    .container, .container-sm {padding: 0 18px;}
    body {font-size: 14px;}
    .header--fixed .contacts, .header--fixed .btn-calc {display: none;}
    .header--fixed .header-block {padding: 10px 0;}
    .contact-blk {flex-direction: column; gap: 10px;}
    .contact-item {width: 100%;}
    .contact-item {gap: 10px;}
    .catalog-list a, .company-list a, .contact-section button {font-size: 14px;}
    footer .messengers {flex-direction: column; margin-bottom: 30px;}
    .contact-section {margin: 30px 0;}
    .bottom-section {justify-content: center;}
    .flogo {text-align: center; flex-direction: column; gap: 20px;}
    footer {padding-bottom: 80px;}
    .contact-blk p {max-width: 320px;}
    .contact-section {padding: 15px;}
    .header-block {flex-wrap: wrap;}
    header .messengers {order: 2; margin-left: auto;}
    .button-blk {order: 3;}
    .contacts {order: 4; width: 100%; flex-direction: row; justify-content: space-between; margin: 20px 0 10px;}
    .messengers li a, .nav-btn {width: 40px; height: 40px;}
    .nav-btn {margin-left: 20px; background-size: 15px;}
    .tel-link {font-size: 15px;}
    .btn-calc {max-width: 100%; width: 100%; height: 40px;}
    section {padding: 30px 0;}
    .reviews-page.lightblue {padding-bottom: 60px;}
    section.grey {padding: 30px 0; margin: 30px 0;}
    section.pt {padding-top: 60px;}
    .title-row .swiper-btn {display: none;}
    .equipment-block {gap: 60px;}
    .sertificates .accordion-button {font-size: 16px;}
    .sertificates h2 {max-width: 400px;}
    .projectsSwiper .swiper-slide {width: 280px;}
    .examples-block button {gap: 10px;}
    .examples-block img {width: 100%;}
    .about-btn {flex-direction: column;}
    .about-info p {font-size: 18px;}
    .about-info span.info-text {font-size: 16px; margin-top: 40px;}
    .about-info .btn {font-weight: 500;}
    .about-btn a {font-size: 16px; padding: 25px 20px;}
    .about-images {margin: 0 -18px;}
    .about-images .aboutSwiper {width: calc(100% - 36px);}
    .reviews .swiper-slide {width: 210px;}    
    .review-blk {padding: 25px 15px; gap: 10px;}
    .review-blk span.company-name {font-size: 14px; word-break: break-word;}
    .review-blk p, .review-blk span.date {font-size: 12px;}
    .review-blk .place {width: 35px; height: 35px;}
    .review-blk .place.google, .review-blk .place.gis, .review-blk .place.yandex {background-size: 14px;}
    .questionnaires-blk span {font-size: 16px;}
    .questionnaires-blk span, .questionnaires-blk a {font-size: 14px;}
    .form textarea {height: 107px; padding: 15px 20px; font-size: 14px; line-height: 115%;}
    .form .form-check {font-size: 12px;}
    section.breadcrumbs {margin: 0 0 -15px; padding: 30px 0 0;}
    .contacts-blk {height: 113px; align-items: center; justify-content: center; gap: 15px;}
    .contacts-blk p {max-width: 180px;}
    .contacts-page .row {--bs-gutter-x: 20px; --bs-gutter-y: 20px;}
    .cart-item:first-child:before, .cart-item:after {background: repeating-linear-gradient(to right, rgba(33, 33, 33, 0.5) 0 5px, transparent 5px 10px);}
    .cart-item {padding: 20px 0; flex-direction: column; gap: 15px; justify-content: flex-start; align-items: flex-start;}
    .remove-btn {position: absolute; right: 0; top: 26px;}
    .cart-image img {width: 100px;}
    .product-title, .quantity-input, .price {font-size: 18px;}
    .product-description p {font-size: 14px;}
    .total-section {flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    .total-section p, .total-amount {order: 2; font-size: 24px;}
    .text-muted {order: 1; text-align: left; margin: 0 0 5px;}
    .total-section p {margin-bottom: 5px;}
    .vacancies-blk {padding: 18px 16px; gap: 20px;}
    .vacancie-title {font-size: 20px;}
    .vacancie {gap: 20px; flex-direction: column;}
    .vacancie-item {width: 100%; font-size: 16px;}
    .vacancie-icon {width: 34px; height: 34px;}
    .vacancie-list ul li {font-size: 14px;}
    .vacancie-list {margin-bottom: 10px;}
    .vacancie-btn {flex-direction: column; gap: 10px;}
    .vacancie-btn > * {min-height: 83px;}
    .vacancie-btn button, .vacancie-contact a {font-size: 16px;}
    .vacancie-contact span {font-size: 20px; font-weight: 600;}
    .vacancie-contact {align-items: center;}
    .vacancie-contact a {font-weight: 500;}
    .vacancies-block {gap: 20px;}
    .vacancie-more {font-size: 18px;}
    .modal-content {padding: 50px 22px;}
    .modal-title {font-size: 20px;}
    #vacancieModal .form-check {margin-top: 30px;}
    .modal-body button, .add-review-info ul, .add-review-info p {font-size: 14px;}
    .add-review .form textarea {height: 133px;}
    .details-blk h5 {font-size: 14px;}
    .details-blk {gap: 20px;}
    .details-blk span.text-blue {font-size: 20px;}
    .details-blk p {font-size: 14px;}
    .details-blk .details-company {font-size: 16px;}
    .details-blk.yandex:after {width: 37px; height: 37px; top: auto; bottom: 17px; right: 13px; background-size: 16px;}
    .project-page-image {flex-direction: column; gap: 10px; height: 100%;}
    .casesSwiper2 {width: 100%;}
    .project-page-info ul li, .project-page-info ul li span {font-size: 14px;}
    .card-tehnic .lines li {text-align: right;}
    .card-tehnic .lines li span {width: 100%; max-width: 180px; text-align: left;}
    .card-description {padding: 12px 16px;}
    .card-description span {font-size: 20px;}
    .custom-number {width: 70px; height: 50px;}
    .custom-number input {font-size: 14px; width: 20px;}
    .custom-number button {background-size: 5px; width: 5px; height: 3px;}
    .card-flex {gap: 12px;}
    .card-description p {font-size: 14px;}
    .card-btn button.icon1:after {background-size: 13px;}
    .card-btn button.icon2:after {background-size: 11px;}
    .add-cart {gap: 5px;}
    .add-cart:after {background-size: 14px;}
    .article-block p {font-size: 16px; font-weight: 400;}
    .article-info {padding: 20px; gap: 10px;}
    .article-tag {margin-bottom: 10px;}
    .article-tag, .article-info p {font-size: 14px;}
    .article-info .article-title {font-size: 20px;}
    .article-info .article-date {margin: 20px 0 5px;}
    .article-btn button {font-size: 18px;}
    .article-page p:not(.bold), .post p, .post p:not(.bold) {font-size: 14px; opacity: 1;}
    .post-image img {border-radius: 20px; min-height: 313px; object-fit: cover; object-position: 35%;}
    .toc-block {padding: 30px 20px;}
    .toc-block h3 {text-align: center;}
    .post {font-size: 14px;}
    .post-blk ul, blockquote {opacity: 1;}
    blockquote {border-left: none; padding-left: 0;}
    blockquote:before {content: ""; width: 53px; height: 5px; background: var(--blue); display: block; margin-bottom: 10px;}
    .post-blk-row {margin-bottom: 0;}
    .equipment .swiper-slide {width: 283px;}
    .sort-block {gap: 50px;}
    .category .equipment-image img {height: auto;}
    .filtr-modal {width: 45px; min-width: 45px; height: 45px;}
    .card-btn button {font-size: 12px; padding: 6px;}
    .check-list-total button {width: 100%; padding: 13.5px 10px;}
}

@media (max-width: 374px) {
    .contact-blk a, .contact-blk p {font-size: 20px;}
    .contact-blk p {max-width: 280px;}
    .proposal-block h2 {font-size: 26px;}
    .proposal-block button {font-size: 13px;}
    .sertificates .accordion-button {padding: 23.5px 10px;}
    .add-cart {padding: 13.5px 5px;}
    .custom-number {width: 60px;}
}

.readSwiper .swiper-wrapper {
    align-items: stretch;
}
.readSwiper .swiper-slide {
    height: auto;
    display: flex;
}