/*@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Light.eot');
    src: url('../fonts/HelveticaNeueCyr-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/HelveticaNeueCyr-Light.woff2') format('woff2'),
    url('../fonts/HelveticaNeueCyr-Light.woff') format('woff'),
    url('../fonts/HelveticaNeueCyr-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Medium.eot');
    src: url('../fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/HelveticaNeueCyr-Medium.woff2') format('woff2'),
    url('../fonts/HelveticaNeueCyr-Medium.woff') format('woff'),
    url('../fonts/HelveticaNeueCyr-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
*/
html, body {
    overscroll-behavior: none;
    overscroll-behavior-x: none;
}

:root,
[data-bs-theme=light] {
    --color-bg: #F9F9F9;
    --color-text: #2C2C2C;
    --color-text2: #2E2A27;
    --color-text3: #FFFFFF;
    --color-bg2: #2C2C2C;
    --bs-body-bg: #FFFFFF;
    --border-bg: #D7D7D7;
    --border-bg2: #D1D1D14D;
}

[data-bs-theme=dark] {
    --color-bg: #2C2C2C;
    --color-text: #FFFFFF;
    --color-text2: #FFFFFF;
    --color-text3: #2E2A27;
    --color-bg2: #FFFFFF;
    --bs-body-bg: #2C2C2C;
    --border-bg: #414141;
    --border-bg2: #414141;
}

.accordion {
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 10px;
    --bs-accordion-btn-padding-y: 20px;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%232C2C2C' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --bs-accordion-btn-icon-width: 30px;
    --bs-accordion-btn-icon-transform: rotate(-90deg);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%23FFFFFF' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x: 10px;
    --bs-accordion-body-padding-y: 10px;
    --bs-accordion-active-color: var(--color-text);
    --bs-accordion-active-bg: transparent;
}

[data-bs-theme=dark] .accordion {
    --bs-accordion-active-color: #FFFFFF;
}

.accordion-button:not(.collapsed) {

    box-shadow: none;
}

.accordion-button {
    font-weight: 550;
    font-size: 17px;
    line-height: 110%;
    color: var(--color-text);
}

[data-bs-theme=dark] .accordion-button {
    color: #FFFFFF;
}

.accordion-button::after {
    background-color: var(--border-bg);
    border-radius: 8px;
    background-position: center center;
    background-size: unset;
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    background-color: var(--color-text);
}

[data-bs-theme=dark] .accordion-button:not(.collapsed)::after {
    background-color: #FFFFFF;
}

[data-bs-theme="dark"] .accordion-button::after {
    background-color: #414141;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%23FFFFFF' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%232C2C2C' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.accordion-item {
    background-color: transparent;
}

.accordion-button {
    background-color: transparent;
}

@media (min-width: 768px) {
    .accordion {
        --bs-accordion-border-radius: 0;
        --bs-accordion-inner-border-radius: 0;
        --bs-accordion-btn-padding-x: 20px;
        --bs-accordion-btn-padding-y: 30px;
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%232C2C2C' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        --bs-accordion-btn-icon-width: 40px;
        --bs-accordion-btn-icon-transform: rotate(-90deg);
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%23FFFFFF' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        --bs-accordion-btn-focus-box-shadow: none;
        --bs-accordion-body-padding-x: 20px;
        --bs-accordion-body-padding-y: 10px;
        --bs-accordion-active-color: var(--color-text);
        --bs-accordion-active-bg: transparent;
    }

    .accordion-button {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .accordion {
        --bs-accordion-border-radius: 0;
        --bs-accordion-inner-border-radius: 0;
        --bs-accordion-btn-padding-x: 30px;
        --bs-accordion-btn-padding-y: 30px;
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%232C2C2C' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        --bs-accordion-btn-icon-width: 40px;
        --bs-accordion-btn-icon-transform: rotate(-90deg);
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.16667L13.8333 5.16667M13.8333 5.16667L9.6228 0.5M13.8333 5.16667L9.6228 9.83333' stroke='%23FFFFFF' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        --bs-accordion-btn-focus-box-shadow: none;
        --bs-accordion-body-padding-x: 30px;
        --bs-accordion-body-padding-y: 10px;
        --bs-accordion-active-color: var(--color-text);
        --bs-accordion-active-bg: transparent;

    }

    .accordion-item {
        border-right: 0 !important;
        border-left: 0 !important;

    }

    .accordion-button {

        padding: var(--bs-accordion-btn-padding-y) 0px var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 100%;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1500px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .container > .row {
        --bs-gutter-x: 40px;
        --bs-gutter-y: 0;
    }

    .container > .row > * {
        --bs-gutter-x: 40px;
    }
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

.btn {
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    font-weight: 400;
    font-size: 15px;
    line-height: 130%;
    text-align: center;
    color: #FFFFFF;
    padding: 13px 20px;
    display: inline-block;
    border-radius: 10px;
    text-decoration: none;
    transition: none !important;
}

.btn:hover {
    background: #A8683D;
    background-color: #A8683D;
    color: #FFFFFF;
}

.btn-check:checked + .btn,
.btn.active, .btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {

    background: #835434;
    background-color: #835434;
    color: #FFFFFF;
    transition: none !important;
    border-color: #835434;
}


.btn2 {
    background: #E9E9E980;
    font-weight: 400;
    font-size: 15px;
    line-height: 130%;
    text-align: center;
    color: #2E2A27;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: none !important;
    text-decoration: none;
    gap: 7px;
}

.btn2:hover {
    background: #A8683D;
    background-color: #A8683D;
    color: #FFFFFF;
}

.btn2:hover svg path {
    fill: #FFFFFF;
}

.btn3 {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px #27252308;
    border: 0;
    font-weight: 500;
    font-size: 17px;
    line-height: 130%;
    color: #2E2A27;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    transition: none !important;
    text-decoration: none;
    /* iOS: kill blue tap flash, neutralise default native styling, suppress
       300ms tap delay / double-tap zoom. */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.btn3:hover {
    background: #A8683D;
    background-color: #A8683D;
    color: #FFFFFF;
}

.btn3:hover svg path {
    fill: #FFFFFF;
}

.language-top ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.fiximage {
    position: relative;
    overflow: hidden;
}

.fiximage > img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100% !important;
    object-position: center;
    object-fit: cover;
    z-index: 1;
}

[data-bs-theme="light"] .logo_dark {
    display: none;
}

[data-bs-theme="light"] .logo_light {
    display: block;
}

[data-bs-theme="dark"] .logo_dark {
    display: block;
}

[data-bs-theme="dark"] .logo_light {
    display: none;
}

[data-bs-theme="light"] .logo_dark {
    display: none;
}

[data-bs-theme="light"] .logo_light {
    display: block;
}

[data-bs-theme="dark"] .logo_dark {
    display: none;
}

[data-bs-theme="dark"] .logo_light {
    display: block;
}

/* Hide the unused theme-toggle icon from first paint based on the theme
   attribute (set synchronously in <head>). JS still toggles inline style on
   click, which takes precedence over these rules. */
[data-bs-theme="light"] .theme-toggle__icon svg:nth-of-type(2) {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle__icon svg:nth-of-type(1) {
    display: none;
}

.nav-active .logo_light {
    display: none !important;
}

.nav-active .logo_dark {
    display: block !important;
}


/*header*/
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.3s ease;
    z-index: 9999;
    height: 60px;

}

body.scrolled header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E4E4E4;
    height: 60px !important;
}

body.scrolled header .logo_light {
    display: none !important;
}

body.scrolled header .logo_dark {
    display: block !important;
}

/*mainmenu*/
.nav {
    display: none;
    background: #FFFFFF;
}

.nav-active .nav {
    display: block;
}

.nav-link {
    padding: 0 25px;
}

.nav-active .mega-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.nav-active .nav-link {
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    text-decoration: none;
    color: #303030;
    padding: 0;

}

.nav-active .mega-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-active .mega-menu > li.megamenu > div.sub-menus .sub-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 10px 0;
}

.nav-active .mega-menu ul a {
    text-decoration: none
}

.nav-active .mega-menu > li.megamenu > div.sub-menus .sub-menu .children {
    display: grid;
    grid-template-columns: 1fr 1fr  1fr;
    gap: 15px;
    margin: 10px;

}

.nav-active .mega-menu > li.megamenu a.item {
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    text-decoration: none;
    color: #303030;

}


.header-nav {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: #FFFFFF1A;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    order: 2;
}

body.scrolled .header-nav {
    background: #A8683D;
}

.header-nav i,
.header-nav i:after,
.header-nav i:before {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 18px;
    height: 2px;
    display: block;
    background: #FFFFFF;
    border-radius: 3px;
    transition: all 0.3s linear;
}

.header-nav i {
    margin: -1px 0 0 0;
}

.header-nav i:after {
    width: 18px;
    content: "";
    top: -8px;
    left: 0;
}

.header-nav i:before {
    width: 18px;
    content: "";
    top: -8px;
    left: 0;
}

.header-nav i:after {
    top: 8px;
}

.nav-active {
    background: #FFFFFF;
    border-bottom: 1px solid #E4E4E4;
}

.nav-active .header-nav {
    background: #A8683D;
    border: 0;
}

.nav-active .header-nav i {
    background: transparent;
}

.nav-active .header-nav i:after, .nav-active .header-nav i:before {
    top: 0;
    background: #FFFFFF;
}

.nav-active .header-nav i:after {
    transform: rotate(-45deg);
}

.nav-active .header-nav i:before {
    transform: rotate(45deg);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    padding: 10px 0;
}

body.scrolled .header-top {
    padding: 10px 0 !important;
}

.logo-top {
    order: 1;
}

.menu-top {
    order: 3;
}

.custom-logo-link img {
    height: 31px;
    width: auto;
}


/* ========================
   LENIS SMOOTH SCROLL
   Required CSS so Lenis can hijack the wheel without breaking layout.
======================== */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}


/* ========================
   SCROLL REVEAL ANIMATIONS
   IntersectionObserver in JS toggles .is-revealed when element enters view.
======================== */
[data-reveal] {
    --reveal-distance: 28px;
    --reveal-duration: 1600ms;
    --reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --reveal-stagger-step: 90ms;
    --reveal-base-delay: 60ms;
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    will-change: opacity, transform;
}

/* Use a keyframe animation rather than transition so that elements which
   already declare their own `transition` (like .hero-accordion-label) don't
   have it overwritten by data-reveal. Animation runs once with `forwards` to
   pin the end state. */
@keyframes revealFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, var(--reveal-distance), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

[data-reveal].is-revealed {
    animation: revealFadeUp var(--reveal-duration) var(--reveal-easing) calc(var(--reveal-base-delay) + var(--reveal-i, 0) * var(--reveal-stagger-step)) forwards;
}

/* If JS is disabled or IO unsupported, the .reveal-ready class is never added
   and elements stay visible (graceful no-JS fallback handled in JS). */
html:not(.reveal-ready) [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/**/
.hero-wrapper {
    position: relative;
    height: 600px;
    overflow: hidden;
    margin-left: -12px;
    margin-right: -12px;
    /* Shared timing tokens for hero motion. Same ease-out-quart-style easing
       across bg and accordion so everything reads as one coherent gesture.
       Opacity matches the accordion grid duration so the row finishes growing
       at the same instant the body finishes fading in — no late settling. */
    --hero-bg-duration: 2200ms;
    --hero-bg-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --hero-accordion-duration: 1350ms;
    --hero-accordion-opacity-duration: 1350ms;
    --hero-accordion-content-duration: 700ms;
    --hero-accordion-content-delay: 360ms;
    --hero-accordion-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    --hero-overlay: linear-gradient(185.14deg, rgba(0, 0, 0, 0.4) 4.13%, rgba(0, 0, 0, 0) 50.07%),
    linear-gradient(269.58deg, rgba(0, 0, 0, 0) 36.32%, rgba(0, 0, 0, 0.5) 85.52%),
    linear-gradient(276.99deg, rgba(0, 0, 0, 0.4) 4.19%, rgba(0, 0, 0, 0) 56.17%);
}

/* Two stacked layers: current image stays visible while next crossfades over it */
.hero-bg-current,
.hero-bg-next {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity var(--hero-bg-duration) var(--hero-bg-easing);
}

.hero-bg-current {
    opacity: 1;
}

.hero-bg-next {
    opacity: 0;
}

/* During fade: current dims out, next layer reveals */
.hero-bg.is-fading .hero-bg-current {
    opacity: 0;
}

.hero-bg.is-fading .hero-bg-next {
    opacity: 1;
}

/* Single overlay on the wrapper rather than per-layer — a per-layer overlay
   would compound while both layers cross-fade and produce a visible flash. */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--hero-overlay);
    z-index: 1;
}

/* Block label clicks while a transition is in flight to avoid radio/bg desync */
.hero-bg.is-fading ~ .hero-desktop .hero-accordion-label {
    pointer-events: none;
}

/* Desktop layout */
.hero-desktop {
    display: none;
    position: relative;
    z-index: 10;
    height: 800px;
    align-items: center;
    padding: 0 20px 70px;
}

@media (min-width: 768px) {
    .hero-desktop {
        display: flex;
    }

    .hero-mobile {
        display: none !important;
    }
}

/* Glass card panel — accordion as a 16-row grid (8 items × {label, body}).
   Each body track is 0fr by default; the active item's body track grows to
   1fr. Animating grid-template-rows interpolates the fr values, so the sum
   of fr stays at 1 and the card height changes smoothly between tab swaps
   instead of collapsing to zero and re-expanding. */
.hero-accordion {
    list-style: none;
    width: 450px;
    background: #41414166;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    padding: 24px;
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
        auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)
        auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr);
    transition: grid-template-rows var(--hero-accordion-duration) var(--hero-accordion-easing);
    position: relative;
}

/* Items become layout-transparent so label and body land directly in the grid */
.hero-accordion-item {
    display: contents;
}

/* Pin label N to row 2N-1 and body N to row 2N (supports up to 8 items). */
.hero-accordion-item:nth-child(1) > .hero-accordion-label {
    grid-row: 1;
}

.hero-accordion-item:nth-child(1) > .hero-accordion-body {
    grid-row: 2;
}

.hero-accordion-item:nth-child(2) > .hero-accordion-label {
    grid-row: 3;
}

.hero-accordion-item:nth-child(2) > .hero-accordion-body {
    grid-row: 4;
}

.hero-accordion-item:nth-child(3) > .hero-accordion-label {
    grid-row: 5;
}

.hero-accordion-item:nth-child(3) > .hero-accordion-body {
    grid-row: 6;
}

.hero-accordion-item:nth-child(4) > .hero-accordion-label {
    grid-row: 7;
}

.hero-accordion-item:nth-child(4) > .hero-accordion-body {
    grid-row: 8;
}

.hero-accordion-item:nth-child(5) > .hero-accordion-label {
    grid-row: 9;
}

.hero-accordion-item:nth-child(5) > .hero-accordion-body {
    grid-row: 10;
}

.hero-accordion-item:nth-child(6) > .hero-accordion-label {
    grid-row: 11;
}

.hero-accordion-item:nth-child(6) > .hero-accordion-body {
    grid-row: 12;
}

.hero-accordion-item:nth-child(7) > .hero-accordion-label {
    grid-row: 13;
}

.hero-accordion-item:nth-child(7) > .hero-accordion-body {
    grid-row: 14;
}

.hero-accordion-item:nth-child(8) > .hero-accordion-label {
    grid-row: 15;
}

.hero-accordion-item:nth-child(8) > .hero-accordion-body {
    grid-row: 16;
}

/* Switch the body track to 1fr based on which item is currently :checked.
   Empty body rows (no item N in DOM) keep their 0fr default and take 0 px. */
