@charset "UTF-8";
/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.4
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Sticky header. Po przewinięciu strony script.js dokłada .scrolled na <header>,
   gradient tła robi header > .site-header::before (niżej w tym pliku),
   a poniżej zostaje sama zmiana rozmiaru: wysokość paska i skala logo.

   Odstępy w spoczynku zostają takie, jak ustawione w Elementorze – zmieniamy je
   tylko na czas .scrolled i tylko w dół, licząc od wartości z panelu. Stara wersja
   wpisywała tu na sztywno padding: 0, przez co odstęp znikał zamiast się zmniejszać
   i nie wracał na mniejszych breakpointach. */
.elementor-location-header .site-header {
    /* Pokrętła efektu, wszystkie na czas .scrolled: odstęp Elementora (wewnątrz),
       odstęp dokładany przez motyw (na zewnątrz) i dodatkowe podniesienie logo.
       Odstęp zewnętrzny sam z siebie przesuwa treść: jest wyśrodkowana w pionie,
       więc jedzie w górę o połowę tego, co znika. */
    --header-shrink-padding: 8px;
    --header-shrink-outer-padding: 0px;
    --header-shrink-logo-lift: -20px;

    min-height: 140px;
    transition:
        min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding-block-start 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding-block-end 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-location-header .site-header > .e-con-inner {
    transition:
        padding-block-start 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding-block-end 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wysokość paska ogranicza od dołu jego treść, więc samo min-height by jej nie
   zmniejszyło – trzeba oddać odstępy. Bierzemy je stąd, skąd naprawdę są:
   padding-block: 0 zdejmuje 1rem, które dokłada header-footer.css motywu (kontener
   ma klasę .site-header), a podmiana --padding-block-* przycina odstęp ustawiony
   w Elementorze. min() pilnuje, żeby na tablecie i mobile, gdzie w Elementorze jest
   0, nic się nie *dodało*. Wartość spoczynkowa zostaje w panelu, nie tutaj. */
.elementor-location-header.scrolled .site-header {
    --padding-block-start: min(var(--padding-top), var(--header-shrink-padding));
    --padding-block-end: min(var(--padding-bottom), var(--header-shrink-padding));

    min-height: 90px;
    padding-block: var(--header-shrink-outer-padding);
}

.elementor-location-header .site-header .header-logo img {
    display: block;
    transform-origin: center center;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-location-header.scrolled .site-header .header-logo img {
    transform: translateY(var(--header-shrink-logo-lift)) scale(0.67);
}

/* Poniżej desktopu logo jest niemal całą wysokością paska: mieści się w środku
   (kontener nie ma już ujemnych marginesów) i nie wystaje poza header, więc nie ma
   czego kompensować podnoszeniem – zostaje sama skala. Do tego oddajemy połowę
   odstępu motywu, żeby wyśrodkowana treść nie podskakiwała o całe 16px. */
@media (max-width: 1024px) {
    .elementor-location-header .site-header {
        --header-shrink-outer-padding: 8px;
        --header-shrink-logo-lift: 0px;
    }
}

@media (max-width: 767px) {
    .elementor-location-header .site-header {
        min-height: 100px;
    }

    .elementor-location-header.scrolled .site-header {
        min-height: 75px;
    }

    .elementor-location-header.scrolled .site-header .header-logo img {
        transform: scale(0.65);
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-location-header .site-header,
    .elementor-location-header .site-header > .e-con-inner,
    .elementor-location-header .site-header .header-logo img {
        transition-duration: 0.01ms;
    }
}


.blur-4 {
    backdrop-filter: blur(4px);
}

.blur-10 {
    backdrop-filter:blur(10px);
}

.left-border-gradient {
    position: relative;
}

.left-border-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, #BF915B 0%, #FFFFFF00 100%);
    pointer-events: none;
}

.border-gradient {
    border-radius: 32px;
}

.border-gradient a{
    box-shadow: 0 1px 0 0 rgba(247, 245, 240, 0.12) inset, 0 -1px 0 0 #A58A69 inset;
}

.border-bottom-gradient,
.kontakt-border-bottom-gradient {
    position: relative;
}

.border-bottom-gradient::after,
.kontakt-border-bottom-gradient::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, #BF915B 0%, rgba(255, 255, 255, 0) 75%);
    pointer-events: none;
}

/* Na wąskim ekranie gradient wygasa zbyt szybko, więc linia jest jednolita. */
@media (max-width: 767px) {
    .kontakt-border-bottom-gradient::after {
        background: #BF915B4D;
    }
}

.container-gradient:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            0deg,
            #5F1B17 0%,
            rgba(95, 27, 23, 0) 50%
        ),
        linear-gradient(
            270deg,
            rgba(234, 222, 207, 0.05) 0%,
            rgba(185, 153, 142, 0.08) 1.72%,
            rgba(160, 118, 109, 0.10) 3.44%,
            rgba(136, 84, 77, 0.15) 6.88%,
            rgba(116, 56, 51, 0.25) 13.75%,
            rgba(103, 38, 33, 0.45) 27.5%,
            rgba(95, 27, 23, 0.85) 55%,
            #5F1B17 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.20),
            rgba(0, 0, 0, 0.20)
        );
    pointer-events: none;
}