.hero-accordion:has(.hero-accordion-item:nth-child(1) input:checked) {
    grid-template-rows: auto minmax(0, 1fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr);
}

.hero-accordion:has(.hero-accordion-item:nth-child(2) input:checked) {
    grid-template-rows: auto minmax(0, 0fr)  auto minmax(0, 1fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr);
}

.hero-accordion:has(.hero-accordion-item:nth-child(3) input:checked) {
    grid-template-rows: auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 1fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr);
}

.hero-accordion:has(.hero-accordion-item:nth-child(4) input:checked) {
    grid-template-rows: auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 1fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr);
}

.hero-accordion:has(.hero-accordion-item:nth-child(5) input:checked) {
    grid-template-rows: auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 1fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr);
}

.hero-accordion:has(.hero-accordion-item:nth-child(6) input:checked) {
    grid-template-rows: auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 1fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr);
}

.hero-accordion:has(.hero-accordion-item:nth-child(7) input:checked) {
    grid-template-rows: auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 1fr)  auto minmax(0, 0fr);
}

.hero-accordion:has(.hero-accordion-item:nth-child(8) input:checked) {
    grid-template-rows: auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 0fr)  auto minmax(0, 1fr);
}

/* Hidden radio — keep keyboard-focusable but invisible and pointer-inert */
.hero-accordion-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Row label. Padding stays constant in both states so label height never
   changes during transitions — only color and border-color animate. */
.hero-accordion-label {
    display: block;
    cursor: pointer;
    color: #FFFFFF80;
    font-weight: 550;
    font-size: 17px;
    line-height: 110%;
    user-select: none;
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #FFFFFF33;
    transition: color var(--hero-accordion-duration) var(--hero-accordion-easing),
    border-color var(--hero-accordion-duration) var(--hero-accordion-easing);
}

/* First label sits flush with the card's own padding-top */
.hero-accordion-item:nth-child(1) > .hero-accordion-label {
    padding-top: 0;
}

.hero-accordion-label:hover {
    color: rgba(255, 255, 255, 0.8);
}

.hero-accordion-item input:checked ~ .hero-accordion-label {
    color: #FFFFFF;
    border-bottom-color: transparent;
}

.hero-accordion-item:last-child .hero-accordion-label {
    border-bottom-color: transparent;
    padding-bottom: 0;
}

/* Body sits in its own grid track right under its label. overflow: hidden
   keeps the contents clipped while the row is at 0fr (collapsed).
   min-height/min-width 0 disable the default grid-item min-content floor
   that would otherwise expand the row to one line of body text.
   Padding and margin are CONSTANT in both states — they don't transition,
   so content position stays fixed relative to the row. The grid track
   sizing alone reveals/hides the body. */
.hero-accordion-body {
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding-top: 4px;
    padding-bottom: 24px;
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
    transition: opacity var(--hero-accordion-opacity-duration) var(--hero-accordion-easing),
    visibility 0s linear var(--hero-accordion-opacity-duration),
    border-color var(--hero-accordion-duration) var(--hero-accordion-easing);
}

.hero-accordion-item input:checked ~ .hero-accordion-body {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-bottom-color: #FFFFFF33;
    transition: opacity var(--hero-accordion-opacity-duration) var(--hero-accordion-easing),
    visibility 0s linear 0s,
    border-color var(--hero-accordion-duration) var(--hero-accordion-easing);
}

.hero-accordion-item:last-child .hero-accordion-body,
.hero-accordion-item:last-child input:checked ~ .hero-accordion-body {
    border-bottom-color: transparent;
    margin-bottom: 0;
}

/* Optional bonus: content inside the body fades up with a small delay so it
   reads as "settling in" after the row has started opening. */
.hero-accordion-body p,
.hero-accordion-body a {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--hero-accordion-content-duration) var(--hero-accordion-easing),
    transform var(--hero-accordion-content-duration) var(--hero-accordion-easing);
}

.hero-accordion-item input:checked ~ .hero-accordion-body p,
.hero-accordion-item input:checked ~ .hero-accordion-body a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--hero-accordion-content-delay);
}

@media (prefers-reduced-motion: reduce) {
    .hero-accordion,
    .hero-accordion-body,
    .hero-accordion-body p,
    .hero-accordion-body a,
    .hero-accordion-label,
    .hero-bg-current,
    .hero-bg-next {
        transition: none !important;
    }
}


.hero-accordion-body p {
    font-weight: 300;
    font-size: 15px;
    line-height: 130%;
    margin-bottom: 21px;
    color: #FFFFFF;

}

.hero-accordion-body a {
    display: inline-block;
    padding: 15px 23px;
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 400;
    font-size: 15px;
    line-height: 130%;
    text-align: center;
    color: #ffffff;
}

.hero-accordion-body a:hover {

}

@keyframes fadeSlide {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================
   MOBILE LAYOUT (Swiper)
======================== */
.hero-mobile {
    position: relative;
    z-index: 10;
    height: 600px;
}

.hero-slider {
    /* width: 100%;*/
    height: 100%;
}

.hero-slider .swiper-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0px 10px 60px;
    overflow: hidden;
}

.swiper-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.swiper-slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(185.14deg, rgba(0, 0, 0, 0.4) 4.13%, rgba(0, 0, 0, 0) 50.07%),
    linear-gradient(269.58deg, rgba(0, 0, 0, 0) 36.32%, rgba(0, 0, 0, 0.5) 85.52%),
    linear-gradient(276.99deg, rgba(0, 0, 0, 0.4) 4.19%, rgba(0, 0, 0, 0) 56.17%);

}

.swiper-slide-inner {
    position: relative;
    z-index: 2;
}

.swiper-slide-inner h2 {
    font-weight: 550;
    font-size: 26px;
    line-height: 110%;
    margin-bottom: 14px;
    color: #ffffff;
}

.swiper-slide-inner p {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    margin-bottom: 21px;
    color: #ffffff;
}

.swiper-slide-inner a {
    display: inline-block;
    padding: 15px 23px;
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 400;
    font-size: 15px;
    line-height: 130%;
    text-align: center;
    color: #ffffff;
}

@media (min-width: 768px) {
    .hero-wrapper {
        height: 800px;
    }
}

@media (min-width: 992px) {
    .hero-wrapper {
        height: 100vh;
    }

    .hero-accordion {
        width: 600px;
        padding: 34px;
    }

    .hero-accordion-label {
        font-size: 20px;
        padding-bottom: 18px;
    }

    .hero-accordion-body p {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .hero-accordion-body a {
        padding: 17px 43px;
        font-size: 17px;
    }

    .hero-accordion-body {
        padding-top: 6px;
        padding-bottom: 30px;
    }

    .hero-desktop {
        padding: 0 0px 100px;
        padding-left: calc((100% - 1478px) / 2);
        height: 100vh;
    }
}

.soczialnimerezhi-top a img {
    width: 16px;
    height: auto;
}

@media (max-width: 991px) {
    .menu-top {
        position: fixed;
        top: 60px;
        right: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 200;
        overflow-y: auto;
        max-height: calc(100dvh - 60px);
        list-style: none;
        padding-bottom: 42px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;

    }

    .menu-top.open {
        opacity: 1;
        visibility: visible;
    }

    .nav {
        list-style: none;
        margin: 0;
        padding: 5px 10px 16px;
        width: 100%;
        overflow: hidden;
        grid-column: span 3;
        order: 1;
    }

    .nav > .menu-item {
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);
        position: relative;
    }

    .nav > .menu-item:last-child {
        border-bottom: none;
    }

    .nav > .menu-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0px;
        text-decoration: none;
        font-weight: 400;
        font-size: 17px;
        line-height: 130%;
        transition: background 0.15s;
        color: #2C2C2C;
    }

    /* Стрелка для пунктов с подменю */
    .nav > .menu-item-has-children > a::after {
        content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%232C2C2C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        display: inline-block;
        transition: transform 0.2s;
    }

    .nav > .menu-item-has-children.open > a::after {
        transform: rotate(90deg);
    }

    /* Подменю */
    .nav .sub-menu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav .menu-item-has-children.open > .sub-menu {
        display: block;
    }


    .nav .sub-menu .menu-item a {
        display: block;
        padding: 8px 0px;
        text-decoration: none;
        font-weight: 300;
        font-size: 15px;
        line-height: 130%;
        color: #2C2C2C;

        transition: background 0.15s;
    }

    .soczialnimerezhi-top {
        order: 2;
        display: flex;
        gap: 15px;
        padding: 0 10px;
    }

    .soczialnimerezhi-top a {
        background: #2C2C2C1A;
        backdrop-filter: blur(10px);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .soczialnimerezhi-top a img {
        filter: brightness(0);
    }

    .soczialnimerezhi-top a:hover {
        background: #FFFFFF;
    }

    .soczialnimerezhi-top a:hover img {
        filter: brightness(0) saturate(100%) invert(13%) sepia(1%) saturate(0%) hue-rotate(116deg) brightness(93%) contrast(83%);
    }

    .theme-toggle {
        order: 3;
        background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
        backdrop-filter: blur(10px);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        box-shadow: none;
    }

    .theme-toggle svg path {
        fill: #ffffff;
    }

    .language-top {
        order: 4;
        margin-left: auto;
        margin-right: 10px;
        padding-top: 11px;
    }

    .language-top a {
        font-weight: 300;
        font-size: 17px;
        line-height: 130%;
        color: #2C2C2C;
        text-decoration: none;
        text-transform: capitalize;
    }

}

@media (min-width: 768px) {
    .header-nav {
        order: 4;
    }

    .soczialnimerezhi-top {
        margin-left: auto;
        padding: 0;
        margin-right: 10px;
        gap: 10px;
    }

    .header-top {
        padding: 20px 0;
    }

    .soczialnimerezhi-top a {
        background: #FFFFFF1A;
    }

    .soczialnimerezhi-top a img {
        filter: brightness(0) invert(1);
    }

    .theme-toggle {
        margin-right: 30px;
        background: #FFFFFF;
    }

    .theme-toggle svg path {
        fill: #2E2A27;
    }

    .nav-active .theme-toggle,
    .nav-active .soczialnimerezhi-top {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    header {
        height: 80px;
    }

    .menu-top {
        top: 80px;
        max-height: calc(100dvh - 80px);
    }

    .language-top {
        grid-column: span 3;
        margin-left: 10px;
        margin-right: unset;
    }

    body.scrolled .language-top a {
        color: var(--color-text) !important;

    }

    body.scrolled .soczialnimerezhi-top a {
        background: #2C2C2C1A !important;
    }

    body.scrolled .soczialnimerezhi-top a img {
        filter: brightness(0);
    }

    body.scrolled .soczialnimerezhi-top a:hover {
        background: #A8683D !important;
    }

    body.scrolled .soczialnimerezhi-top a:hover img {
        filter: brightness(0) invert(1);
    }

    body.scrolled .theme-toggle {
        background: #2C2C2C;
    }

    body.scrolled .theme-toggle svg path {
        fill: #FFFFFF;

    }
}

@media (min-width: 992px) {
    .header-nav {
        display: none;
    }

    .header-top {
        padding: 22px 0;
    }

    .soczialnimerezhi-top {
        order: 4;
        display: flex;
        gap: 10px;
        padding: 0;
    }

    .soczialnimerezhi-top a {
        background: #FFFFFF1A;
        backdrop-filter: blur(10px);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.25s ease;
    }

    .soczialnimerezhi-top a:hover {
        background: #A8683D;
    }

    .soczialnimerezhi-top a:hover img {
        filter: brightness(0) invert(1);
    }

    .nav {
        display: flex;
        background: transparent;
    }

    .menu-top {
        order: 2;
    }

    .language-top {
        order: 3;
        margin-left: auto;
        margin-right: 15px;
    }

    .language-top a {
        font-weight: 300;
        font-size: 15px;
        line-height: 130%;
        color: #FFFFFF;
        text-decoration: none;
        text-transform: uppercase;
    }

    .theme-toggle {
        order: 4;
        background: #FFFFFF;
        backdrop-filter: blur(10px);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        box-shadow: none;
        flex-shrink: 0;
        margin-right: 0;
    }

    .menu-top {
        max-height: unset;
        width: 100%;
    }

    .menu-top .nav {
        display: flex;
        align-items: center;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 50px;
    }

    .menu-top .nav > li {
        position: relative;
    }

    .menu-top .nav > li > a {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 11px 0px;
        font-weight: 300;
        font-size: 15px;
        line-height: 130%;
        text-decoration: none;
        color: #FFFFFF;
        white-space: nowrap;
    }

    body.scrolled .menu-top .nav > li > a {
        color: #2C2C2C;
    }

    .menu-top .nav > li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.2s;
    }

    body.scrolled .menu-top .nav > li.menu-item-has-children > a::after {

        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%232C2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .menu-top .nav > li.menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }

    .menu-top .nav .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border-radius: 10px;
        list-style: none;
        padding: 20px;
        min-width: 190px;
        z-index: 100;
        flex-direction: column;
        gap: 11px;
    }

    .menu-top .nav > li:hover > .sub-menu {
        display: flex;
    }

    .menu-top .nav .sub-menu li a {
        display: block;
        padding: 0px 0px;
        color: #2C2C2C;
        text-decoration: none;
        font-weight: 400;
        font-size: 15px;
        line-height: 130%;
    }

}


/*accordion-section*/
.accordion-section {
    padding: 60px 0 100px;
}

.zagolovok-bloka {
    font-weight: 300;
    font-size: 12px;
    line-height: 120%;
    margin-bottom: 20px;
    color: var(--color-text);

}

.zagolovok-bloka::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-text);
    margin-right: 8px;
    display: inline-block;
}

.accordion-section .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-text);
    margin-bottom: 16px;
}

.accordion-section .accordion {
    margin-left: -13px;
    margin-right: -13px;
}

@media (min-width: 768px) {
    .accordion-section {
        padding: 70px 0;
    }

    .zagolovok-bloka {
        font-size: 14px;
        margin-bottom: 28px;
    }

    .zagolovok-bloka::before {
        content: "";
        width: 10px;
        height: 10px;
    }

    .accordion-section .title-block {
        font-size: 30px;
        margin-bottom: 30px;
    }

}

@media (min-width: 992px) {
    .accordion-section {
        padding: 0;
    }

    .accordion-section .col-12 {
        display: grid;
        grid-template-columns: 250px calc(100% - 250px);
    }

    .accordion-section .col-12.has-image {
        grid-template-columns:  1.1fr 0.9fr;
        gap: 50px;
    }

    body.home .accordion-section .col-12.has-image {
        grid-template-columns: 250px 1.1fr 0.9fr;
        gap: 50px;
    }

    .accordion-section .col-12.has-image .accordion::after {
        content: none !important;
    }

    .accordion-section .zagolovok-bloka {
        border-right: 1px solid var(--border-bg);
        padding-top: 100px;
        margin-bottom: 0px;
    }

    .accordion-section .bloks {
        padding-top: 100px;
    }

    .accordion-section .zobrazhennya {
        margin: 100px 0;
        border-radius: 20px;
    }

    .accordion-section .accordion {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 100px;
        position: relative;
    }

    .accordion-section .title-block {
        font-size: 44px;
        padding-left: 30px;
    }

    .accordion-section .accordion:after {
        content: "";
        height: 1px;
        background-color: var(--border-bg);
        position: absolute;
        top: 0;
        right: -50%;
        width: 50%;
    }

}


/*footer*/
footer {

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    background: linear-gradient(rgba(46, 42, 39, 0.6), rgba(46, 42, 39, 0.6)),
    url("../images/footer_bg.png") center / cover no-repeat;
}

.footer-block {
    display: flex;
    flex-direction: column;
    margin-left: -12px;
    margin-right: -12px;
    padding-top: 55px;
    justify-content: space-between;
}

.footer-left {
    order: 1;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.footer-left .soczialnimerezhi {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 30px 0;
    align-items: center;
}

.footer-right {
    order: 2;
    padding: 0 10px;

}

.footer-center {
    order: 3;
    grid-column: span 2;
    background: #FFFFFF1A;
    backdrop-filter: blur(4px);
    padding: 30px 10px 23px;
}

.footer-block .title {
    font-weight: 300;
    font-size: 13px;
    line-height: 110%;
    color: #FFFFFFB2;
    margin-bottom: 10px;
}

.footer-block .text {
    font-weight: 550;
    font-size: 20px;
    line-height: 110%;
    color: #FFFFFF;
}

.footer-block .text a {
    color: #FFFFFF;
    text-decoration: none;
}

.soczialnimerezhi-footer {
    display: flex;
    gap: 15px;
    align-items: center;
}

.soczialnimerezhi-footer a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EBE2D31A;
    backdrop-filter: blur(10px)
}

.soczialnimerezhi-footer a img {
    filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(1072%) hue-rotate(315deg) brightness(108%) contrast(84%);
}

.soczialnimerezhi-footer a:hover {
    background: #FFFFFF;
}

.soczialnimerezhi-footer a:hover img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(1%) saturate(0%) hue-rotate(116deg) brightness(93%) contrast(83%);
}

.footer-right .text2 {
    font-weight: 300;
    font-size: 13px;
    line-height: 140%;
    color: #FFFFFFE5;
    margin-top: 20px;
}

.footer-right .btn {
    width: 100%;
    margin: 30px 0;
}

.footer-center .copyright {
    font-weight: 300;
    font-size: 11px;
    line-height: 110%;
    text-align: right;
    color: #FFFFFFB2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-center .maps {
    border-radius: 10px;
    height: 340px;
    overflow: hidden;
    margin: 20px 0 15px;
}