.video-container-gradient .elementor-background-video-container::before {
    --background-overlay: '';
    background-image: linear-gradient(98deg, rgba(87, 22, 20, 0.70) 8.04%, rgba(199, 62, 42, 0.70) 84.5%), linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
}

.video-container-gradient2 .elementor-background-video-container::before {
    --background-overlay: '';
    background-image: 
        linear-gradient(
            98deg,
            rgba(87, 22, 20, 0.40) 8.04%,
            rgba(199, 62, 42, 0.40) 84.5%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.35) 100%
        );
}

.video-container-gradient4 .elementor-background-video-container::before {
    --background-overlay: '';
    background-image: 
        linear-gradient(
            98deg,
            rgba(87, 22, 20, 0.40) 8.04%,
            rgba(199, 62, 42, 0.40) 84.5%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.50) 100%
        );
}
.video-container-gradient5 .elementor-background-video-container::before {
    --background-overlay: '';
    background-image: 
        linear-gradient(
            98deg,
            rgba(87, 22, 20, 0.40) 8.04%,
            rgba(199, 62, 42, 0.40) 84.5%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.40) 100%
        );
}
/* Gradienty nakładane na zdjęcie ustawione w Elementorze (Style -> Background).
   Korzysta ze slotu .e-con::before, który Elementor rezerwuje na Background Overlay. */
.e-con.homepage-section-gradient {
    isolation: isolate;
}

.e-con.homepage-section-gradient::before {
    --background-overlay: '';
    --overlay-opacity: 1;
    background-image:
        linear-gradient(
            96deg,
            rgba(87, 22, 20, 0.70) 7.68%,
            rgba(88, 26, 23, 0.70) 139.81%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.70) 100%
        );
    pointer-events: none;
    z-index: -1;
}

/* Sticky scroll section: bloki nakładają się na siebie i przełączają przy scrollu.
   svh zamiast vh: na mobile vh odpowiada dużemu viewportowi (pasek adresu schowany),
   przez co panel byłby wyższy niż widoczny obszar. dvh odpada – zmienia się w trakcie
   zwijania paska, czyli wymuszałby reflow sekcji przy każdej klatce scrolla. */
.scroll-section {
    --scroll-step: 100vh;
    --scroll-step: 100svh;
    height: calc(var(--scroll-steps, 3) * var(--scroll-step));
}

/* Na telefonie skracamy dystans przewijania; panel zostaje pełnoekranowy. */
@media (max-width: 767px) {
    .scroll-section {
        --scroll-step: 70vh;
        --scroll-step: 70svh;
    }
}

/* Elementor daje .e-con-inner flex-grow: 1, przez co rozciągałby się na całą
   wysokość sekcji i sticky nigdy by się nie aktywował. */
.e-con.scroll-section.e-flex > .e-con-inner {
    display: grid !important;
    grid-template-columns: 1fr;
    align-content: center;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
}

.scroll-section > .e-con-inner > .e-con {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.scroll-section > .e-con-inner > .e-con.is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0s linear 0s;
}

/* W edytorze Elementora sekcja wraca do zwykłego układu. */
.elementor-editor-active .scroll-section {
    height: auto;
}

.elementor-editor-active .e-con.scroll-section.e-flex > .e-con-inner {
    display: flex !important;
    position: static;
    flex: 1 1 auto;
    height: auto;
}

.elementor-editor-active .scroll-section > .e-con-inner > .e-con,
.elementor-editor-active .scroll-section > .e-con-inner > .e-con .entry-animation-text {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-section > .e-con-inner > .e-con,
    .scroll-section > .e-con-inner > .e-con .entry-animation-text {
        transition-duration: 0.01ms;
    }
}