@media (min-width: 768px) {
    footer {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .footer-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-left: -12px;
        margin-right: -12px;
        padding-top: 70px;
        justify-content: space-between;
    }

    .footer-block .title {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .footer-block .text {
        font-size: 30px;
    }

    .footer-left {
        order: 1;
        padding: 0 20px;
        display: flex;
        gap: 30px;
        flex-direction: column;

    }

    .footer-left .soczialnimerezhi {
        display: flex;
        flex-direction: column;
        margin: 0;
        align-items: unset;
    }

    .soczialnimerezhi-footer a {
        width: 50px;
        height: 50px;
    }

    .soczialnimerezhi-footer {
        gap: 17px;
    }

    .footer-block .text {
        flex: 1;
        margin-top: auto;
    }

    .footer-right .form {
        height: 100%;
        display: flex;
        flex-direction: column;

    }

    .footer-right .text2 {

        font-size: 15px;

    }

    .footer-right .btn {

        margin: 30px 0 0;
    }

    .footer-center {
        margin-top: 50px;
        padding: 50px 20px;
    }

    .footer-center .copyright {
        font-size: 15px;
    }

    .footer-center .maps {
        height: 412px;
        margin: 20px 0 30px;
    }
}

@media (min-width: 992px) {

    .footer-block {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 0px;
        justify-content: space-between;
        gap: 50px;
    }

    .footer-left {
        order: 1;
        gap: 50px;
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .footer-center {
        order: 2;
        grid-column: span 1;
        margin-top: 0px;
        padding: 84px 50px 40px;
    }

    .footer-right {
        order: 3;
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .footer-block .title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-block .text {
        font-size: 35px;
    }

    .footer-center .maps {
        margin: 26px 0 0px;
    }

    .copyright {
        font-weight: 300;
        font-size: 17px;
        line-height: 110%;
        color: #FFFFFFB2;
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: auto;
    }

    footer {

        background-position: top -280px center;
    }
}

/*telform-section*/
.telform-section {
    background: linear-gradient(rgba(46, 42, 39, 0.6), rgba(46, 42, 39, 0.6)),
    url("../images/telform_bg.png") top center / cover no-repeat;
    padding: 50px 0;
}

.telform-section.white-bg {
    background: transparent;
}

.tel-form-message {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

.tel-form-message.success {
    background-color: #e6f4ea;
    color: #2d7a3a;
    border: 1px solid #b7dfc0;
}

.tel-form-message.error {
    background-color: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6c2;
}

.tel-submit.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

.telform-block .title-block {

    font-weight: 550;
    font-size: 26px;
    line-height: 130%;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.telform-section.white-bg .telform-block .title-block {
    color: var(--color-text);
}

.telform-block .text-block {
    font-weight: 300;
    font-size: 13px;
    line-height: 140%;
    color: #FFFFFF;
    margin-bottom: 20px;

}

.telform-section.white-bg .telform-block .text-block {
    color: var(--color-text);
}

.telform-maps-block {
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 30px;
    position: relative;
}

.telform-maps-block:after {
    content: "";
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: linear-gradient(143.54deg, rgba(0, 0, 0, 0) 21.24%, rgba(0, 0, 0, 0.7) 90.6%);

}

.telform-block .tel-submit {
    width: 100%;
    margin-top: 10px;
}

.telform-block .tel-form {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.telform-section.white-bg .telform-block .tel-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.telform-section.white-bg .telform-block .tel-form input:nth-of-type(n+3),
.telform-section.white-bg .telform-block .tel-form textarea,
.telform-section.white-bg .telform-block .tel-form .categories-title,
.telform-section.white-bg .telform-block .tel-form .categories-checkboxes,
.telform-section.white-bg .telform-block .tel-form button {
    grid-column: span 2;
}

.telform-block .tel-form .tel-field {
    background: #FFFFFF1A;
    border: 1px solid #FFFFFF33;
    backdrop-filter: blur(7px);
    border-radius: 10px;
    width: 100%;
    box-shadow: none;
    padding: 16px 19px;
    color: #FFFFFF99;
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    height: 50px;
    outline: none;
}

.telform-section.white-bg .telform-block .tel-form .tel-field {
    border: 1px solid #E4E4E4;
    background: #E4E4E44D;
    color: var(--color-text);

}

.telform-section.white-bg .categories-title {
    font-weight: 300;
    font-size: 15px;
    line-height: 120%;
    vertical-align: bottom;
    color: var(--color-text);
    margin-bottom: 2px;
    margin-top: 8px;
}

.form-control:focus,
input:focus,
.form-check-input:focus,
.telform-block .tel-form .tel-field:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid #A8683D;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.categories-checkboxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 10px;
}

.checkbox-label {
    font-weight: 300;
    font-size: 15px;
    line-height: 130%;
    color: var(--color-text2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input {
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    height: 20px;
    width: 20px;
    margin-top: 0;
    cursor: pointer;
}

.checkbox-label a {
    font-weight: 300;
    font-size: 15px;
    line-height: 130%;
    color: var(--color-text2);
    text-decoration: none;
}

.form-check-input:checked {
    background-color: #A8683D;
    border-color: #A8683D;
}

.select-wrapper {
    position: relative;
}

.select-trigger {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: border-color 0.2s, background 0.2s;
}

.select-trigger.has-value {
    color: rgba(255, 255, 255, 0.9);
}

.select-trigger:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.11);
}

.select-trigger.open {
    border-color: rgba(255, 255, 255, 0.3);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select-trigger svg {
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.select-trigger.open svg {
    transform: rotate(180deg);
}

.select-trigger.error {
    border-color: rgba(220, 80, 60, 0.7);
}

.select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2e231e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
    z-index: 100;
}

.select-option {
    padding: 13px 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s;
}

.select-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
}

.select-option.selected {
    color: #c87941;
}

.select-option + .select-option {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


@media (min-width: 768px) {
    .telform-section {
        padding: 70px 0;
    }

    .telform-maps-block {
        height: 400px;
        margin-top: 50px;
    }

    .telform-block .title-block {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .telform-block .text-block {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .telform-block .tel-form {
        gap: 10px;
    }

    .telform-block .tel-form .tel-field {
        padding: 19px;
        font-size: 15px;
        height: 60px;
    }

    .telform-block .tel-form textarea.tel-field {
        height: 80px;
        resize: none;
    }

    .telform-section.white-bg .categories-title,
    .telform-section .categories-title {
        font-size: 17px;
        font-weight: 500;
    }
}

@media (min-width: 992px) {

    .telform-block {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 0px 50px;
    }

    .title-block {
        grid-column: 1;
        grid-row: 1;
    }

    .text-block {
        grid-column: 1;
        grid-row: 2;
    }

    .tel-form-message {
        grid-column: 1;
        grid-row: 3;
    }

    .tel-form {
        grid-column: 1;
        grid-row: 4;
    }

    .telform-info {
        grid-column: 2;
        grid-row: 1 / 5;
    }

    .telform-block .title-block {
        font-size: 44px;
        margin-bottom: 20px;
    }

    .telform-block .text-block {
        font-size: 17px;
    }

    .telform-maps-block {
        height: 100%;
        margin-top: 0px;
    }

    .telform-section {
        background-position: center center;
        padding: 100px 0;
    }

    .telform-block .tel-submit {
        margin-top: 20px;
    }
}

/*vyrobnycztvo-section*/
.vyrobnycztvo-section {
    padding-top: 70px;
}

.vyrobnycztvo-section .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-text);
    margin-bottom: 16px;
}

.vyrobnycztvo-items {
    border-top: 1px solid var(--border-bg);
    margin-right: -12px;
    margin-left: -12px;

}

.vyrobnycztvo-item {
    border-bottom: 1px solid var(--border-bg);
    padding: 0 10px 20px;

}

.vyrobnycztvo-items .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #A8683D;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.vyrobnycztvo-items .icon img {
    width: 20px;
    height: auto;

}

.vyrobnycztvo-items .title {

    font-weight: 550;
    font-size: 17px;
    line-height: 120%;
    margin-bottom: 15px;
    color: var(--color-text2);
}

.vyrobnycztvo-items .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
}

@media (min-width: 768px) {
    .vyrobnycztvo-section {
        padding-top: 80px;
    }

    .vyrobnycztvo-section .title-block {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .vyrobnycztvo-items {
        border-top: 1px solid var(--border-bg);
        border-bottom: 1px solid var(--border-bg);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .vyrobnycztvo-item {
        border-right: 1px solid var(--border-bg);
        border-bottom: 0;
        padding: 0 20px 40px 20px;
    }

    .vyrobnycztvo-item:last-child {
        border-right: 0;
    }

    .vyrobnycztvo-items .icon {
        width: 40px;
        height: 40px;
        margin: 30px 0;
    }

    .vyrobnycztvo-items .title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .vyrobnycztvo-items .text {
        font-size: 15px;
    }
}

@media (min-width: 992px) {


    .vyrobnycztvo-section {
        padding: 0;
        border-bottom: 1px solid var(--border-bg);
    }

    .vyrobnycztvo-section .col-12 {
        display: grid;
        grid-template-columns: 250px calc(100% - 250px);
    }

    .vyrobnycztvo-section .zagolovok-bloka {
        border-right: 1px solid var(--border-bg);
        padding-top: 100px;
        margin-bottom: 0px;
    }

    .vyrobnycztvo-section .bloks {
        padding-top: 100px;
    }

    .vyrobnycztvo-items {
        border-top: 1px solid var(--border-bg);
        border-bottom: 0;
        margin-right: 0px;
        margin-left: 0px;
        position: relative;
    }

    .vyrobnycztvo-section .title-block {
        font-size: 44px;
        padding-left: 30px;
    }

    .vyrobnycztvo-items::after {
        content: "";
        height: 1px;
        background-color: var(--border-bg);
        position: absolute;
        top: -1px;
        right: -50%;
        width: 50%;
    }

    .vyrobnycztvo-items .icon {
        width: 60px;
        height: 60px;
        margin: 30px 0;
    }

    .vyrobnycztvo-items .icon img {
        width: 35px;
        height: auto;
    }

    .vyrobnycztvo-item {
        padding: 0 30px 70px 30px;
    }

    .vyrobnycztvo-items .title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .vyrobnycztvo-items .text {
        font-size: 17px;
    }

}

/**/
.kategorykatalog-section {
    padding: 70px 0;
}

.kategorykatalog-section .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-text);
    margin-bottom: 20px;
}

/* Typed custom properties so the gradient stop and alpha can be smoothly
   interpolated by the browser (background shorthand transitions do not). */
@property --kk-grad-start {
    syntax: '<percentage>';
    initial-value: 71.6%;
    inherits: true;
}
@property --kk-grad-alpha {
    syntax: '<number>';
    initial-value: 0.7;
    inherits: true;
}

.kategorykatalog-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) var(--kk-grad-start),
    rgba(0, 0, 0, var(--kk-grad-alpha)) 96.3%);
    z-index: 1;
}

.kategorykatalog-item {
    --kk-grad-start: 71.6%;
    --kk-grad-alpha: 0.7;
    transition: --kk-grad-start 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
    --kk-grad-alpha 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.kategorykatalog-item:hover {
    --kk-grad-start: 60%;
    --kk-grad-alpha: 0.9;
}

.kategorykatalog-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 340px;
}

.kategorykatalog-item .title {
    position: absolute;
    font-weight: 550;
    font-size: 17px;
    line-height: 130%;
    color: #FFFFFF;
    left: 20px;
    bottom: 24px;
    z-index: 2;
}

.kategorykatalog-item::before {
    content: '';
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1725 13.661C8.0901 13.7434 7.98511 13.7995 7.87081 13.8223C7.7565 13.845 7.63802 13.8333 7.53035 13.7887C7.42268 13.7441 7.33065 13.6686 7.26592 13.5717C7.20118 13.4748 7.16664 13.3608 7.16667 13.2443V10.5001C7.16667 10.2791 7.07887 10.0672 6.92259 9.91087C6.76631 9.75459 6.55435 9.66679 6.33333 9.66679H1.33333C1.11232 9.66679 0.900358 9.579 0.744078 9.42271C0.587798 9.26643 0.5 9.05447 0.5 8.83346V5.50013C0.5 5.27911 0.587798 5.06715 0.744078 4.91087C0.900358 4.75459 1.11232 4.66679 1.33333 4.66679H6.33333C6.55435 4.66679 6.76631 4.579 6.92259 4.42271C7.07887 4.26643 7.16667 4.05447 7.16667 3.83346V1.08929C7.16664 0.972748 7.20118 0.858814 7.26592 0.761903C7.33065 0.664992 7.42268 0.589458 7.53035 0.544855C7.63802 0.500252 7.7565 0.488584 7.87081 0.511328C7.98511 0.534071 8.0901 0.590204 8.1725 0.672626L13.9558 6.45596C14.0492 6.54936 14.1233 6.66024 14.1739 6.78228C14.2244 6.90432 14.2505 7.03512 14.2505 7.16721C14.2505 7.2993 14.2244 7.4301 14.1739 7.55214C14.1233 7.67417 14.0492 7.78506 13.9558 7.87846L8.1725 13.661Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    background-color: rgba(23, 23, 23, 0.23);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 100ms;
}

.kategorykatalog-item:hover::before {
    transform: translateX(8px);
}

@media (min-width: 768px) {
    .kategorykatalog-section {
        padding-top: 100px;
    }

    .kategorykatalog-section .title-block {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .kategorykatalog-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .kategorykatalog-item {
        height: 400px;
    }

    .kategorykatalog-item .title {
        font-size: 20px;
        left: 25px;
        bottom: 33px;
    }

    .kategorykatalog-item::before {
        content: '';
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.707 16.2932C9.60812 16.3921 9.48214 16.4594 9.34497 16.4867C9.20781 16.514 9.06563 16.5 8.93642 16.4465C8.80722 16.393 8.69679 16.3023 8.6191 16.186C8.54142 16.0697 8.49997 15.933 8.5 15.7932V12.5002C8.5 12.2349 8.39464 11.9806 8.20711 11.793C8.01957 11.6055 7.76522 11.5002 7.5 11.5002H1.5C1.23478 11.5002 0.98043 11.3948 0.792893 11.2073C0.605357 11.0197 0.5 10.7654 0.5 10.5002V6.50015C0.5 6.23493 0.605357 5.98058 0.792893 5.79304C0.98043 5.60551 1.23478 5.50015 1.5 5.50015H7.5C7.76522 5.50015 8.01957 5.39479 8.20711 5.20726C8.39464 5.01972 8.5 4.76537 8.5 4.50015V1.20715C8.49997 1.0673 8.54142 0.930577 8.6191 0.814284C8.69679 0.697991 8.80722 0.60735 8.93642 0.553826C9.06563 0.500302 9.20781 0.486301 9.34497 0.513593C9.48214 0.540886 9.60812 0.608245 9.707 0.707151L16.647 7.64715C16.7591 7.75923 16.848 7.89229 16.9087 8.03874C16.9693 8.18518 17.0005 8.34214 17.0005 8.50065C17.0005 8.65916 16.9693 8.81612 16.9087 8.96257C16.848 9.10901 16.7591 9.24207 16.647 9.35415L9.707 16.2932Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }
}

@media (min-width: 992px) {
    .kategorykatalog-section {
        padding-top: 70px;
    }

    .kategorykatalog-section .title-block {
        font-size: 46px;
    }

    .kategorykatalog-items {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    /* Exactly 3 category tiles → stretch across the full container (3 cols).
       4+ tiles keep the default 4-column width. */
    .kategorykatalog-items.kk-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .kategorykatalog-item {
        height: 500px;
    }
}

.uslugiuslugi-section {
    padding-top: 70px;
    padding-bottom: 0px;
}

.uslugiuslugi-section .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-text);
    margin-bottom: 20px;
}

.uslugiuslugi-items {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.uslugiuslugi-item {
    position: relative;
    border-radius: 10px;
    height: 220px;
    overflow: hidden;
}

/* Subtle hover: image gently zooms, the plate lifts a few px and a thin
   bronze underline grows under the title. */
.uslugiuslugi-item > img {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uslugiuslugi-item:hover > img {
    transform: scale(1.03);
}

.uslugiuslugi-item .tit-block {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    background: rgba(46, 42, 39, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-radius: 10px;
    padding: 15px;
    max-width: 290px;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 400ms ease,
    backdrop-filter 400ms ease,
    -webkit-backdrop-filter 400ms ease,
    box-shadow 400ms ease;
}

.uslugiuslugi-item:hover .tit-block {
    transform: translateY(-5px);
    background-color: rgba(46, 42, 39, 0.35);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.uslugiuslugi-item .tit-block .title {
    position: relative;
    font-weight: 550;
    font-size: 17px;
    line-height: 110%;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
    transition: color 400ms ease;
}

.uslugiuslugi-item:hover .tit-block .title {
    color: rgba(255, 255, 255, 1);
}

.uslugiuslugi-item .tit-block .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .uslugiuslugi-section {
        padding-top: 80px;
        padding-bottom: 0px;
    }

    .uslugiuslugi-section .title-block {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .uslugiuslugi-item {
        height: 400px;
    }

    .uslugiuslugi-item .tit-block {
        left: 25px;
        bottom: 25px;
        padding: 20px;
        max-width: max-content;
    }

    .uslugiuslugi-item .tit-block .title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .uslugiuslugi-item .tit-block .text {
        font-size: 15px;
    }
}

@media (min-width: 992px) {
    .uslugiuslugi-section .col-12 {
        display: grid;
        grid-template-columns: 250px calc(100% - 250px);
    }

    .uslugiuslugi-section .zagolovok-bloka {
        border-right: 1px solid var(--border-bg);
        padding-top: 120px;
        margin-bottom: 0px;

    }

    .uslugiuslugi-section .bloks {
        padding-top: 120px;
        padding-bottom: 0px;
    }

    .uslugiuslugi-section .title-block {
        font-size: 44px;
        padding-left: 30px;
        margin-bottom: 0;
        padding-bottom: 30px;
        position: relative;
        border-bottom: 1px solid var(--border-bg);
    }

    .uslugiuslugi-section {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 30px;
    }

    .uslugiuslugi-section .title-block::after {
        content: "";
        height: 1px;
        background-color: var(--border-bg);
        position: absolute;
        bottom: -1px;
        right: -50%;
        width: 50%;
    }

    .uslugiuslugi-items {
        margin-left: -250px;
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

    }

    .uslugiuslugi-item {
        height: 600px;
    }

    .uslugiuslugi-item .tit-block {
        left: 20px;
        bottom: 20px;
        padding: 23px;
    }

    .uslugiuslugi-item .tit-block .title {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .uslugiuslugi-item .tit-block .text {
        font-size: 17px;
    }
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: #FFFFFF !important;

}

.swiper-button-prev:hover svg path,
.swiper-button-next:hover svg path {
    fill: var(--color-text2);

}

/**/
.proektyprojekty-section {
    background: var(--color-text2);
    padding: 60px 0;
}

[data-bs-theme="dark"] .proektyprojekty-section {
    background: transparent;
}


.proektyprojekty-section .zagolovok-bloka {
    color: #FFFFFF;
}

.proektyprojekty-section .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 120%;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.proektyprojekty-section .zagolovok-bloka::before {
    content: "";
    background: #FFFFFF;
}

.proektyprojekty-section .text-block {
    font-weight: 300;
    font-size: 13px;
    line-height: 120%;
    color: #FFFFFFE5;
    margin-bottom: 25px;
}

.proektyprojekty-item {
    height: 400px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;

}

.proektyprojekty-item .day-img {
    opacity: 1;
    transition: opacity 0.6s ease;
}

.proektyprojekty-item .night-img {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.proektyprojekty-item[data-mode="night"] .day-img {
    opacity: 0;
}

.proektyprojekty-item[data-mode="night"] .night-img {
    opacity: 1;
}

.toggle-day-night {
    flex-shrink: 0;
    background: #A8683D;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    cursor: pointer;
    transition: background 0.3s;
}

.proektyprojekty-item[data-mode="night"] .toggle-day-night {
    background: #FFFFFF;

}

.toggle-day-night:hover {

}

.proektyprojekty-item[data-mode="day"] .icon-night,
.proektyprojekty-item[data-mode="day"] .night-label {
    display: none;
}

.proektyprojekty-item[data-mode="night"] .icon-day,
.proektyprojekty-item[data-mode="night"] .day-label {
    display: none;
}

.proektyprojekty-item .txtblok {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(177.35deg, rgba(23, 23, 23, 0) 2.4%, rgba(23, 23, 23, 0.6) 97.99%);
    height: 122px;
    display: flex;
    gap: 15px;
    align-items: end;
    padding: 20px;
    z-index: 3;
}

.proektyprojekty-item .item-title {
    font-weight: 300;
    font-size: 13px;
    line-height: 120%;
    text-align: right;
    color: #FFFFFF;

}

.proektyprojekty-item .txtblok svg {
    width: 14px;
    height: auto;

}

.proektyprojekty-items {
    padding-bottom: 80px;
}

.proektyprojekty-section .bloks .swiper-button-prev {
    margin-top: unset;
    bottom: 0px;
    top: unset;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(46, 42, 39, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    left: calc(50% - 48px);
}

.proektyprojekty-section .bloks .swiper-button-next {
    margin-top: unset;
    bottom: 0px;
    top: unset;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(46, 42, 39, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    right: calc(50% - 48px);

}

.proektyprojekty-section .bloks .swiper-button-next svg,
.proektyprojekty-section .bloks .swiper-button-prev svg {
    width: 20px;
    height: auto;
}

.proektyprojekty-section .more-all {
    margin: 40px auto 0px;
    display: block;
}

.proektyprojekty-section .bloks {
    position: relative;
}

@media (min-width: 768px) {
    .proektyprojekty-section {
        padding: 70px 0;
    }

    .proektyprojekty-section .title-block {
        font-size: 30px;
        margin-bottom: 20px;
        width: calc(100% - 120px);
    }

    .proektyprojekty-section .text-block {
        font-size: 15px;
        margin-bottom: 30px;
        width: calc(100% - 120px);
    }

    .proektyprojekty-item {
        height: 750px;
    }

    .proektyprojekty-section .bloks .swiper-button-prev {
        bottom: unset;
        top: 0px;
        left: calc(100% - 100px);

    }

    .proektyprojekty-section .bloks .swiper-button-next {
        bottom: unset;
        top: 0px;
        left: unset;
        right: 0;
    }

    .proektyprojekty-items {
        padding-bottom: 0px;
    }

    .proektyprojekty-item .txtblok {
        height: 322px;
        gap: 30px;
        align-items: end;
        justify-content: end;

    }

    .proektyprojekty-item .item-title {
        font-size: 15px;
        min-width: 200px;
        width: min-content;
    }

    .toggle-day-night {
        height: 40px;
        width: 40px;
    }

    .proektyprojekty-item .txtblok svg {
        width: 18px;
        height: auto;
    }
}

@media (min-width: 992px) {
    .proektyprojekty-section {
        padding: 0;
        padding-bottom: 100px;
    }

    .proektyprojekty-section .bloks {
        padding-top: 100px;
        padding-bottom: 0px;
    }

    .proektyprojekty-section .col-12 {
        display: grid;
        grid-template-columns: 250px calc(100% - 250px);
    }

    .proektyprojekty-section .zagolovok-bloka {
        border-right: 1px solid var(--border-bg2);
        padding-top: 100px;
        margin-bottom: 0px;
    }

    .proektyprojekty-section .title-block {
        font-size: 44px;
        margin-bottom: 28px;
        width: calc(100% - 120px);
        padding-left: 30px;
    }

    .proektyprojekty-section .text-block {
        font-size: 17px;
        padding-left: 30px;
        margin-bottom: 0;
        padding-bottom: 34px;
        position: relative;
        border-bottom: 1px solid var(--border-bg2);
    }

    .proektyprojekty-section .text-block::after {
        content: "";
        height: 1px;
        background-color: var(--border-bg2);
        position: absolute;
        bottom: -1px;
        right: -50%;
        width: 50%;
    }

    .proektyprojekty-section .zagolovok-bloka::before {
        content: "";
        background: #ffffff;
    }

    .proektyprojekty-items {
        margin-left: -250px;
        margin-top: 40px;
    }

    .proektyprojekty-section .bloks .swiper-button-prev,
    .proektyprojekty-section .bloks .swiper-button-next {
        top: 100px;

    }

    .proektyprojekty-section .more-all {
        grid-column: span 2;
        margin-top: 50px;
    }

    .toggle-day-night {
        height: 50px;
        width: 50px;
    }

    .proektyprojekty-item .txtblok svg {
        width: 26px;
        height: auto;
    }
}

/**/
.opinionsparalax-section {
    overflow: hidden;
    /* margin-left: -12px;
     margin-right: -12px;*/
}

.paralax-wrapper {
    height: 500px;
    overflow: hidden;
    margin-left: -12px;
    margin-right: -12px;
}

.paralax-img {
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
}


.opinionopinions-section {
    padding: 60px 0 50px;
}

.opinionopinions-section .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-text);
    margin-bottom: 15px;
}

.opinionopinions-section .text-block {
    font-weight: 300;
    font-size: 13px;
    line-height: 110%;
    color: var(--color-text);
    margin-bottom: 25px;
}

.opinionopinions-items {
    padding-bottom: 80px;
}

.opinionopinions-item {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px #27252308;
    padding: 20px;
    border-radius: 10px;
}

[data-bs-theme="dark"] .opinionopinions-item {
    background: #FFFFFF0D;
    box-shadow: 0px 0px 10px 0px #27252308;

}

[data-bs-theme="light"] .opinionopinions-section {
    background-color: #F9F9F9;
}

.opinionopinions-section .bloks {
    position: relative;
}

.opinionopinions-section .swiper-button-prev {
    margin-top: unset;
    bottom: 0px;
    top: unset;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(46, 42, 39, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    left: calc(50% - 48px);
}

.opinionopinions-section .swiper-button-next {
    margin-top: unset;
    bottom: 0px;
    top: unset;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(46, 42, 39, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    right: calc(50% - 48px);

}

.opinionopinions-section .swiper-button-next svg,
.opinionopinions-section .swiper-button-prev svg {
    width: 20px;
    height: auto;
}

.opinionopinions-section .swiper-button-prev:hover, .opinionopinions-section .swiper-button-next:hover {
    background: var(--color-text2) !important;
}

.opinionopinions-section .swiper-button-prev:hover svg path, .opinionopinions-section .swiper-button-next:hover svg path {
    fill: #FFFFFF;
}

.opinionopinions-section .swiper-pagination1 {
    display: none;
}

.opinionopinions-item .txtblok {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    justify-content: space-between;

}

.opinionopinions-item .txtblok .tit {
    font-weight: 550;
    font-size: 15px;
    line-height: 120%;
    color: var(--color-text2);
}

.opinionopinions-item .txtblok .dolzhnost {
    font-weight: 300;
    font-size: 13px;
    line-height: 120%;
    text-align: right;
    color: var(--color-text2);
}

.opinionopinions-item .txtblok .txt {
    grid-column: span 2;
    font-weight: 300;
    font-style: italic;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
}

@media (min-width: 768px) {
    .opinionopinions-section {
        padding: 70px 0;
    }

    .opinionopinions-section .title-block {
        font-size: 30px;
        margin-bottom: 20px;
        width: calc(100% - 120px);
    }

    .opinionopinions-section .text-block {
        font-size: 15px;
        margin-bottom: 30px;
        width: calc(100% - 120px);
    }

    .opinionopinions-section .swiper-button-next {
        bottom: unset;
        top: 30px;
        left: unset;
        right: 0;
    }

    .opinionopinions-section .swiper-button-prev {
        bottom: unset;
        top: 30px;
        left: calc(100% - 100px);
    }

    .opinionopinions-section .swiper-pagination1 {
        position: absolute;
        display: block;
        font-weight: 400;
        font-size: 15px;
        line-height: 120%;
        text-align: right;
        color: var(--color-text2);
        bottom: unset;
        top: 0px;
        left: unset;
        right: 0;
    }

    .opinionopinions-item .txtblok .tit {
        font-size: 20px;
    }

    .opinionopinions-item .txtblok .dolzhnost {
        font-size: 17px;
    }

    .opinionopinions-item .txtblok .txt {

        font-size: 15px;

    }
}

@media (min-width: 992px) {
    .paralax-wrapper {
        height: 800px;
    }

    .opinionopinions-section {
        padding: 0px 0;
    }

    .opinionopinions-section .col-12 {
        display: grid;
        grid-template-columns: 250px calc(100% - 250px);
    }

    .opinionopinions-section .text-block::after {
        content: none;
    }

    body.home .opinionopinions-section .text-block::after {
        content: "";
        height: 1px;
        background-color: var(--border-bg2);
        position: absolute;
        bottom: -1px;
        right: -50%;
        width: 50%;
    }

    .opinionopinions-section .text-block {
        font-size: 17px;
        margin-bottom: 0;
        position: relative;
        border-bottom: 0;
    }

    body.home .opinionopinions-section .text-block {
        font-size: 17px;
        padding-left: 30px;
        margin-bottom: 0;
        padding-bottom: 34px;
        position: relative;
        border-bottom: 1px solid var(--border-bg);
    }

    .opinionopinions-section .zagolovok-bloka {
        border-right: 1px solid var(--border-bg);
        padding-top: 100px;
        margin-bottom: 0px;
        position: relative;
    }

    body.home .opinionopinions-section .title-block {
        font-size: 44px;
        margin-bottom: 28px;
        width: calc(100% - 120px);
        padding-left: 30px;
        padding-top: 100px;
    }

    .opinionopinions-items {
        margin-top: 30px;
        padding-top: 30px;
        margin-left: 0px;
        border-top: 1px solid #D7D7D7;
    }

    body.home .opinionopinions-items {
        margin-top: 30px;
        padding-top: 0;
        margin-left: 30px;
        border: 0;
    }

    body.home .opinionopinions-section .swiper-button-prev {
        margin-top: unset;
        bottom: 100px;
        top: unset;
        width: 60px;
        height: 60px;
        left: 0;
    }

    body.home .opinionopinions-section .swiper-button-next {
        margin-top: unset;
        bottom: 100px;
        top: unset;
        width: 60px;
        height: 60px;
        right: unset;
        left: 80px;
    }

    body.home .opinionopinions-section .swiper-pagination1 {
        display: block;
    }

    body.home .opinionopinions-section .swiper-pagination1 {
        font-size: 17px;
        text-align: left;
        bottom: 175px;
        top: unset;
        left: 0;
        right: unset;
    }

    [data-bs-theme="dark"] .opinionopinions-section .swiper-button-prev:hover,
    [data-bs-theme="dark"] .opinionopinions-section .swiper-button-next:hover {
        background: #FFFFFF !important;

    }

    [data-bs-theme="dark"] .opinionopinions-section .swiper-button-prev:hover svg path,
    [data-bs-theme="dark"] .opinionopinions-section .swiper-button-next:hover svg path {
        fill: var(--color-text2);

    }
}

/*breadcrumbs-section*/
.titles-section {

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.titles-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 270px;
    max-width: 270px;
    margin: 0 auto;
    padding-top: 20px;
}

.titles-block .titles {
    font-weight: 550;
    font-size: 26px;
    line-height: 130%;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.titles-block .texts {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    text-align: center;
    color: #FFFFFF;
}

.breadcrumbs-section {
    border-bottom: 1px solid #E4E4E4;
    padding: 14px 0;
    margin-bottom: 40px;
}

.breadcrumbs a {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
    text-decoration: none;
}

.breadcrumbs .current {

    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    text-align: center;
    color: var(--color-text2) 80;

}

.breadcrumbs .sep {
    margin: 0 11px;
}

.breadcrumbs .sep svg {
    width: 3.5px;
    height: auto;

}

.breadcrumbs .sep svg path {
    stroke: var(--color-text2);
}

@media (min-width: 768px) {
    .titles-block .titles {
        font-size: 30px;
    }

    .titles-block .texts {
        font-size: 15px;
    }

    .breadcrumbs-section {
        padding: 20px 0;
        margin-bottom: 50px;
    }

    .breadcrumbs .current,
    .breadcrumbs a {
        font-size: 15px;
    }

    .breadcrumbs .sep svg {
        width: 4px;
        height: auto;
    }

    .breadcrumbs .sep {
        margin: 0 14px;
    }
}

@media (min-width: 992px) {
    .titles-block {

        height: 340px;
        max-width: 700px;
        padding-top: 55px;
    }

    .titles-block .titles {
        font-size: 44px;
        margin-bottom: 20px;
    }

    .titles-block .texts {
        font-size: 17px;
    }

    .breadcrumbs-section {
        margin-bottom: 70px;
    }

    .breadcrumbs .sep svg {
        width: 6px;
        height: auto;
    }

    .breadcrumbs .sep {
        margin: 0 17px;
    }
}


/**/
.maps-section {
    margin-bottom: 70px;
}

.maps-section .maps {
    height: 340px;
    border-radius: 10px;
}

.maps-section .maps-info {
    list-style: none;
    width: 100%;
    background: var(--color-text);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    padding: 25px;
    margin-top: 20px;
}

.maps-section .maps-info .title {
    font-weight: 300;
    font-size: 13px;
    line-height: 110%;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.maps-section .maps-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.maps-section .maps-info .text a,
.maps-section .maps-info .text {
    font-weight: 550;
    font-size: 20px;
    line-height: 110%;
    color: #FFFFFF;
    text-decoration: none;
}

.maps-section .maps-info .robochi-godyny {
    display: flex;
    flex-direction: row;
    align-items: end;
}

.maps-section .maps-info .robochi-godyny .vremya,
.maps-section .maps-info .robochi-godyny .dny {
    font-weight: 300;
    font-size: 12px;
    line-height: 110%;
    color: #FFFFFF;
    margin-right: 15px;
}

.maps-section .maps-info .robochi-godyny .vremya span {
    font-weight: 550;
    font-size: 20px;
    line-height: 110%;
    color: #FFFFFF;
}

.maps-section .maps-info .soczialnimerezhi-footer a {
    backdrop-filter: blur(10px);
    background: #FFFFFF1A;
}

@media (min-width: 768px) {
    .maps-section {
        margin-bottom: 100px;
    }

    .contact-maps {
        position: relative;
    }

    .maps-section .maps {
        height: 600px;
        border-radius: 20px;
    }

    .maps-section .maps-info {
        background: #2B2B2B66;
        position: absolute;
        margin-top: 0;
        left: 20px;
        right: 70px;
        bottom: 20px;
        width: unset;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        gap: 30px;
    }

    .maps-section .maps-info .title {
        font-size: 15px;
    }

    .maps-section .maps-info .text a, .maps-section .maps-info .text {
        font-size: 26px;
    }

    .maps-section .maps-info .soczialnimerezhi-footer a {
        width: 60px;
        height: 60px;
    }

    .maps-section .maps-info .soczialnimerezhi-footer a img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(23deg) brightness(107%) contrast(99%);
    }

    .maps-section .maps-info .soczialnimerezhi-footer a:hover img {
        filter: brightness(0) saturate(100%) invert(12%) sepia(10%) saturate(620%) hue-rotate(343deg) brightness(99%) contrast(87%);
    }

    #tel-form-contact {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #tel-form-contact textarea,
    #tel-form-contact .btn,
    #tel-form-contact .select-wrapper {
        grid-column: span 2;
    }
}

@media (min-width: 992px) {
    .maps-section .maps {
        height: 700px;
    }

    .maps-section .maps-info {
        left: 30px;
        right: unset;
        bottom: 30px;
        width: 710px;
        padding: 40px;
    }

    .maps-section .maps-info .text a, .maps-section .maps-info .text {
        font-size: 30px;
    }

    .maps-section .maps-info .title {
        margin-bottom: 20px;
    }

    .maps-section .maps-info .robochi .text {
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .page-template .accordion-section .col-12:not(.has-image) {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/**/
.onas-section .infoblock {
    margin-bottom: 70px;
}

.onas-section .infoblock .title {
    font-weight: 550;
    font-size: 20px;
    line-height: 110%;
    margin-bottom: 20px;
}

.onas-section .infoblock .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    margin-bottom: 30px;
}

.onas-section .infoblock .title-count {
    font-weight: 550;
    font-size: 20px;
    line-height: 110%;
    margin-bottom: 20px;
}

.onas-section .infoblock .text-count {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.onas-section .infoblock .text-count .items {
    display: flex;
    flex-direction: column;
    gap: 5px 15px;
}

.onas-section .infoblock .text-count .kolychestvo {
    font-weight: 550;
    font-size: 40px;
    line-height: 110%;
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}

.onas-section .infoblock .text-count .opys {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
}

.onas-section .infoblock .image {
    height: 260px;
    border-radius: 10px;
}

.guides-section {
    background: var(--color-text2);
    padding: 50px 0;
}

.guides-section .title {
    font-weight: 550;
    font-size: 26px;
    line-height: 130%;
    margin-bottom: 25px;
    color: var(--color-text3);

}

.guides-section .items {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

.guides-section .zagolovok {
    font-weight: 550;
    font-size: 17px;
    line-height: 130%;
    margin-bottom: 10px;
    color: var(--color-text3);
}

.guides-section .opys {
    font-weight: 300;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text3);
}

.guides-section .number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    font-weight: 550;
    font-size: 15px;
    line-height: 130%;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.workers-section {
    padding: 80px 0 70px;
}

.workers-section .title {
    font-weight: 550;
    font-size: 26px;
    line-height: 110%;
    margin-bottom: 20px;
}

.workers-section .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    margin-bottom: 20px;
}

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

.workers-section .workers .image {
    height: 300px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.workers-section .workers .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

.workers-section .workers .iya {
    font-weight: 550;
    font-size: 15px;
    line-height: 110%;
}

.workers-section .workers .dolzhnost {
    font-weight: 300;
    font-size: 13px;
    line-height: 110%;
    text-align: right;
}

@media (min-width: 768px) {
    .onas-section .infoblock .title {
        font-size: 30px;
        margin-bottom: 24px;
    }

    .onas-section .infoblock .text {
        font-size: 15px;
        margin-bottom: 50px;
    }

    .onas-section .infoblock .title-count {
        font-size: 26px;
    }

    .onas-section .infoblock .text-count {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 50px;
        margin-bottom: 38px;
    }

    .onas-section .infoblock .image {
        height: 400px;
    }

    .guides-section .title {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .guides-section .number {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 17px;
        margin-bottom: 27px;
    }

    .guides-section .zagolovok {
        font-size: 22px;
    }

    .guides-section .opys {
        font-size: 17px;
    }

    .guides-section {
        padding: 70px 0;
    }

    .workers-section {
        padding: 70px 0;
    }

    .workers-section .title {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .workers-section .text {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .workers-section .workers {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 50px;
    }

    .workers-section .workers .iya {
        font-size: 17px;
    }

    .workers-section .workers .dolzhnost {
        font-size: 15px;
    }
}

@media (min-width: 992px) {
    .onas-section .infoblock {
        margin-bottom: 100px;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 100px;
    }

    .onas-section .infoblock .title {
        font-size: 44px;
        margin-bottom: 30px;
    }

    .onas-section .infoblock .text {
        font-size: 17px;
        margin-bottom: 40px;
    }

    .onas-section .infoblock .title-count {
        font-size: 36px;
    }

    .onas-section .infoblock .text-count .kolychestvo {
        font-size: 60px;
        margin-bottom: 15px;
    }

    .onas-section .infoblock .text-count .opys {
        font-size: 17px;
    }

    .onas-section .infoblock .image {
        height: 100%;
    }

    .onas-section .infoblock .text-count {

        gap: 70px;
        margin-bottom: 0;
    }

    .guides-section {
        padding: 100px 0;
    }

    .guides-section .title {
        font-size: 44px;
    }

    .guides-section .number {
        margin-bottom: 20px;
    }

    .guides-section .items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 60px;
        flex-direction: row;
    }

    .workers-section {
        padding: 100px 0;
    }

    .workers-section .col-12 {
        display: grid;
        grid-template-columns: 0.7fr 1.3fr;
        gap: 80px;
    }

    .workers-section .title {
        font-size: 44px;
        margin-bottom: 25px;
    }

    .workers-section .text {
        font-size: 17px;
        margin-bottom: 25px;
    }

    .workers-section .workers .image {
        height: 430px;
    }

    .workers-section .workers {
        grid-template-columns: 1fr 1fr;
        gap: 30px 50px;
        margin-top: 0px;
    }

    .workers-section .workers .iya {
        font-size: 20px;
    }

    .workers-section .workers .dolzhnost {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .proektyprojekty-items,
    .kategorykatalog-items {
        margin-right: -12px;
    }
}

/**/
.wspolpraca-section-1 {
    margin-bottom: 70px;
}

.wspolpraca-section-1 .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 110%;
    margin-bottom: 30px;
    color: var(--color-text);
}

.wspolpraca-section-1 .items-block {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.wspolpraca-section-1 .items-block .item {
    box-shadow: 0px 0px 10px 0px #27252308;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
}

.wspolpraca-section-1 .items-block .item .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wspolpraca-section-1 .items-block .item .icon img {
    width: 18px;
    height: auto;
}

.wspolpraca-section-1 .items-block .item .tit {
    font-weight: 550;
    font-size: 17px;
    line-height: 110%;
    color: #2E2A27;
    margin-bottom: 16px;
}

.wspolpraca-section-1 .items-block .item .txt {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: #2E2A27;
}

.wspolpraca-section-2 {
    margin-bottom: 70px;
}

.wspolpraca-section-2 .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 110%;
    margin-bottom: 20px;
    color: var(--color-text);
}

.wspolpraca-section-2 .text-block {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
    margin-bottom: 20px;
}

.wspolpraca-section-2 .text-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    flex-direction: column;
    margin-top: 5px;
}

.wspolpraca-section-2 .text-block ul li {
    position: relative;
    padding-left: 26px;
    color: var(--color-text2);
}

.wspolpraca-section-2 .text-block ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66667 0C3 0 0 3 0 6.66667C0 10.3333 3 13.3333 6.66667 13.3333C10.3333 13.3333 13.3333 10.3333 13.3333 6.66667C13.3333 3 10.3333 0 6.66667 0ZM9.46667 5.53333L6.26666 8.73333C6 9 5.6 9 5.33333 8.73333L3.86667 7.26666C3.6 7 3.6 6.6 3.86667 6.33333C4.13333 6.06667 4.53333 6.06667 4.8 6.33333L5.8 7.33333L8.53333 4.6C8.8 4.33333 9.2 4.33333 9.46667 4.6C9.73333 4.86667 9.73333 5.26667 9.46667 5.53333Z' fill='%23A8683D'/%3E%3C/svg%3E%0A");
}

.wspolpraca-section-2 .image {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.wspolpraca-section-2 .image:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(181.87deg, rgba(0, 0, 0, 0) 64.13%, rgba(0, 0, 0, 0.2) 98.42%);

}

.wspolpraca-section-3 {
    padding: 50px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 70px;
}

.wspolpraca-section-3 .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 110%;
    color: #FFFFFF;
    margin-bottom: 25px;
}

.wspolpraca-section-3 .items-block {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.wspolpraca-section-3 .items-block .item {
    background: #FFFFFF21;
    backdrop-filter: blur(24px);
    border-radius: 10px;
    padding: 15px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 15px;
}

.wspolpraca-section-3 .items-block .item .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #A8683D;
    display: flex;
    align-items: center;
    justify-content: center;

}

.wspolpraca-section-3 .items-block .item .icon img {
    width: 60%;
    height: auto;
}

.wspolpraca-section-3 .items-block .item .tit {
    font-weight: 550;
    font-size: 17px;
    line-height: 110%;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.wspolpraca-section-3 .items-block .item .txt {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: #FFFFFFE5;

}

.wspolpraca-section-4 {
    margin-bottom: 70px;
}

.wspolpraca-section-4 .title-block {
    font-weight: 550;
    font-size: 26px;
    line-height: 130%;
    color: var(--color-text2);
    margin-bottom: 25px;
}

.wspolpraca-section-4 .items-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.wspolpraca-section-4 .items-block .item {
    border: 1px solid #E4E4E4;
    box-shadow: 0px 0px 10px 0px #27252308;
    background: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
}

.wspolpraca-section-4 .items-block .item .tit {
    font-weight: 550;
    font-size: 17px;
    line-height: 110%;
    margin-bottom: 10px;
    color: #2C2C2C;
    display: flex;
    justify-content: space-between;

}

.wspolpraca-section-4 .items-block .item .tit span {
    font-weight: 550;
    font-size: 15px;
    line-height: 130%;
    text-align: right;
    color: #2C2C2C;

}

.wspolpraca-section-4 .items-block .item .txt {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: #2C2C2C;
}

.wspolpraca-section-4 .image {
    border-radius: 10px;

    overflow: hidden;
}


@media (min-width: 768px) {
    .wspolpraca-section-1 {
        margin-bottom: 100px;
    }

    .wspolpraca-section-1 .title-block {
        font-size: 30px;
    }

    .wspolpraca-section-1 .items-block {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    }

    .wspolpraca-section-1 .items-block .item .icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin-bottom: 40px;
    }

    .wspolpraca-section-1 .items-block .item .tit {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .wspolpraca-section-1 .items-block .item .txt {
        font-size: 15px;
    }

    .wspolpraca-section-1 .items-block .item .icon img {
        width: 50%;
        height: auto;
    }

    .wspolpraca-section-2 .title-block {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .wspolpraca-section-2 .text-block {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .wspolpraca-section-2 .text-block ul {
        gap: 12px;
        margin-top: 15px;
    }

    .wspolpraca-section-2 .text-block ul li {

        font-size: 17px;
        color: var(--color-text2);
        padding-left: 30px;
    }

    .wspolpraca-section-2 .text-block ul li::before {
        width: 17px;
        height: 17px;
        top: 2px;
        background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.33333 0C3.75 0 0 3.75 0 8.33333C0 12.9167 3.75 16.6667 8.33333 16.6667C12.9167 16.6667 16.6667 12.9167 16.6667 8.33333C16.6667 3.75 12.9167 0 8.33333 0ZM11.8333 6.91667L7.83333 10.9167C7.5 11.25 7 11.25 6.66667 10.9167L4.83333 9.08333C4.5 8.75 4.5 8.25 4.83333 7.91666C5.16667 7.58333 5.66667 7.58333 6 7.91666L7.25 9.16666L10.6667 5.75C11 5.41667 11.5 5.41667 11.8333 5.75C12.1667 6.08333 12.1667 6.58333 11.8333 6.91667Z' fill='%23A8683D'/%3E%3C/svg%3E%0A");
    }

    .wspolpraca-section-3 {
        padding: 70px 0;
    }

    .wspolpraca-section-3 .title-block {
        font-size: 30px;
        margin-bottom: 30px;
        text-align: center;
    }

    .wspolpraca-section-3 .items-block {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    .wspolpraca-section-3 .items-block .item {
        padding: 20px;
        padding-right: 7px;
        grid-template-columns: 40px 1fr;
        gap: 20px;
    }

    .wspolpraca-section-3 .items-block .item .icon {
        width: 40px;
        height: 40px;
    }

    .wspolpraca-section-3 .items-block .item .tit {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .wspolpraca-section-3 .items-block .item .txt {
        font-size: 15px;
    }

    .wspolpraca-section-4 .title-block {
        font-size: 30px;
    }

    .wspolpraca-section-4 .items-block {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 20px;
    }

    .wspolpraca-section-4 .items-block .item {
        padding: 25px;
    }

    .wspolpraca-section-4 .items-block .item .tit {
        font-size: 20px;
    }

    .wspolpraca-section-4 .items-block .item .txt {
        font-size: 15px;
    }

    .wspolpraca-section-4 .items-block .item .tit span {
        font-size: 17px;
    }

    .wspolpraca-section-4 .image {
        height: 400px;
        position: relative;
    }

    .wspolpraca-section-4 .image img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100% !important;
        object-position: center;
        object-fit: cover;
        z-index: 1;
    }
}

@media (min-width: 992px) {
    .wspolpraca-section-1 .title-block {
        font-size: 44px;
        margin-bottom: 40px;
    }

    .wspolpraca-section-1 .items-block {
        gap: 20px;
    }

    .wspolpraca-section-1 .items-block .item {
        padding: 30px;
    }

    .wspolpraca-section-1 .items-block .item .icon {
        width: 60px;
        height: 60px;
        margin-bottom: 50px;
    }

    .wspolpraca-section-1 .items-block .item .tit {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .wspolpraca-section-1 .items-block .item .txt {
        font-size: 17px;
    }

    .wspolpraca-section-2 .title-block {
        font-size: 44px;
        margin-bottom: 30px;
    }

    .wspolpraca-section-2 .col-12 {
        display: grid;
        grid-template-columns: 0.9fr  1.1fr;
        gap: 55px;
    }

    .wspolpraca-section-2 .text-block {
        font-size: 17px;
        margin-bottom: 0px;
    }

    .wspolpraca-section-2 .text-block ul {
        margin-top: 25px;
    }

    .wspolpraca-section-3 {
        padding: 100px 0;
    }

    .wspolpraca-section-3 .title-block {
        font-size: 44px;
        margin-bottom: 40px;
        text-align: center;
    }

    .wspolpraca-section-3 .items-block {
        gap: 0px 50px;
        max-width: 1120px;
        margin: 0 auto;
    }

    .wspolpraca-section-3 .items-block .item {
        gap: 25px;
        padding: 30px;
        grid-template-columns: 60px 1fr;
    }

    .wspolpraca-section-3 .items-block .item .icon {
        width: 60px;
        height: 60px;
    }

    .wspolpraca-section-3 .items-block .item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .wspolpraca-section-3 .items-block .item:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }

    .wspolpraca-section-3 .items-block .item:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .wspolpraca-section-3 .items-block .item:nth-child(4) {
        grid-column: 2;
        grid-row: 4;
    }

    .wspolpraca-section-3 .items-block .item:nth-child(5) {
        grid-column: 1;
        grid-row: 5;
    }

    .wspolpraca-section-3 .items-block .item:nth-child(6) {
        grid-column: 2;
        grid-row: 6;
    }


    .wspolpraca-section-3 .items-block .item .tit {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .wspolpraca-section-3 .items-block .item .txt {
        font-size: 17px;
    }

    .wspolpraca-section-4 {
        margin-bottom: 100px;
    }

    .wspolpraca-section-4 .col-12 {
        display: grid;
        grid-template-columns:  0.8fr  1.2fr;
        gap: 40px;

    }

    .wspolpraca-section-4 .col-12 > *:nth-child(1) {
        order: 2;
    }

    .wspolpraca-section-4 .col-12 > *:nth-child(2) {
        order: 1;
    }

    .wspolpraca-section-4 .title-block {
        font-size: 44px;
        margin-bottom: 35px;
    }

    .wspolpraca-section-4 .items-block {
        margin-bottom: 0px;
    }

    .wspolpraca-section-4 .image {
        height: 100%;

    }

    .wspolpraca-section-4 .items-block .item .txt {
        font-size: 17px;
    }
}

/**/
.product-section1 .col-12 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 40px;
    align-items: end;
}

.product-section1 .title-product {
    font-weight: 500;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-text);

}

.product-section1 .price-product {
    font-weight: 500;
    font-size: 20px;
    line-height: 110%;
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.product-section1 .text-product {
    grid-column: span 2;
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
    margin: 20px 0;
}

.product-section2 {
    padding-bottom: 30px;
}

.product-section2 .product-slider {
    margin-right: -12px;
    padding-right: 12px;

    width: calc(100% + ((100vw - 100%) / 2));
    position: relative; /* anchor for nav buttons */
}

/* Subtle round nav buttons that float over the slider edges */
.product-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #2E2A27;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    opacity: 0.85;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.product-slider-nav:hover {
    opacity: 1;
    background: #FFFFFF;
    transform: translateY(-50%) scale(1.06);
}

.product-slider-nav:focus-visible {
    outline: 2px solid #A8683D;
    outline-offset: 2px;
}

.product-slider-nav.prev {
    left: 14px;
}

.product-slider-nav.next {
    right: 14px;
}

.product-slider-nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.product-slider-nav svg {
    width: 8px;
    height: auto;
    display: block;
}

@media (min-width: 768px) {
    .product-slider-nav {
        width: 44px;
        height: 44px;
    }

    .product-slider-nav.prev {
        left: 18px;
    }

    .product-slider-nav.next {
        right: 18px;
    }
}

.product-section2 .product-slider .image {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    height: 240px;
}

/* Use intrinsic width: img keeps its aspect ratio at the fixed 240px height,
   so each slide wraps to the image's natural width and the image always fills
   its slide edge-to-edge. width:100% with no parent width was circular and
   gave inconsistent results between Chrome and iOS Safari. */
.product-slider img {
    width: auto;
    height: 100%;
    display: block;
}
/* Video slide in the product slider — match img sizing rules (height fills
 * slide, width auto). Native controls hidden because video autoplays + loops. */
.product-slider video {
    width: auto;
    height: 100%;
    display: block;
    background: #000;
}
.product-slider video::-webkit-media-controls,
.product-slider video::-webkit-media-controls-panel,
.product-slider video::-webkit-media-controls-enclosure,
.product-slider video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}
.product-slider .swiper-slide.is-video {
    background: #000;
}

.product-slider {
    width: 100%;
    height: 100%;
}

.product-slider .swiper-wrapper {
    align-items: stretch;
}

.product-slider .swiper-slide {
    height: auto;
    width: auto;
    flex-shrink: 0;
}

.product-section2 .product-slider .image > div:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: linear-gradient(181.87deg, rgba(0, 0, 0, 0) 64.13%, rgba(0, 0, 0, 0.2) 98.42%);
    z-index: 2;
}

.product-section3 {
    margin-bottom: 20px;
}

.product-section3 .title {
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    color: var(--color-text2);
    border-bottom: 1px solid #E4E4E4;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.product-section3 .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
    margin-bottom: 30px;
}

.product-section3 .characteristics {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
    display: flex;

    gap: 8px;
    flex-direction: column;

}

.attr-row {
    display: grid;
    gap: 8px;
    grid-template-columns: auto 1fr;
}

.product-section3 .characteristics strong {
    font-weight: 500;
    white-space: nowrap;
}

.product-section4 {
    padding: 50px 0;
    background: var(--color-text2);

}

.product-section4 .title {
    font-weight: 550;
    font-size: 26px;
    line-height: 110%;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.product-section4 .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 131%;
    color: #FFFFFF;
    margin-bottom: 30px;
}

.product-section4 .product-foto-slider .image {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.product-interested {
    padding-top: 70px;
    padding-bottom: 30px;
}

.product-item {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px #27252308;
    border-radius: 10px;
}

.product-interested .title {
    font-weight: 500;
    font-size: 26px;
    line-height: 110%;
    color: var(--color-text2);
    margin-bottom: 25px;
    order: 1;

}

.product-item .img {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Catalog/category grid only — force every card image to fill the same
 * 4:3 box. object-fit: fill stretches short images (no cropping), matching
 * the rest. Direct child selector keeps .img-placeholder logo untouched. */
.catalog-grid .product-item .img {
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 10px 10px 0 0;
}

/* Partners strip — sits right before the footer on the home page. Monochrome
 * logos, fade to colour on hover. Falls back to a wrapping flex on mobile. */
.partners-section {
    padding: 70px 0 50px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.partners-section__title.zagolovok-bloka {
    text-align: center;
    margin-bottom: 32px;
}
.partners-section__grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.partners-section .partner-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
}
.partners-section .partner-logo img {
    max-height: 64px;
    max-width: 230px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s ease;
}
.partners-section .partner-logo:hover img {
    transform: translateY(-2px);
}
/* Third partner (white/transparent logo) — recolour to red via filter chain.
 * brightness(0) flattens to black, then the rest tints to ~#E20000. */
.partners-section .partner-logo:nth-child(3) img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(7484%) hue-rotate(7deg) brightness(95%) contrast(118%);
}
/* Fifth partner (white/transparent logo) — paint solid black on light theme;
 * dark theme keeps it white as-is. */
.partners-section .partner-logo:nth-child(5) img {
    filter: brightness(0);
}

[data-bs-theme="dark"] .partners-section {
    border-top-color: rgba(255, 255, 255, .08);
}
/* Dark theme — DrzwiDoor (4th) logo is black, invert to white. */
[data-bs-theme="dark"] .partners-section .partner-logo:nth-child(4) img {
    filter: brightness(0) invert(1);
}
/* Dark theme — 5th logo (white/transparent) stays as-is, no filter. */
[data-bs-theme="dark"] .partners-section .partner-logo:nth-child(5) img {
    filter: none;
}

@media (max-width: 600px) {
    .partners-section { padding: 50px 0 30px; }
    .partners-section__grid { gap: 28px; }
    .partners-section .partner-logo img { max-height: 44px; max-width: 140px; }
}
.catalog-grid .product-item .img > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* "Popularne" badge — top-left corner of the product card image. Solid
   white pill with a bronze hairline border. */
.product-item .img .popular-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgb(255 255 255);
    border: 1px solid rgb(179 115 77);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: #2E2A27;
    pointer-events: none;
}

/* Placeholder shown when a product has no thumbnail — square card with the
   Tessora logo dampened to ~18% opacity so it reads as a brand watermark
   rather than missing-image noise. No background — sits on the card's own
   white surface. */
.product-item .img-placeholder {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-item .img-placeholder img {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 35%;
    opacity: 0.18;
    /* Hover-zoom on .product-item shouldn't grow the watermark logo. */
    transform: none !important;
    transition: none !important;
}

.product-item .info {
    padding: 15px;
}

.product-item .img .material {

    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 10px;

}

.product-item .img .material span {
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(44, 44, 44, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    text-align: center;
    color: #FFFFFF;
}

.product-item .tit {
    font-weight: 500;
    font-size: 17px;
    line-height: 130%;
    color: #2E2A27;
    display: grid;
    gap: 20px;
    justify-content: space-between;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-bottom: 12px;
    min-height: 45px;
}

.product-item .tit span {
    color: #A8683D;

}

.product-item .btn2 {
    width: 100%;
}

/* Product card hover — light image zoom + propagate btn2 hover state to the
   whole card so hovering anywhere on the card flips both. .product-img-link
   wraps the image so clicking the photo navigates to the product. */
.product-item .product-img-link {
    display: block;
}

.product-item .img img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.product-item:hover .img img {
    transform: scale(1.04);
}

.product-item:hover .btn2 {
    background: #A8683D;
    background-color: #A8683D;
    color: #FFFFFF;
}

.product-item:hover .btn2 svg path {
    fill: #FFFFFF;
}

.interested-block {
    display: flex;
    flex-direction: column;
    gap: 0;

}

.product-interested-slider {
    order: 2;
    width: 100%;
}

.swiper-nav {
    order: 3;
}

.swiper-nav {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.swiper-nav .prev,
.swiper-nav .next {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #27252308;
    background: #FFFFFF;
    border: 0;
}

.swiper-nav .prev:hover,
.swiper-nav .next:hover {
    background: #414141;

}

.swiper-nav .prev:hover svg path,
.swiper-nav .next:hover svg path {
    fill: #FFFFFF;

}

.product-foto-slider {
    margin-right: -12px;
    padding-right: 12px;
}

@media (min-width: 768px) {
    .product-section1 .title-product {

        font-size: 30px;
    }

    .product-section1 .price-product {
        font-size: 30px;
    }

    .product-section1 .text-product {
        font-size: 15px;
        margin: 20px 0 25px;
    }

    .product-section3 .title {
        font-size: 26px;
    }

    .product-section3 .text {
        font-size: 15px;
        margin-bottom: 49px;
    }

    .product-section3 .characteristics {
        font-weight: 300;
        font-size: 13px;
        line-height: 130%;
        color: var(--color-text2);
        display: flex;
        gap: 8px;
        flex-direction: column;
    }

    .product-section3 .characteristics {
        font-size: 15px;
        gap: 10px 21px;
    }

    .product-section3 {
        margin-bottom: 30px;
    }

    .product-section4 {
        padding: 70px 0;

    }

    .product-section4 .title {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .product-section4 .text {

        font-size: 15px;
    }

    .product-interested .title {
        font-size: 30px;
        margin-bottom: 0px;

    }

    .interested-block {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 120px;
    }

    .product-item .tit {
        font-size: 20px;
        margin-bottom: 17px;
        min-height: 55px;
    }

    .product-item .info {
        padding: 20px;
    }

    .product-item .img .material span {
        padding: 10px 15px;
        font-size: 15px;
    }

    .swiper-nav {
        order: 2;
        margin-top: 0;
        gap: 20px;
    }

    .product-interested-slider {
        order: 3;
        grid-column: span 2;
        margin-top: 30px;
    }

    .swiper-nav .prev, .swiper-nav .next {
        width: 50px;
        height: 50px;
    }

    .product-section2 .product-slider .image {
        height: 400px;
    }
}

@media (min-width: 992px) {
    .product-section1 .title-product {
        font-size: 44px;
    }

    .product-section1 .text-product {
        font-size: 17px;
        margin: 30px 0;
    }

    .product-section3 .col-12 {
        display: grid;
        gap: 0 80px;
        grid-template-columns: repeat(2, 1fr);
        position: relative;
    }

    .product-section3 .col-12:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        background: #E4E4E4;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .product-section3 .title {
        font-size: 36px;
        padding-bottom: 20px;
        margin-bottom: 29px;
    }

    .product-section3 .text {
        font-size: 17px;
        margin-bottom: 0px;
    }

    .product-section3 .characteristics {
        font-size: 17px;
        gap: 15px 40px;
    }

    .product-section4 {
        padding: 100px 0;
    }

    .product-section4 .title {
        font-size: 44px;
        margin-bottom: 27px;
    }

    .product-section4 .text {
        font-size: 17px;
        margin-bottom: 40px;
    }

    .product-interested .title {
        font-size: 44px;
        margin-bottom: 0px;
    }

    .product-item .img {
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        height: 240px;
    }

    .product-section2 .product-slider .image {
        height: 600px;
    }
}

/**/
.catalog-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 60px;
}

.catalog-block a {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    height: 110px;
}

.catalog-block a:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 71.6%, rgba(0, 0, 0, 0.7) 96.3%);
    content: "";
    height: 100%;
    width: 100%;
    z-index: 2;
    position: absolute;
}

.catalog-block a .cat-name {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-weight: 500;
    font-size: 12px;
    line-height: 110%;
    text-align: center;
    padding: 9px;
    color: #FFFFFF;
    background: rgba(44, 44, 44, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    display: flex;
    width: max-content;
    z-index: 3;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Category card hover — light image zoom + bronze tint on the title badge. */
.catalog-block a img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.catalog-block a:hover img {
    transform: scale(1.04);
}

.catalog-block a:hover .cat-name {
    background: rgba(168, 104, 61, 0.78);
    border-color: rgba(199, 135, 93, 0.7);
}

.catalog-products .titles {
    font-weight: 500;
    font-size: 26px;
    line-height: 130%;
    color: var(--color-text2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.catalog-products .titles span {
    font-weight: 400;
    font-size: 11px;
    line-height: 130%;
    text-align: right;
    color: var(--color-text2);
}

.catalog-products .texts {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: var(--color-text2);
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E4E4E4;
    margin-top: 15px;
}

.catalog-grid {
    display: grid;
    gap: 20px;
}

.paginations {

}

.pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 60px;
    margin-top: 20px;
    width: 100%;
}

.pagination > * {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #27252308;
    border: 1px solid #E4E4E4;
    background: #FFFFFF;
    font-weight: 500;
    font-size: 15px;
    line-height: 130%;
    text-align: center;
    color: #2E2A27;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.pagination .prev {
    margin-right: 15px;
}

.pagination .next {
    margin-left: 15px;
}

.pagination > *:hover,
.pagination > *:hover,
.pagination > .current {
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    color: #FFFFFF;
    border-color: transparent;
}

.pagination > *:hover svg path {
    fill: #FFFFFF;
}

/* Mobile layout for the filter/sort row — switched from flex to CSS Grid
   for deterministic equal-width columns. iOS Safari has long-standing
   quirks with `flex: 1 1 0` when children have intrinsic SVG sizes plus
   nested wrappers (.sort-dropdown around the trigger), and even explicit
   width:0 wasn't enough. Grid `1fr 1fr` is the cleanest fix.
   Both templates work:
     - katalog: .btn-block has filter-open + sort-dropdown as direct kids
     - taxonomy: .btn-block has .right wrapping both — .right gets its own
       inner 1fr 1fr grid and spans the parent grid full width. */
.catalog-cat-section .btn-block {
    margin-top: 10px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

.catalog-cat-section .btn-block .left {
    display: none;
}

.catalog-cat-section .btn-block .right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.catalog-cat-section .btn-block .filter-open,
.catalog-cat-section .btn-block .sort-dropdown,
.catalog-cat-section .btn-block .sort-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Filtry*/
.filters {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px #27252308;
    border-radius: 10px;
    padding: 25px;
    max-width: 340px;
}

.filters .close {
    position: absolute;
    top: 15px;
    right: 15px;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.filters-title {
    font-weight: 500;
    font-size: 22px;
    line-height: 130%;
    color: #2E2A27;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.filters-body {
    display: flex;
    gap: 25px;
    flex-direction: column;
    overflow-y: auto;
    height: calc(100vh - 230px);
    margin-right: -15px;
    padding-right: 15px;
    margin-left: -15px;
    padding-left: 15px;
    padding-bottom: 25px;
}

.filters-body .search input {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.411 1.43274C4.48588 1.43274 1.29932 4.61986 1.29932 8.54443C1.29932 12.4696 4.48588 15.6567 8.411 15.6567C12.3361 15.6567 15.5227 12.4696 15.5227 8.54443C15.5227 4.61986 12.3361 1.43274 8.411 1.43274ZM8.411 2.55774C11.7151 2.55774 14.3977 5.2403 14.3977 8.54443C14.3977 11.8491 11.7151 14.5317 8.411 14.5317C5.10688 14.5317 2.42432 11.8491 2.42432 8.54443C2.42432 5.2403 5.10688 2.55774 8.411 2.55774Z' fill='%232E2A27'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.123 16.1938L13.5927 12.6636C13.3733 12.4442 13.0167 12.4442 12.7973 12.6636C12.578 12.8829 12.578 13.2396 12.7973 13.4589L16.3276 16.9892C16.547 17.2091 16.9036 17.2091 17.123 16.9892C17.3423 16.7698 17.3423 16.4132 17.123 16.1938Z' fill='%232E2A27'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 15px 15px;
    padding: 14px 17px 14px 41px;
    font-weight: 300;
    font-size: 15px;
    line-height: 130%;
    color: #C2C2C2;
}

[data-bs-theme=dark] .filters-body .search input {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.411 1.43274C4.48588 1.43274 1.29932 4.61986 1.29932 8.54443C1.29932 12.4696 4.48588 15.6567 8.411 15.6567C12.3361 15.6567 15.5227 12.4696 15.5227 8.54443C15.5227 4.61986 12.3361 1.43274 8.411 1.43274ZM8.411 2.55774C11.7151 2.55774 14.3977 5.2403 14.3977 8.54443C14.3977 11.8491 11.7151 14.5317 8.411 14.5317C5.10688 14.5317 2.42432 11.8491 2.42432 8.54443C2.42432 5.2403 5.10688 2.55774 8.411 2.55774Z' fill='%23FFFFFF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.123 16.1938L13.5927 12.6636C13.3733 12.4442 13.0167 12.4442 12.7973 12.6636C12.578 12.8829 12.578 13.2396 12.7973 13.4589L16.3276 16.9892C16.547 17.2091 16.9036 17.2091 17.123 16.9892C17.3423 16.7698 17.3423 16.4132 17.123 16.1938Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
}

.filters-body .title {
    font-weight: 500;
    font-size: 17px;
    line-height: 130%;
    color: #2E2A27;
    margin-bottom: 12px;
}

.filters-body .values {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filters-body .values.price {
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    gap: 5px;
    align-items: center;
    position: relative;
}

.filters-body .values.price input {
    width: 100%
}

.filters-btn {
    text-align: center;
}

.filter-btn-search {
    border: 1px solid #A8683D;
    background: #FFFFFF;
    width: 100%;
}

.btn-price-apply {
    position: absolute;
    right: 0px;
    padding: 8px 20px;
}

#slider-range .histogram {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 44px;
    margin-bottom: 0px;
}

#slider-range .histogram .bar {
    flex: 1;
    border-radius: 1px 1px 0 0;
    background: #E9E9E999;
    transition: background 0.15s;
}

#slider-range .histogram .bar.active {
    background: #2E2A27;
}

#slider-range .track-wrap {
    position: relative;
    height: 8px;
    margin-bottom: 15px;
    margin-top: -4px;
}

#slider-range .track-bg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 1px;
    background: #E4E4E4;
}

#slider-range .track-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background: #E4E4E4;
    border-radius: 0px;
}

#slider-range .thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

#slider-range .dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2E2A27;
    pointer-events: none;
    z-index: 2;
}

#slider-range .thumb-min {
    z-index: 4;
}

#slider-range .thumb-max {
    z-index: 3;
}

@media (max-width: 768px) {
    body.no-scroll {
        overflow: hidden !important;
    }

    .filters-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--color-text) CC;
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .filters-overlay.active {
        display: block;
        opacity: 1;

    }

    .filters {
        position: fixed;
        left: 0;
        z-index: 10001;
        height: calc(100vh - 80px);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .filters.active {
        left: 10px;
        right: 10px;
        top: 43px;
        transform: translateX(0);
    }
}


@media (min-width: 768px) {
    .catalog-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-block a {
        height: 160px;
    }

    .pagination {
        margin-bottom: 0px;
        margin-top: 50px;
    }

    .catalog-page {
        margin-bottom: 70px;
    }
}

@media (min-width: 992px) {
    .catalog-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(3, 1fr);
    }

    .catalog-filter {
        display: grid;
        gap: 0 40px;
        grid-template-columns: 340px 1fr;
    }

    .filters-body {
        display: flex;
        gap: 25px;
        flex-direction: column;
        overflow-y: unset;
        height: unset;
        margin-right: 0px;
        padding-right: 0px;
        margin-left: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }

    .catalog-products .btn-block .sort-popap,
    .catalog-products .btn-block .filter-open {
        display: none;
    }

    /* Desktop layout: count + chips on the left, sort dropdown pinned right.
       On mobile the .left block is hidden (above), the sort-dropdown also
       hides (rule below); mobile keeps the .filter-open / .sort-popap
       buttons that the rules above already keep visible.
       position:relative + z-index lifts btn-block above the catalog grid so
       the sort options panel can paint over product cards. */
    .catalog-products .btn-block {
        display: flex;
        align-items: center;
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 30px;
        position: relative;
        z-index: 10;
    }

    .catalog-products .btn-block .left {
        flex: 1 1 auto;
    }

    .catalog-products .btn-block .left > span {
        white-space: nowrap;
    }

    .catalog-products .btn-block .right,
    .catalog-products .btn-block .sort-dropdown {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .catalog-products .btn-block .right > * {
        flex: 0 0 auto;
    }

    /* Reset mobile-grid leakage on .right (mobile sets it to a 2-col grid
       spanning .btn-block — on desktop that pushes the sort dropdown into
       a half-width slot in the middle instead of pinning it right). */
    .catalog-cat-section .btn-block .right {
        display: flex;
        gap: 10px;
        grid-template-columns: none;
        grid-column: auto;
    }

    /* Reset width:100% / max-width:100% set on mobile so the trigger sizes
       to its content on desktop. */
    .catalog-cat-section .btn-block .filter-open,
    .catalog-cat-section .btn-block .sort-dropdown,
    .catalog-cat-section .btn-block .sort-trigger {
        width: auto;
        max-width: none;
    }

    .catalog-block {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 78px;
    }

    .catalog-block a {
        height: 200px;
    }

    .active-filters {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .active-filters > div {
        background: #FFFFFF;
        border-radius: 10px;
        box-shadow: 0px 0px 10px 0px #27252308;
        padding: 13px 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        color: #2E2A27;
        border: 1px solid transparent;
        transition: border-color 0.2s ease;
    }

    .active-filters > div:hover {
        border-color: #C4C4C4;
    }

    .catalog-products .btn-block .left {
        display: flex;
        align-items: center;
        gap: 37px;

    }

    .active-filter-tag .remove {
        cursor: pointer;
    }

    .filters {
        height: min-content;
    }

    .filters-btn {
        margin-top: 30px;
    }

    .pagination {
        margin-bottom: 0px;
        margin-top: 40px;
    }

    .catalog-page {
        margin-bottom: 100px;
    }

    .catalog-products .titles span {
        display: none;
    }
}

/* Sort dropdown — single component shared by mobile + desktop. Mobile shows
   the bronze sort.svg icon + "Najpopularniejsze" label (matches the Filtry
   pill style). Desktop drops the icon and shows "Sortuj: Najpopularniejsze"
   with a chevron. JS toggles data-open="true|false" on .sort-dropdown. */
.sort-dropdown {
    position: relative;
    display: inline-block;
}

.sort-trigger {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px #27252308;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 17px;
    line-height: 130%;
    color: #2E2A27;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: border-color 0.2s ease;
    white-space: nowrap;
    /* iOS fixes: kill the blue tap flash, neutralise default button chrome,
       suppress double-tap zoom on the trigger. */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.sort-trigger:hover,
.sort-trigger.btn3:hover {
    background: #FFFFFF;
    background-color: #FFFFFF;
    color: #2E2A27;
    border-color: #C4C4C4;
}

.sort-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

.sort-label {
    color: rgba(46, 42, 39, 0.55);
    font-weight: 400;
    /* Mobile: no "Sortuj:" prefix per design. */
    display: none;
}

.sort-current {
    font-weight: 500;
}

.sort-chevron {
    color: #2E2A27;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    /* Hidden on mobile to match the clean Filtry-style pill. */
    display: none;
}

.sort-dropdown[data-open="true"] .sort-chevron {
    transform: rotate(180deg);
}

.sort-options {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 100;
    /* iOS Safari: enable native momentum scroll for long option lists, and
       confine taps inside the panel (avoids accidental gesture bubbling). */
    -webkit-overflow-scrolling: touch;
}

.sort-options[hidden] {
    display: none;
}

.sort-options li {
    list-style: none;
}

.sort-options li button {
    width: 100%;
    background: none;
    border: 0;
    padding: 10px 14px;
    text-align: left;
    border-radius: 6px;
    font-size: 14px;
    line-height: 130%;
    color: #2E2A27;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.sort-options li button:hover,
.sort-options li button[aria-selected="true"] {
    color: #A8683D;
}

/* Mobile pill: fill the grid cell, hide the icon's gap so the trigger lines
   up with .filter-open in the 2-column .btn-block layout. */
.catalog-cat-section .btn-block .sort-dropdown {
    width: 100%;
}

.catalog-cat-section .btn-block .sort-trigger {
    width: 100%;
}

/* Desktop: drop the icon, swap to "Sortuj: <value> ⌄". */
@media (min-width: 992px) {
    .sort-trigger {
        font-size: 15px;
        padding: 12px 18px;
    }

    .sort-icon {
        display: none;
    }

    .sort-label {
        display: inline;
    }

    .sort-chevron {
        display: inline-block;
    }

    .catalog-cat-section .btn-block .sort-dropdown,
    .catalog-cat-section .btn-block .sort-trigger {
        width: auto;
    }
}

.catalog-loader {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    align-items: center;
    justify-content: center;
}

.catalog-loader.active {
    display: flex;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0e6dc;
    border-top-color: #A8683D;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.catalog-products {
    position: relative;
}


/**/
.services-section {
    margin-bottom: 70px;
}

.services-section .block1 .title {
    font-weight: 550;
    font-size: 30px;
    line-height: 110%;
    color: var(--color-text);
    margin-bottom: 25px;
}

.services-section .block1 .items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.services-section .block1 .items .item {
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.services-section .block1 .items .item .image {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.services-section .block1 .items .item .image:before {
    content: "";
    background: linear-gradient(193.48deg, rgba(0, 0, 0, 0) 37.13%, rgba(0, 0, 0, 0.7) 88.26%);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.services-section .block1 .items .item .text-block {
    position: absolute;
    z-index: 3;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 20px;
}

.services-section .block1 .items .item .title {
    font-weight: 550;
    font-size: 17px;
    line-height: 130%;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.services-section .block1 .items .item .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: #FFFFFF;

}

.services-gallery-section {
    margin-bottom: 0px;
}

.services-gallery-section .gallery-slider {
    margin-right: -12px;
    padding-right: 12px;

    width: calc(100% + ((100vw - 100%) / 2));
}

.services-gallery-section .gallery-slider .image {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    height: 400px;
}

.gallery-slider img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* вместо cover */
}

.gallery-slider {
    width: 100%;
    height: 100%;
}

.gallery-slider .swiper-wrapper {
    align-items: stretch;
}

.gallery-slider .swiper-slide {
    height: auto;
    width: auto;
}

.services-gallery-section .gallery-slider .image > div:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: linear-gradient(181.87deg, rgba(0, 0, 0, 0) 64.13%, rgba(0, 0, 0, 0.2) 98.42%);
    z-index: 2;
}

@media (min-width: 768px) {
    .services-section .block1 .title {
        font-size: 36px;
        margin-bottom: 30px;
    }

    .services-section .block1 .items {
        gap: 20px;
    }

    .services-section .block1 .items .item {
        height: 300px;

    }

    .services-section .block1 .items .item .text-block {

        padding: 30px;
    }

    .services-section .block1 .items .item .title {
        font-size: 22px;
    }

    .services-section .block1 .items .item .text {
        font-size: 17px;
    }

    .services-gallery-section .gallery-slider .image {
        height: 600px;
    }
}

@media (min-width: 992px) {
    .services-section .block1 .title {
        font-size: 44px;
    }

    .services-section .block1 .items {
        display: grid;
        grid-template-columns: repeat(3, auto);

    }

    .services-section .block1 .items .item {
        height: 350px;
    }

    .services-section {
        margin-bottom: 120px;
    }

    .gallery-slider .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        grid-auto-flow: dense;
    }


    .services-gallery-section .gallery-slider {
        margin-right: 0px;
        padding-right: 0px;
        width: 100%;
    }

    .gallery-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .gallery-slider .swiper-slide:nth-child(4n + 1) {
        grid-column: 1 / span 2;
        grid-row: span 1;
    }

    .gallery-slider .swiper-slide:nth-child(4n + 2) {
        grid-column: 3;
    }

    .gallery-slider .swiper-slide:nth-child(4n + 3) {
        grid-column: 1;
    }

    .gallery-slider .swiper-slide:nth-child(4n + 4) {
        grid-column: 2 / span 2;
    }

    .services-gallery-section {
        margin-bottom: 100px;
    }

    .page-template-template-services .opinionopinions-section .col-12 {
        display: block;

    }
}


/**/

.meble-section {
    padding-top: 40px;
}

.meble-section.meble-section1 {
    padding-top: 0px;
}

.meble-section .block {
    display: flex;
    flex-direction: column;
}

.meble-section .zag-block .title {
    font-weight: 500;
    font-size: 26px;
    line-height: 120%;
    text-align: center;
    color: #2E2A27;
    margin-bottom: 20px;
}

.meble-section .zag-block .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 130%;
    color: #2E2A27;
    margin-bottom: 14px;
}

.meble-section .filosofiya-block {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 30px;
}

.meble-section .filosofiya-block .title {
    font-weight: 600;
    font-style: Italic;
    font-size: 16px;
    line-height: 140%;
    color: #2C2C2C;
    margin-bottom: 9px;
}

.meble-section .filosofiya-block .text {
    font-weight: 300;
    font-style: Italic;
    font-size: 12px;
    line-height: 140%;
    color: #2C2C2C;
}

.meble-section .sozdayom-block {
    margin-bottom: 13px;
}

.meble-section .sozdayom-block .title {
    font-weight: 600;
    font-size: 17px;
    line-height: 140%;
    color: #2C2C2C;
    margin-bottom: 15px;
}

.meble-section .sozdayom-block .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 140%;
    color: #2C2C2C;
}
.meble-section .sozdayom-block .text b{ font-weight: 500;}
.meble-section .sozdayom-block .text ul {
    display: flex;
    gap: 8px;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.meble-section .sozdayom-block .text ul li {
    background-repeat: no-repeat;
    background-position: left 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='8' viewBox='0 0 17 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 3.18213C0.223858 3.18213 2.41411e-08 3.40599 0 3.68213C-2.41411e-08 3.95827 0.223858 4.18213 0.5 4.18213L0.5 3.68213L0.5 3.18213ZM16.8536 4.03568C17.0488 3.84042 17.0488 3.52384 16.8536 3.32858L13.6716 0.146596C13.4763 -0.0486661 13.1597 -0.0486661 12.9645 0.146596C12.7692 0.341858 12.7692 0.658441 12.9645 0.853703L15.7929 3.68213L12.9645 6.51056C12.7692 6.70582 12.7692 7.0224 12.9645 7.21766C13.1597 7.41293 13.4763 7.41293 13.6716 7.21766L16.8536 4.03568ZM0.5 3.68213L0.5 4.18213L16.5 4.18213L16.5 3.68213L16.5 3.18213L0.5 3.18213L0.5 3.68213Z' fill='%232C2C2C'/%3E%3C/svg%3E%0A");
    padding-left: 36px;
}

.meble-section .image {
    border-radius: 10px;
    overflow: hidden;
}

.meble-section .block > * {
    order: 1;
}

.meble-section .materiala-block {
    order: 2;
    margin-bottom: 20px;
}

.meble-section .image.image1 {
    margin-bottom: 30px;
}

.meble-section .image.image2 {
    order: 3;
    margin-bottom: 40px;
}

.meble-section .materiala-block .title {
    font-weight: 600;
    font-size: 17px;
    line-height: 140%;
    color: #2C2C2C;
    margin-bottom: 13px;
}

.meble-section .materiala-block .text {
    font-weight: 300;
    font-size: 13px;
    line-height: 140%;
    color: #2C2C2C;
    margin-bottom: 25px;
}

.meble-section .materiala-block .text ul {
    display: flex;
    gap: 10px;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.meble-section .materiala-block .text ul li {
    background-repeat: no-repeat;
    background-position: left 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='9' height='9' rx='2' fill='%232C2C2C'/%3E%3C/svg%3E%0A");
    padding-left: 25px;
}

.meble-section .materiala-block .btn {
    width: 100%;
}


.meble-section.even {
    background: #FFFFFF;
    padding-top: 40px;
}

.meble-section.even .filosofiya-block {
    background: #F9F9F9;
}

.meble-section.even .sozdayom-block {
    background: #F9F9F9;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
}
.meble-section .meble-slider{
    height: 100%;
}
@media (min-width: 768px) {
    .meble-section .zag-block .title {
        font-size: 30px;
        text-align: left;
    }
    .meble-section .zag-block .text {
        font-size: 15px;
        margin-bottom: 25px;
    }
    .meble-section .filosofiya-block {
        padding: 25px;
        margin-bottom: 25px;
    }
    .meble-section.even .sozdayom-block {

        padding: 25px;
    }
    .meble-section .filosofiya-block .title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .meble-section .filosofiya-block .text {

        font-size: 15px;
    }
    .meble-section .sozdayom-block .title {
        font-size: 20px;
        margin-bottom: 12px;
    }
    .meble-section .sozdayom-block .text {
        font-size: 15px;
    }
    .meble-section .sozdayom-block .text ul {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 9px;

    }
    .meble-section .sozdayom-block {
        margin-bottom: 20px;
    }
    .meble-section .materiala-block .title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .meble-section .materiala-block .text {
        font-size: 15px;
        margin-bottom: 30px;
    }
    .meble-section .materiala-block .btn {
        width: unset;
    }
    .meble-section .image.image2 {
        margin-bottom: 50px;
    }
}
@media (min-width: 992px) {
    .meble-section {
        padding-top: 60px;
    }
    .meble-section .block{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 40px;
        align-items: start;
        padding-bottom: 80px;
    }

    /* левая колонка */
    .meble-section .zag-block{
        grid-column: 1;
        grid-row: 1;
    }

    .meble-section .filosofiya-block{
        grid-column: 1;
        grid-row: 2;
    }

    .meble-section .sozdayom-block{
        grid-column: 1;
        grid-row: 3;
    }

    .meble-section .image2{
        grid-column: 1;
        grid-row: 4;
        max-height: 470px;
    }

    /* правая колонка */
    .meble-section .image1{
        grid-column: 2;
        grid-row: 1 / span 3;
        height: 100%;
    }

    .meble-section .materiala-block{
        grid-column: 2;
        grid-row: 4;
    }

    /* картинки */
    .meble-section .block .image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .meble-section .image1 img{
        min-height: 100%;
    }
    .meble-section .block > * {
        order: unset!important;
    }
    .meble-section .zag-block .title {
        font-size: 44px;
    }
    .meble-section .zag-block .text {
        font-size: 17px;
        margin-bottom: 0;
    }
    .meble-section .filosofiya-block {
        margin-bottom: 0px;
    }
    .meble-section .filosofiya-block .title {
        font-size: 24px;

    }
    .meble-section .filosofiya-block .text {
        font-size: 17px;
    }
    .meble-section .sozdayom-block {
        margin-bottom: 0px;
    }
    .meble-section .sozdayom-block .title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    .meble-section .sozdayom-block .text {
        font-size: 17px;
    }
    .meble-section .sozdayom-block .text ul {

        gap: 20px;
    }
    .meble-section .sozdayom-block .text ul li {
     padding-left: 32px;
    }
    .meble-section .materiala-block .title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .meble-section .materiala-block .text {
        font-size: 17px;
        margin-bottom: 30px;
    }
    .meble-section .image.image2 {
        margin-bottom: 0px;
    }


    .meble-section.even .zag-block {
        grid-column: 1 / 3;
         grid-row: 1;
        text-align: center;
     }
    .meble-section.even .zag-block .title {
        text-align: center;
    }
    .meble-section.even .image1 {
        grid-column: 1 / 3;
        grid-row: 2;
        max-height: 550px;

    }
    .meble-section.even .filosofiya-block {
        grid-column: 1;
        grid-row: 2;
        margin-top: 230px;
        position: relative;
        z-index: 2;
        margin-left: 30px;
        max-width: 600px;
    }
    .meble-section.even .sozdayom-block {
        grid-column: 2;
        grid-row: 2;
        margin-top: 230px;
        position: relative;
        z-index: 2;
        margin-right: 30px;
    }
    .meble-section.even .image2 {
        grid-column: 2;
        grid-row: 4;
        position: relative;
        z-index: 1;
        max-height: 338px;
    }
    .meble-section.even .materiala-block {
        grid-column: 1;
        grid-row: 4;
    }
    .meble-section .sozdayom-block .text ul {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }
    .meble-section .materiala-block .text ul {

        gap: 15px;
    }
}

/* Smooth scroll for native programmatic jumps (load-time #hash navigation,
   scrollIntoView, etc.). Wheel scroll stays fully native. scroll-padding-top
   offsets the fixed 60px header so anchored targets aren't hidden under it.
   In-page anchor clicks + back-to-top are animated in custom.js instead. */
html {
    scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Back-to-top button — fixed bottom-right, fades in after scrolling past
   one viewport height. Bronze gradient pill, square with rounded corners
   to match the header social icons. Smooth scroll animated in custom.js. */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 0;
    padding: 0;
    background: linear-gradient(138.54deg, #A8683D 0%, #C7875D 94.53%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: linear-gradient(138.54deg, #B47346 0%, #D2956C 94.53%);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.back-to-top svg {
    display: block;
}
@media (max-width: 600px) {
    .back-to-top {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* Dark-theme overrides for /meble-na-wymiar/ — the original block uses
   hardcoded #2C2C2C / #2E2A27 text colors and white plate backgrounds,
   both invisible on the dark scheme. Re-tint everything via theme variables
   and swap the SVG bullet/arrow icons to a light fill. */
[data-bs-theme="dark"] .meble-section .zag-block .title,
[data-bs-theme="dark"] .meble-section .zag-block .text,
[data-bs-theme="dark"] .meble-section .filosofiya-block .title,
[data-bs-theme="dark"] .meble-section .filosofiya-block .text,
[data-bs-theme="dark"] .meble-section .sozdayom-block .title,
[data-bs-theme="dark"] .meble-section .sozdayom-block .text,
[data-bs-theme="dark"] .meble-section .materiala-block .title,
[data-bs-theme="dark"] .meble-section .materiala-block .text {
    color: #FFFFFF;
}
[data-bs-theme="dark"] .meble-section .filosofiya-block,
[data-bs-theme="dark"] .meble-section.even .sozdayom-block {
    background: rgb(42 42 42 / 60%);
    border: none;
}
[data-bs-theme="dark"] .meble-section.even {
    background: transparent;
}
[data-bs-theme="dark"] .meble-section .sozdayom-block .text ul li {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='8' viewBox='0 0 17 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 3.18213C0.223858 3.18213 2.41411e-08 3.40599 0 3.68213C-2.41411e-08 3.95827 0.223858 4.18213 0.5 4.18213L0.5 3.68213L0.5 3.18213ZM16.8536 4.03568C17.0488 3.84042 17.0488 3.52384 16.8536 3.32858L13.6716 0.146596C13.4763 -0.0486661 13.1597 -0.0486661 12.9645 0.146596C12.7692 0.341858 12.7692 0.658441 12.9645 0.853703L15.7929 3.68213L12.9645 6.51056C12.7692 6.70582 12.7692 7.0224 12.9645 7.21766C13.1597 7.41293 13.4763 7.41293 13.6716 7.21766L16.8536 4.03568ZM0.5 3.68213L0.5 4.18213L16.5 4.18213L16.5 3.68213L16.5 3.18213L0.5 3.18213L0.5 3.68213Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
}
[data-bs-theme="dark"] .meble-section .materiala-block .text ul li {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='9' height='9' rx='2' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
}

/* TEMP: hide price-range block in catalog/category filters. Remove this rule to bring it back. */
.filters-row:has(#slider-range) { display: none; }

/* Dark-theme: force light styling inside the white .filters card so labels,
 * search input and checkboxes stay visible (Bootstrap 5.3 dark mode
 * otherwise paints them white-on-white). */
[data-bs-theme="dark"] .filters,
[data-bs-theme="dark"] .filters .checkbox-label,
[data-bs-theme="dark"] .filters .checkbox-label a,
[data-bs-theme="dark"] .filters .title,
[data-bs-theme="dark"] .filters .filters-title {
    color: #2E2A27;
}
[data-bs-theme="dark"] .filters .form-control,
[data-bs-theme="dark"] .filters input.form-control,
[data-bs-theme="dark"] .filters input[type="text"],
[data-bs-theme="dark"] .filters input[type="search"],
[data-bs-theme="dark"] .filters input[type="number"] {
    background-color: #ffffff;
    color: #2E2A27;
    border: 1px solid #E4E4E4;
}
[data-bs-theme="dark"] .filters .form-control::placeholder {
    color: #9a958f;
    opacity: 1;
}
[data-bs-theme="dark"] .filters .form-check-input {
    background-color: #ffffff;
    border-color: #E4E4E4;
}
[data-bs-theme="dark"] .filters .form-check-input:checked {
    background-color: #A8683D;
    border-color: #A8683D;
}