/* Wariant: .scroll-section jako kontener Full (bez własnego .e-con-inner).
   Sekcja jest wtedy wysokim "spacerem", a panele przyklejają się w jednym polu gridu. */
.e-con.scroll-section.e-con-full {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0;
}

.scroll-section.e-con-full > .e-con {
    grid-area: 1 / 1;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    align-content: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.scroll-section.e-con-full > .e-con.is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0s linear 0s;
}

/* Sekcje, w których panele różnią się tylko oznaczonym tekstem.
   Reszta oprawy (tło, nagłówek, stopka panelu) powtarza się w każdym panelu,
   więc przenikanie całości wygląda jak mignięcie tej samej treści. Tutaj panele
   przełączają się natychmiast – animuje się wyłącznie .entry-animation-text.
   Sekcje bez tej klasy zachowują dotychczasowe przenikanie paneli. */
.scroll-section:has(.entry-animation-text) > .e-con-inner > .e-con,
.scroll-section:has(.entry-animation-text) > .e-con-inner > .e-con.is-active,
.scroll-section.e-con-full:has(.entry-animation-text) > .e-con,
.scroll-section.e-con-full:has(.entry-animation-text) > .e-con.is-active {
    transition: none;
}

.scroll-section:has(.entry-animation-text) .entry-animation-text {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-section:has(.entry-animation-text) .e-con.is-active .entry-animation-text {
    opacity: 1;
    transform: none;
}

.elementor-editor-active .e-con.scroll-section.e-con-full {
    display: flex !important;
    height: auto;
}

.elementor-editor-active .scroll-section.e-con-full > .e-con,
.elementor-editor-active .scroll-section .entry-animation-text {
    position: static;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-section.e-con-full > .e-con,
    .scroll-section.e-con-full > .e-con .entry-animation-text {
        transition-duration: 0.01ms;
    }
}

/* Kontener obu headerów ma w Elementorze klasę .site-header, a Hello Elementor
   traktuje ją jak swój własny header. Przez to paddingi boczne z widgetu (64px
   desktop / 20px tablet i mobile) są nadpisywane: kit drukuje
   .site-header{padding-inline:0} (Ustawienia witryny -> Header -> Side Margins,
   domyślnie 0), a theme.css poniżej 576px dokłada padding-inline:10px. Oba
   wchodzą po CSS kontenera, więc wracamy do wartości liczonych przez Elementora
   – zmienne same zmieniają się na każdym breakpoincie. */
.elementor-location-header .e-con.site-header {
    padding-inline-start: var(--padding-inline-start);
    padding-inline-end: var(--padding-inline-end);
}

header > div {
    position: relative;
    isolation: isolate;
}

/* Gradient wjeżdżający pod treść headera po scrollu. Siedzi w slocie ::before, który
   Elementor rezerwuje kontenerowi na Background Overlay, więc nie potrzebuje własnego
   elementu; z-index: -1 trzyma go pod treścią, a isolation: isolate wyżej pilnuje,
   żeby nie uciekł pod tło strony.

   Wyzwalaczem jest .scrolled ze script.js, nie .elementor-sticky--active. Ta druga
   klasa jest tu zawodna: kontener ma w Elementorze position: fixed, a wtedy sticky
   Pro nie ma czego przyklejać i klasa potrafi się nigdy nie pojawić – gradient wisiał
   na warunku, który nie zachodzi. */
header > .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(95, 27, 23, 0.00) 9.43%, #5F1B17 90.57%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: -1;
}

header.scrolled > .site-header::before {
    opacity: 1;
}

/* Header na białym tle: bez przyciemnienia po scrollu.
   content: none w ogóle nie tworzy pseudoelementu – inaczej niż opacity: 0,
   które zostawiłoby niewidoczny box nad treścią headera. */
header > .site-header.header-białe-tło::before {
    content: none;
}

p {
    margin-block-end:0;
    margin-block-start:0;
}


.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form textarea {
    padding: 17px 16px;
}

.custom-contact-form .elementor-field-type-acceptance {
    margin-top: 10px;
	margin-bottom:10px !important;
}

.elementor-field-group.elementor-field-type-acceptance {
    --checkbox-size: 20px;
    --checkbox-gap: 14px;
    --checkbox-offset: 0.15em; /* zrownanie ze srodkiem pierwszej linii tekstu */
    --checkbox-bg: #FFFFFF;
    --checkbox-border: rgba(95, 27, 23, 0.15);
    --checkbox-border-hover: #BF915B;
    --checkbox-checked-bg: #5F1B17;
    --checkbox-check: #FFFFFF;
}

.elementor-field-group.elementor-field-type-acceptance .elementor-field-option {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

.elementor-field-group.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] {
    position: absolute;
    top: var(--checkbox-offset);
    left: 0;
    z-index: 1;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.elementor-field-group.elementor-field-type-acceptance .elementor-field-option label {
    display: block;
    padding-left: calc(var(--checkbox-size) + var(--checkbox-gap));
    /* wciecie dziala na kazda linie, wiec tekst ustawia sie w rowna kolumne */
    text-indent: 0;
    cursor: pointer;
	font-size: 12px;
}

/* kolko */
.elementor-field-group.elementor-field-type-acceptance .elementor-field-option label::before {
    content: "";
    position: absolute;
    top: var(--checkbox-offset);
    left: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border-radius: 50%;
    background-color: var(--checkbox-bg);
    box-shadow: inset 0 0 0 1px var(--checkbox-border);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* ptaszek */
.elementor-field-group.elementor-field-type-acceptance .elementor-field-option label::after {
    content: "";
    position: absolute;
    top: var(--checkbox-offset);
    left: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.25 8.5L6.5 11.75L12.75 4.75' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.elementor-field-group.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]:hover + label::before {
    box-shadow: inset 0 0 0 1px var(--checkbox-border-hover);
}

.elementor-field-group.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]:checked + label::before {
    background-color: var(--checkbox-checked-bg);
    box-shadow: inset 0 0 0 1px var(--checkbox-checked-bg);
}

.elementor-field-group.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]:checked + label::after {
    opacity: 1;
    transform: scale(1);
}

.elementor-field-group.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--checkbox-border-hover);
    outline-offset: 3px;
}

.elementor-field-type-acceptance label {
    line-height: 22px;
}

.tabs-with-sliders .e-n-tabs-content {
    margin-right: calc(50% - 50vw);
}

html, body {
    overflow-x: clip;
}

.tabs-with-sliders .e-n-tabs-content .offset-right {
    padding-inline-end: 200px;
}

.menu-popup .elementor-location-popup {
    height: 100%;
}

.menu-popup .menu-popup-main-container {
    height: 100%;
}

.menu-popup .menu-popup-main-container .e-con-inner{
    justify-content: space-between;
}

.menu-popup-main-container .elementor-nav-menu--layout-vertical>ul>li>a {
    justify-content: center;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/Lato-Medium.woff2') format('woff2');
}

@media (max-width: 1024px) {
    .menu-popup-main-container .elementor-nav-menu--layout-vertical>ul>li>a {
        justify-content: flex-start;
    }
}


@media (max-width: 767px) {
    .tabs-with-sliders .e-n-tabs-content { margin-right: 0; }

    .tabs-with-sliders .e-n-tabs-content .offset-right {
    padding-inline-end: var(--e-n-carousel-swiper-offset-size, 0);
}
}

@media (prefers-reduced-motion: reduce) {
    .elementor-field-group.elementor-field-type-acceptance .elementor-field-option label::before,
    .elementor-field-group.elementor-field-type-acceptance .elementor-field-option label::after {
        transition-duration: 0.01ms;
    }
}

@media (max-width: 767px) {
    .custom-carousel .elementor-swiper-button {
        display: none !important;
    }
    
    .custom-contact-form input[type="text"],
    .custom-contact-form input[type="email"],
    .custom-contact-form textarea {
        padding: 12px 16px;
    }

    .elementor-field-group.elementor-field-type-acceptance {
        --checkbox-size: 12px;
        --checkbox-gap: 12px;
        --checkbox-offset: 0.15em; /* zrownanie ze srodkiem pierwszej linii tekstu */
        --checkbox-bg: #FFFFFF;
        --checkbox-border: rgba(95, 27, 23, 0.15);
        --checkbox-border-hover: #BF915B;
        --checkbox-checked-bg: #5F1B17;
        --checkbox-check: #FFFFFF;
    }

    .o-inwestycji-accordion .e-n-accordion-item-title-text {
        font-weight: 400;
    }

}
/* ── o-inwestycji-accordion: zamkniety item = 16px na kazdym rogu ── */

.o-inwestycji-accordion details {
    border-radius: 16px;
    border: 1px solid #D6B48A3D;
}

.o-inwestycji-accordion .e-n-accordion-item {
    overflow: hidden;
}


.o-inwestycji-accordion .e-n-accordion-item:not([open]),
.o-inwestycji-accordion .e-n-accordion-item:not([open]) > .e-n-accordion-item-title {
    border-radius: 16px;
}

/* wersja klasyczna widgetu Accordion (elementor-accordion) */
.o-inwestycji-accordion .elementor-accordion-item:not(:has(.elementor-tab-title.elementor-active)),
.o-inwestycji-accordion .elementor-tab-title[aria-expanded="false"] {
    border-radius: 16px;
}

/* Oś czasu (steps-section): jedna ciągła linia na całą sekcję, z wypełnieniem rosnącym
   wraz ze scrollem. Kropki to kontenery wstawione w .middle-column w Elementorze –
   CSS zmienia im tylko tło w momencie, w którym dojedzie do nich wypełnienie.
   Geometrię linii (--tl-line-*) wylicza JS, bo zależy od realnej pozycji kropek. */
.steps-section {
    --tl-accent: #d6b48a;
    --tl-track: rgba(214, 180, 138, 0.25);
    /* O ile linia wystaje ponad pierwszą kropkę. Wypełnienie startuje od jej góry. */
    --tl-lead: 50px;
    --tl-line-x: 50%;
    --tl-line-top: 0px;
    --tl-line-height: 0px;
    --tl-fill: 0px;
    position: relative;
}

/* .e-con podbija specyficzność ponad regułę Elementora
   .elementor-element:where(.e-con-full,.elementor-widget), która ma tylko (0,1,0). */
.e-con.steps-section {
    gap: 0;
}

.e-con.step-section-row {
    align-items: stretch;
}

.steps-section::before,
.steps-section::after {
    content: "";
    position: absolute;
    top: var(--tl-line-top);
    left: var(--tl-line-x);
    width: 1px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Tor – od pierwszej do ostatniej kropki. */
.steps-section::before {
    height: var(--tl-line-height);
    background: var(--tl-track);
}

/* Wypełnienie – wysokość aktualizowana przy każdej klatce scrolla, bez transition. */
.steps-section::after {
    z-index: 1;
    height: var(--tl-fill);
    background: var(--tl-accent);
}

/* Kropki muszą leżeć nad linią; rozmiar, kolor i zaokrąglenie zostają z Elementora. */
.step-section-row > .middle-column > .e-con {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.step-section-row.is-active > .middle-column > .e-con {
    background-color: var(--tl-accent);
}

.step-section-row > .left-column,
.step-section-row > .right-column {
    opacity: 0.35;
    transition: opacity 0.6s ease;
}

.step-section-row.is-active > .left-column,
.step-section-row.is-active > .right-column {
    opacity: 1;
}

/* Mobile: oś zostaje po lewej, a treść układa się w pionie obok niej – tytuł nad tekstem.
   Grid, bo .left-column i .right-column to osobne dzieci wiersza; samym flexem nie da się
   ich ustawić jedno pod drugim obok kolumny środkowej bez dokładania wrappera.
   Rozmieszczenie jest jawne, więc nie zależy od kolejności ustawionej w Elementorze. */
@media (max-width: 767px) {
    .e-con.step-section-row {
        display: grid;
        grid-template-columns: auto 1fr;
    }

    .step-section-row > .middle-column {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .step-section-row > .left-column {
        grid-column: 2;
        grid-row: 1;
    }

    .step-section-row > .right-column {
        grid-column: 2;
        grid-row: 2;
    }
}

.elementor-editor-active .step-section-row > .left-column,
.elementor-editor-active .step-section-row > .right-column {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .step-section-row > .middle-column > .e-con,
    .step-section-row > .left-column,
    .step-section-row > .right-column {
        transition-duration: 0.01ms;
    }
}

.galeria-slider {
    --gal-fade: 120px;
    position: relative;
}

.galeria-slider::before,
.galeria-slider::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: var(--gal-fade);
    pointer-events: none;
}

/* Zanik biegnie poziomo, do środka slidera: pełny kolor na krawędzi zewnętrznej,
   przezroczystość od strony treści. Stopnie 17.95% / 90.34% zostają z Figmy –
   dzięki nim skrajne 10% jest w pełni kryjące, a wewnętrzne 18% całkiem czyste. */
.galeria-slider::before {
    left: 0;
    background: linear-gradient(to left, rgba(84, 20, 19, 0) 17.95%, #541413 90.34%);
}

.galeria-slider::after {
    right: 0;
    background: linear-gradient(to right, rgba(84, 20, 19, 0) 17.95%, #541413 90.34%);
}

@media (max-width: 767px) {
    .galeria-slider {
        --gal-fade: 48px;
    }
}

#sm3de {
    height: 800px !important;
}

._3deoa__layout-embed-overlay-switch {
    background-color: rgba(0, 0, 0, 0.0) !important;
}

/* Wygląd wyłączonych tabów galerii. Które to są, decyduje script.js – tutaj tylko
   reagujemy na ustawiony przez niego atrybut disabled. Dzięki temu w edytorze
   (gdzie skrypt nie wyłącza niczego) taby zostają normalne, bez osobnej reguły.
   pointer-events gasi też hover – :hover łapie również przycisk disabled. */
.galeria-tabs .e-n-tabs-heading > .e-n-tab-title[disabled] {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.lang-switcher {
  position: relative;
  display: inline-block;
  font-family: inherit;
}

.lang-switcher__toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color:#fff;
    font-family: "Lato", Sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
	padding: 5px !important;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle:focus {
  background: transparent;
  border-color: transparent !important;
  color: #fff;
	opacity:0.6;
}

.lang-switcher__toggle .arrow {
    width: 6px;
    height: 6px;
    transform: rotate(-45deg);
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-color: #fff;
}

.lang-switcher.open .lang-switcher__toggle .arrow {
    transform: rotate(135deg);
}

.lang-switcher__dropdown {
    display: none;
    position: absolute;
    top: 120%;
    left: 0;
    background: #FFFFFF1F;
    min-width: 100px;
    z-index: 999;
    border-radius: 10px;
}

.lang-switcher.open .lang-switcher__dropdown {
    display: block;
}

.lang-switcher .lang-switcher__dropdown a {
    color: #fff;
}

.lang-switcher .lang-switcher__dropdown .lang-item {
    display: flex;
    padding: 6px 12px;
    text-decoration: none;
    color: #B9B9B9;
    align-items: center;
}

.lang-switcher .lang-switcher__dropdown .lang-item.is-active {
    color: #fff;
}

.lang-switcher .lang-switcher__dropdown .lang-item.is-active::before {
    content: "";
    margin-right: 12px;
    width: 8px;
    height: 8px;
    background-color: #fff;
}



/* Nested Tabs poniżej breakpointu (u nas: mobile) przechodzą w akordeon – nagłówek
   dostaje display:contents, więc każdy tab ląduje tuż nad swoim panelem. W galerii
   chcemy zwykłe taby: wszystkie w jednej linii na górze, treść pod nimi. Selektory
   powtarzają kształt reguł Elementora z dodaną .galeria-tabs, żeby wygrać wagą. */
@media (max-width: 767px) {
    .elementor.elementor .galeria-tabs.elementor-widget-n-tabs.e-n-tabs-mobile {
        --n-tabs-heading-display: flex;
        --n-tabs-content-display: flex;
    }

    .elementor.elementor .galeria-tabs.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs {
        gap: var(--n-tabs-gap);
    }

    .elementor.elementor .galeria-tabs.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-content > .e-con {
        order: initial;
    }

    .elementor.elementor .galeria-tabs.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title {
        order: initial;
        width: var(--n-tabs-title-width);
    }

    /* Marginesy akordeonu rozjeżdżałyby rząd tabów – w poziomie odstęp daje już
       gap nagłówka (--n-tabs-title-gap). */
    .elementor.elementor .galeria-tabs.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title:not(:first-child) {
        margin-block-start: 0;
    }

    .elementor.elementor .galeria-tabs.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title[aria-selected="true"] {
        margin-block-end: 0;
    }
}



#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-color: transparent;
    border-bottom: 1px solid var(--e-global-color-e4d570c) !important;
    color: var(--e-global-color-e4d570c) !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    border: 2px solid var(--e-global-color-e4d570c) !important;
}

button#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    color: var(--e-global-color-0e0273c) !important;
    background-color: var(--e-global-color-e4d570c) !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    background-color: var(--e-global-color-e4d570c) !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: var(--e-global-color-e4d570c) !important;
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    background-color: var(--e-global-color-e4d570c) !important;
    border-color: var(--e-global-color-e4d570c) !important;
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    border-color: var(--e-global-color-66334af) !important;
}

#CookiebotWidget .CookiebotWidget-consent-details button {
    color: var(--e-global-color-66334af) !important;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: var(--e-global-color-66334af) !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
    color: var(--e-global-color-e4d570c) !important;
}