/* RESET I PODSTAWOWE STYLE - FIX DLA SCROLL I POSITIONING */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    padding-top: 80px; /* Kompensacja dla fixed header */
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

/* header 4 ----------------------------------------------------------------- */

.header4 .pozycja {
    display: flex;
    align-items: anchor-center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 50vh;
    will-change: transform;
    transform: translateZ(0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-direction: column;
}

.header4 .pozycja .info-pozycja
{
    display: flex;
    align-items: center;
    justify-content: stretch;
}
.header4 .pozycja h2 {
    
    font-family: var(--font-family-heading);
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-bold);
    color: var(--background-color4);
    padding: 0 1rem 1rem;
    text-align: center;
  
}

.header4 .pozycja-a {
    background-color: var(--background-color);
    background-image: url(../img/dziewczynka_z_pisakiem.jpg);
    position: relative;
}
.header4 .pozycja-a::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ffa502;
    opacity: 0.80;
    z-index: 1;
    pointer-events: none;
}
.accessibility-contrast .header4 .pozycja-a::before {
    opacity: 1;
    background: #ffa502;
}

.header4 .pozycja-a h2 {
    position: relative;
    z-index: 2;
}
.header4 .pozycja-b
{
    background-color: var(--background-color);
    background-image: url(../img/zdjęcie_z_uczniami_ze_szkoly.jpg);
}


/* Container powinien mieć nakładkę - pseudo-elementy na <img> nie działają (replaced elements) */
.section-oferta-left {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Obraz wewnątrz kontenera */
.section-oferta-left img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1; /* poniżej nakładki */
    /* will-change: transform; */
    /* transform: translateZ(0); */
}

/* Nakładka gradientowa na kontenerze */
.section-oferta-left  img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-color);
    z-index: 2;
    pointer-events: none;
}

.header4 .pozycja-b::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ff4757;
    opacity: 0.80;
    z-index: 1;
    pointer-events: none;
}

.accessibility-contrast .header4 .pozycja-b::before {
    opacity: 1;
    background: #ff4757;
}

.header4 .pozycja-b h2 {
    position: relative;
    z-index: 2;
}


.header4 .pozycja-c
{
    background-color: var(--background-color);
    background-image: url(../img/dwie_dziewczynki_uczennice.jpg);
}

.header4 .pozycja-c::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
     background: #5352ed;
    opacity: 0.80;
    z-index: 1;
    pointer-events: none;
}

.accessibility-contrast .header4 .pozycja-c::before {
    opacity: 1;
    background: #5352ed;
}

.header4 .pozycja-c h2 {
    position: relative;
    z-index: 2;
}

.header4 .pozycja-d
{
    background-color: var(--background-color);
    background-image: url(../img/dwie_dziewczynki_z_rękami_zakrywającymi_oczy.jpg);
}

.header4 .pozycja-d::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ffa502;
    opacity: 0.80;
    z-index: 1;
    pointer-events: none;
}

.accessibility-contrast .header4 .pozycja-d::before {
    opacity: 1;
    background: #ffa502;
}

.header4 .pozycja-d h2 {
    position: relative;
    z-index: 2;
}

.header4 a.btn1{
    background-color: var(--background-color4);
    color: var(--background-color5);
    border-radius: 5px;
    padding: 14px 40px;
    font-size: var(--font-size-base);
    font-weight: 800;
    font-family:var(--font-family-heading);
    cursor: pointer;
    z-index: 2;
    text-align: center;
    transition: all .5s;
}
.header4 a.btn1:hover{
    background: #0056b3;
	color: #fff;
	text-decoration:dotted;
}


/* header 4 ----------------------------------------------------------------- */


/* box-header -------------------------------------------------------------------------- */ 

.margin1
{
    margin: 3rem 0;
}



header{
        background-color: var(--background-color2);
        position: relative;
        width: 100%;
}





.box-header
{
    background-color: var(--background-color2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
}

/* Fix dla row w header żeby nie powodowało problemów */
.box-header .row {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.box-header .logo-header img
{
   width: 9rem;
   padding: 1rem 0 0;
}

.box-header .logo-header a
{
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
}

.header-item {
   
    padding: 1rem;
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* overflow: hidden; */ /* Tymczasowo wyłączone */
}




.header-item-right
{
    border-right: solid 0.09rem rgba(var(--color-secondary), .15);
     
}

.header-item-left
{
    border-left: solid 0.09rem rgba(var(--color-secondary), .15);
     
}

.header-item-video
{
    display: flex;
    align-items: normal;
    justify-content: center;
    position: relative; /* Potrzebne dla absolute positioning tekstu */
    overflow: hidden; /* ukryj overlay poza kontenerem */
    height: 70vh;
    /* Optymalizacja dla parallax */
    will-change: transform;
    transform: translateZ(0); /* Hardware acceleration */
    background-color: var(--background-color);
    background-image: url('https://zschocicza.com/wp-content/uploads/2026/01/zdjecie_przedstawiajace-_uczniow_szkoly_w-_jednej_-z_klas.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Header item tył */

.header-item-tyl {
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
   height: 60vh;
    /* will-change: transform; */
    /* transform: translateZ(0); */
    background-image: url('../img/dziewczynka_z_kredkami.jpg');
    background-size: cover;
    /* background-position: center; */
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.header-item-tyl::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-color);

    pointer-events: none;
}

.header-tyl {
    font-family: var(--font-family-heading);
    color: var(--color-inne2);
    text-align: left;
    font-weight: var(--font-weight-bold);
    border-radius: 12px;
    pointer-events: auto;
     padding-top: 12rem;
     z-index: 2;
        
}

.header-tyl h1 {
    font-size: var(--font-size-large);
    font-weight: 700;
    color: var(--background-color4);
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-heading);
    z-index: 2;
    text-align: left;
   
}

.header-tyl p {
   font-size: var(--font-size-small);
    color: var(--color-primary);
    margin-bottom: 32px;
    line-height: var(--line-height-medium);
}

.header-tyl .breadcrumb-link {
    color: var(--color-2) !important;
    text-decoration: underline;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: inline-block;
    padding: 0px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
}

.header-tyl .breadcrumb-text {
    position: relative;
    z-index: 12 !important;
    pointer-events: auto !important;
}


/* Header item tył */






/* ===
   CUSTOM BANNER - Mniejsza wysokość dla podstron
   === */

/* Upewnijmy się, że strona główna zachowuje pełną wysokość */
.header-item-baner:not(.custom-baner-width):not(.custom-height-40) .header-item-video {
    height: 90vh !important;
    min-height: 90vh;
}

/* Zachowanie animacji tekstu na stronie głównej */
.header-item-baner:not(.custom-baner-width):not(.custom-height-40) .header-item-video-text {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: auto;
}

/* Zapewnienie widoczności h1 i p na stronie głównej */
.header-item-baner:not(.custom-baner-width):not(.custom-height-40) .header-item-video-text h1,
.header-item-baner:not(.custom-baner-width):not(.custom-height-40) .header-item-video-text p {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Normalne animacje dla strony głównej */
.header-item-baner:not(.custom-baner-width):not(.custom-height-40) .animated-text {
    /* Pozwól na normalne animacje na stronie głównej */
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s cubic-bezier(.25,.46,.45,.94), transform 0.8s cubic-bezier(.25,.46,.45,.94);
    transition-delay: 0.2s;
}

.header-item-baner:not(.custom-baner-width):not(.custom-height-40) .animated-text.is-visible {
    opacity: 1;
    transform: none;
}

/* Klasa dla zmniejszonej wysokości bannera na podstronach */
.custom-baner-width .header-item-video,
.custom-height-40 .header-item-video {
    height: 50vh; /* Przywracam do 40vh jak było pierwotnie */
    min-height: 300px; /* Minimalna wysokość dla małych ekranów */
}

/* Zachowanie proporcji video w mniejszym kontenerze */
.custom-baner-width .header-item-video video,
.custom-height-40 .header-item-video video {
    width: 120%;
    height: 120%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
}

/* Dostosowanie tekstu w mniejszym kontenerze */
.custom-baner-width .header-item-video-text,
.custom-height-40 .header-item-video-text {
    width: 85%; /* Nieco większa szerokość tekstu */
    z-index: 15; /* Jeszcze wyższy z-index */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1; /* Force opacity */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Zapewnienie widoczności h1 w mniejszym kontenerze */
.custom-baner-width .header-item-video-text h1,
.custom-height-40 .header-item-video-text h1 {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 16;
    font-size: var(--font-size-h1);
    margin-bottom: 1rem;
}

/* Zapewnienie widoczności p w mniejszym kontenerze */
.custom-baner-width .header-item-video-text p,
.custom-height-40 .header-item-video-text p {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 16;
    color: var(--color-2) !important;
}

/* Fix dla breadcrumb linków */
.custom-baner-width .breadcrumb-text,
.custom-height-40 .breadcrumb-text {
    z-index: 17 !important;
    pointer-events: auto !important;
}

.custom-baner-width .breadcrumb-link,
.custom-height-40 .breadcrumb-link {
    z-index: 18 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Responsive dla custom banner */
@media (max-width: 767px) {
    /* Strona główna zachowuje pełną wysokość nawet na mobile */
    .header-item-baner:not(.custom-baner-width):not(.custom-height-40) .header-item-video {
        height: 100vh !important;
        min-height: 100vh;
    }
    
    .custom-baner-width .header-item-video,
    .custom-height-40 .header-item-video {
        height: 35vh; /* Jeszcze mniejsza na mobile */
        min-height: 250px;
    }
    
    .custom-baner-width .header-item-video-text,
    .custom-height-40 .header-item-video-text {
        width: 90%;
        z-index: 20 !important; /* Jeszcze wyższy na mobile */
    }
    
    .custom-baner-width .header-item-video-text h1,
    .custom-height-40 .header-item-video-text h1 {
        font-size: calc(var(--font-size-h1) * 0.8); /* Mniejszy font na mobile */
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .custom-baner-width .header-item-video-text p,
    .custom-height-40 .header-item-video-text p {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        color: var(--color-2) !important;
    }
    .header-item {
   
    justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    /* Strona główna zachowuje pełną wysokość również na małych mobile */
    .header-item-baner:not(.custom-baner-width):not(.custom-height-40) .header-item-video {
        height: 100vh !important;
        min-height: 100vh;
    }
    
    .custom-baner-width .header-item-video,
    .custom-height-40 .header-item-video {
        height: 30vh;
        min-height: 200px;
    }
    
    .custom-baner-width .header-item-video-text,
    .custom-height-40 .header-item-video-text {
        z-index: 25 !important;
    }
    
    .custom-baner-width .header-item-video-text h1,
    .custom-height-40 .header-item-video-text h1,
    .custom-baner-width .header-item-video-text p,
    .custom-height-40 .header-item-video-text p {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* Override animacji dla custom banner - zapewnienie widoczności */
.custom-baner-width .animated-text,
.custom-height-40 .animated-text {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}

.custom-baner-width .animated-text.fade-subtle,
.custom-height-40 .animated-text.fade-subtle {
    opacity: 1 !important;
    transform: none !important;
}

/* ===
   CUSTOM BANNER - END
   === */

.header-item-video video
{
    width: 120%; /* Zwiększona szerokość dla efektu parallax */
    height: 120%; /* Zwiększona wysokość dla efektu parallax */
    object-fit: cover;
    display: block;
    /* Optymalizacja dla parallax */
    will-change: transform;
    transform: translateZ(0); /* Hardware acceleration */
    /* Centrowanie przeskalowanego video */
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
}

/* Nakładka przyciemniająca na film */
.header-item-video::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gradient-color);
    z-index: 1;
    pointer-events: none;
}

.header-item-video-text {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Zmienione z none na auto - pozwala na klikanie */
    z-index: 10; /* Zwiększony z-index z 2 na 10 dla pewności */
    transform: translate(-50%, -50%);
    text-align: center;
    /* Optymalizacja dla parallax */
    will-change: transform, opacity;
    backface-visibility: hidden; /* Smooth animations */
}

.header-item-video-text h1 {
    font-family: var(--font-family-heading);
    color: #000;
    text-align: center;
    font-size: var(--font-size-large);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-bold);
    pointer-events: auto;
}

.header-item-video-text p {
    font-family: var(--font-family-text);
    color: #000;
    text-align: center;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    padding: 0rem 2rem;
    border-radius: 12px;
    pointer-events: auto; /* Zmienione z none na auto */
    margin-top: 0.5rem;
    font-weight: 600;
}

.header-item-video-text a.btn1{
    background-color: #000;
    color: var(--color-inne2);
    border-radius: 5px;
    padding: 14px 40px;
    font-size: 1.15rem;
    font-weight: 600;
    border: solid .3rem var(--background-color3);
    font-family:var(--font-family-heading);
    text-transform: uppercase;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 2rem 0 0;
    transition: .5s;
}

.header-item-video-text a.btn1:hover{
background: #0056b3;
	color: #fff;
	text-decoration:dotted;
}

.header-item-video-text a.btn1:hover
{
   
}
.header-item-video-text a.btn1:focus
{
    border: solid .3rem var(--background-color3);
}

/* Style dla linków w tekście video */


/* Specjalne style dla breadcrumb */
.breadcrumb-text {
    position: relative;
    z-index: 12 !important;
    pointer-events: auto !important;
    background-color: var(--background-color);
}

ol.breadcrumb-text{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0rem;
    white-space: nowrap;
}

.breadcrumb-link {
    color: var(--color-inne2) !important;
    text-decoration: underline;
    cursor: pointer !important;
    pointer-events: auto;
    display: inline-block;
    padding: 14px 15px;
    /* border-radius: 4px; */
    transition: all 0.3s ease;
    background-color: var(--background-color4);
    backdrop-filter: blur(2px);
    text-decoration: none;
    font-size: var( --font-size-base);
}

.breadcrumb-link:hover {
    transform: translateY(-1px);
    text-decoration: underline;
}

.current-page {
   color: var( --color-primary);
    padding: 0 10px;
    font-size: var(--font-size-base);
}

/* Responsywne ustawienia dla linków w header video */
@media (max-width: 767px) {
    .header-item-video-text {
        width: 90%;
        z-index: 15; /* Jeszcze wyższy na mobile */
    }
    
    .breadcrumb-link {
        padding: 6px 12px;
        min-height: 44px; /* iOS minimum touch target */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .breadcrumb-text {
        z-index: 16 !important;
    }
}

.header-item-menu 
{
           
    color: white;
    padding: 1rem;
    text-align: center;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: end;
}




/*-- box-header Baner -------------------------------*/
.header-item-baner
{
    display: flex;
    align-items: normal;
    justify-content: center;
    padding: 0rem;
   
    background-color: var(--background-gradient1);
    /* Optymalizacja dla parallax */
    will-change: transform;
    transform: translateZ(0); /* Hardware acceleration */
    position: relative;
    overflow: hidden;
}
.header-item-baner video
{
    width: 600px;
    height: 600px;
    object-fit: cover;
    display: block;
    background-color: var(--background-color);
    border-radius: 50%;
    clip-path: none;
    box-shadow: 0 4px 32px rgba(0,0,0,0.12);
}

.header-item-text-xl
{
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color2);
}

.header-item-text-xl h1{
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: left;
    font-size: var(--font-size-xxlarge);
    line-height: var(--line-height-xxlarge);
   
         
   
}

.header-item-text-m {
    display: flex;
    flex-direction: column; /* Ustawia elementy jeden pod drugim */
    align-items: flex-start; /* Tekst do lewej */
    justify-content: center;
    padding: 2rem;
}

.header-item-text-m p {
    font-family: var(--font-family-text);
    color: var(--color-secondary);
    text-align: left;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: 0.5rem; /* odstęp pod h2 */
}

.header-item-text-m h2 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xlarge);
    line-height: var(--line-height-xlarge);
    padding: 0 0 1rem;
}


/* ===
   SMALL MOBILE (max-width: 767px)
   === */
@media (max-width: 767px) {


.header-item-text-m
{
    padding: 1rem 1rem 0 2rem;
}
/*
.header-item-baner {
    margin: 2rem 0 1rem;
    padding: 0rem 0 3rem;
}
*/

}

/* box-header -------------------------------------------------------------------------- */



/* MENU DESKTOPOWE - Menu główne dla większych ekranów */

/* Kontener główny menu desktopowego */
.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3.5rem 0 0;
    background-color: transparent;
    white-space: nowrap; /* Dodane: nie zawijaj menu w dół */
}

/* Lista menu desktopowego */
.menu ul {
    list-style: none;
    border-radius: 50px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
    white-space: nowrap; /* Dodane: nie zawijaj elementów listy */
}

.menu ul li {
    margin: 0;
    padding: 0;
}

/* Podstawowe style dla linków menu desktopowego */
.menu ul li a {
    text-decoration: none;
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    white-space: nowrap; /* Dodane: nie zawijaj tekstu w linkach */
}

/* Główne linki menu (link-1) */
.menu ul li a.link-1 {
    color: var(--color-primary);
    background-color: transparent;
    border: 2px solid transparent;
    border-color: var(--color-primary);
}

.menu ul li a.link-1:hover {
    color: var(--color-accent);
    background-color: var(--background-color4);
    border-color: var( --background-color2);
    transform: translateY(-2px);
}

/* Link wyróżniony (link-2) z tłem */
.menu ul li a.link-2,
.menu ul li a.tlo-a-menu {
    background: var(--background-gradient);
    color: var(--color-secondary);
    border-radius: 24px;
    padding: 14px 40px;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    box-shadow: 0 2px 12px rgba(40, 80, 160, 0.13);
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
}

.menu ul li a.link-2:hover,
.menu ul li a.tlo-a-menu:hover {
    background: var(--background-gradient2);
     transform: translateY(-2px) scale(1.06);
     box-shadow: 0 6px 24px rgba(40,80,160,0.18);
}

/* SUBMENU - Menu rozwijane */
/* Kontener submenu */
.menu ul li {
    position: relative;
}

/* Submenu domyślnie ukryte */
#submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 200px;
    z-index: 1000;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
}

/* Pokazanie submenu przy hover na rodzicu */
.menu ul li:hover #submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Style dla linków w submenu */
#submenu li {
    margin: 0;
    padding: 0;
}

#submenu li a {
    display: block;
    padding: 0.8rem 1.5rem;
    color: var(--color-0);
    background-color: transparent;
    border-radius: 0;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-align: start;
}

#submenu li:last-child a {
    border-bottom: none;
}

#submenu li a:hover {
    background-color: var(--color-2);
    color: var(--color-0);
    transform: translateY(0);
    border-color: transparent;
}

/* Wskaźnik submenu (strzałka) */
.menu ul li:has(#submenu) > a::after {
    content: "▼";
    margin-left: 0.5rem;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.menu ul li:hover:has(#submenu) > a::after {
    transform: rotate(180deg);
}

/* Responsywność - ukryj menu desktopowe na małych ekranach */
@media (max-width: 1200px) {
    .menu {
        display: none;
    }
}

/* MENU DESKTOPOWE - Menu główne dla większych ekranów */





/* section O nas -------------------------------------------------------------------------- */

/* Główna sekcja O nas */
.section-o-nas {
    position: relative;
    overflow: hidden;
}

/* Dodanie subtelnego gradientowego overlay */


/* Kontener treści sekcji O nas */

/* Nagłówek sekcji O nas */
.section-o-nas h2 {
   font-size: var(--font-size-xlarge);
    font-weight: 700;
    color: var(--color-primary);
    max-width: 20rem;
    margin: 4rem 0 1rem;
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-heading);
}

.section-o-nas h3 {
   font-size: var(--font-size-large);
    font-weight: 700;
    color: var(--color-primary);
    max-width: 20rem;
    margin: 4rem 0 1rem;
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-heading);
}

.section-o-nas h4 {
   font-size: var(--font-size-large);
    font-weight: 700;
    color: var(--color-primary);
    max-width: 20rem;
    margin: 4rem 0 1rem;
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-heading);
}

.section-o-nas h5 {
   font-size: var(--font-size-medium);
    font-weight: 700;
    color: var(--color-primary);
    max-width: 20rem;
    margin: 4rem 0 1rem;
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-heading);
}



/* Paragraf sekcji O nas */
.section-o-nas p {
    font-size: var(--font-size-smallx);
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.4;
    text-align: left;
    max-width: 30rem;
}

.section-o-nas ul {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.section-o-nas ul li {
    font-size: var(--font-size-smallx);
    color: var(--color-secondary);
    background: linear-gradient(90deg, rgba(40,80,160,0.09) 0%, rgba(58,123,213,0.07) 100%);
    border-radius: 12px;
    padding: 1rem 2rem 1rem 2.5rem;
    position: relative;
    margin: 0;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 2px 12px rgba(40,80,160,0.06);
    transition: background 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.section-o-nas ul li::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--background-gradient);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(40,80,160,0.13);
}

.section-o-nas ul li::after {
    content: "▶";
    position: absolute;
    left: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    opacity: 0.9;
    z-index: 2;
    pointer-events: none;
}

.section-o-nas ul li:hover {
    background: linear-gradient(90deg, rgba(40,80,160,0.18) 0%, rgba(58,123,213,0.13) 100%);
    box-shadow: 0 6px 24px rgba(40,80,160,0.13);
    transform: translateY(-2px) scale(1.02);
}

.section-o-nas ol {
    margin: 2rem 0;
    padding-left: 2.5rem;
}

.section-o-nas ol li {
    font-size: var(--font-size-smallx);
    color: var(--color-secondary);
    background: linear-gradient(90deg, rgba(40,80,160,0.09) 0%, rgba(58,123,213,0.07) 100%);
    border-radius: 12px;
    padding: 1rem 2rem 1rem 2.5rem;
    margin: 0;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 2px 12px rgba(40,80,160,0.06);
    transition: background 0.3s, box-shadow 0.3s;
    overflow: hidden;
    position: relative;
}

.section-o-nas ol li:hover {
    background: linear-gradient(90deg, rgba(40,80,160,0.18) 0%, rgba(58,123,213,0.13) 100%);
    box-shadow: 0 6px 24px rgba(40,80,160,0.13);
    transform: translateY(-2px) scale(1.02);
}

@media (max-width: 767px) {
    .section-o-nas ul li,
    .section-o-nas ol li {
        font-size: var(--font-size-text1);
        padding: 0.8rem 1.5rem 0.8rem 2.2rem;
        border-radius: 10px;
    }
    .section-o-nas ul li::before {
        width: 10px;
        height: 10px;
        left: 0.7rem;
    }
    .section-o-nas ul li::after {
        left: 1rem;
        font-size: 0.6rem;
    }
    .header-item-tyl{
        height: 40vh;
    }
    .header-tyl{
        padding-top: 8rem;
    }
}

.section-o-nas img {
    width: 100%;
    height: auto;
    max-width: 20rem;
    display: block;
   margin: 4rem 0 0;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(40,80,160,0.09);
}

@media (max-width: 768px) {
    .section-o-nas img {
        max-width: 90vw;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .section-o-nas img {
        max-width: 100vw;
        border-radius: 8px;
    }
img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(40,80,160,0.09);
}
}

@media (max-width: 768px) {
    .section-zegar img {
        max-width: 90vw;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .section-zegar img {
        max-width: 100vw;
        border-radius: 8px;
    }
}

.section-o-nas a.btn1
{
    background-color: var(--background-color3);
    color: var(--color-link);
    border-radius: 24px;
    padding: 14px 40px;
    font-size: 1.15rem;
    font-weight: 600;
    border: solid .3rem var(--background-color3);
    text-transform: uppercase;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 2rem 0 0;
    display: inline-block;
    text-align: left;
    /* Ustawienie przycisku po lewej stronie */
    margin-left: 0;
    margin-right: auto;
}

.section-o-nas .section-onas-item
{
    border-bottom-width: 0.09rem;
    padding: 1rem;
    text-align: center;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


/* Responsywność dla sekcji O nas */
@media (max-width: 768px) {
    
    
    .section-o-nas h2 {
        font-size: var(--font-size-h2);
        margin-bottom: 1.5rem;
    }
    
    .section-o-nas p {
        font-size: var(--font-size-text2);
        padding: 0 1rem;
    }
    
    .section-o-nas h2::after {
        width: 60px;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .section-o-nas {
        padding: 2rem 0;
    }
    
    .section-o-nas h2 {
        font-size: var(--font-size-text6);
    }
    
    .section-o-nas p {
        font-size: var(--font-size-text1);
        line-height: var(--font-size-text-line-height2);
    }
}

/* section O nas -------------------------------------------------------------------------- */

/* Kontener przycisku w sekcji O nas */
.section-onas-item {
    border-bottom-width: 0.09rem;
    padding: 1rem;
    text-align: center;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* PRZYCISKI CTA -------------------------------------------------------------------------- */

/* Przycisk główny CTA */
.btn1 {
    
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;

}

/* PRZYCISKI CTA -------------------------------------------------------------------------- */


/* section OFERTA -------------------------------------------------------------------------- */

/* Główna sekcja Oferta */
.section-oferta {
    background-color: var(--background-color2);
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

/* Dodanie subtelnego gradientowego overlay dla oferta */
.section-oferta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--gradient-color-1, rgba(0,0,0,0.03)) 0%, var(--gradient-color-2, rgba(0,0,0,0.01)) 100%);
    pointer-events: none;
}

/* Kontener treści sekcji Oferta */
.section-oferta .row {
    position: relative;
    z-index: 2;
}

/* Nagłówek sekcji Oferta */



   






/* Kontener przycisku w sekcji Oferta */
.section-oferta-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-top: 4rem;
    padding: 1rem 0;
    color: var(--color-primary);
    font-family: var(--font-family-text);
    font-size: var(--font-size-base);
}

.section-oferta-item-video {
    display: flex;
    align-items: normal;
    justify-content: center;
    padding: 5rem 0 0;
    rotate: 10deg;
    color: var(--color-secondary);
    font-family: var(--font-family-text);
    font-size: var(--font-size-base);
}


.section-oferta-item-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: var(--background-color);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);

}


@media (max-width: 768px) {
    .section-oferta-item
    {
        margin-top: 0rem;
    }

    .section-oferta {
        padding: var(--padding-section-mobile, 2rem 0);
    }
    
    .section-oferta h2 {
        font-size: var(--font-size-text6);
    }
    
    .section-oferta p {
        font-size: var(--font-size-text1);
        line-height: var(--font-size-text-line-height2);
    }
    
    .header4 a.btn1 {
        padding: 10px;
        font-weight: 400;
    }
}

/* section OFERTA -------------------------------------------------------------------------- */


/* opinie klientów -------------------------------------------------------------------------- */

.opinie-klientow {
    background-color: var(--background-color);
   padding: 4rem;
    position: relative;
    overflow: hidden;
}

.opinie-klientow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--opinie-gradient1, rgba(255,255,255,0.05)) 0%, var(--opinie-gradient2, rgba(255,255,255,0.01)) 100%);
    pointer-events: none;
}

.opinie-klientow .row {
    position: relative;
    z-index: 2;
}

.opinie-klientow h2 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: center;
    font-size: var(--font-size-xlarge);
    font-weight: var(--font-weight-bold);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    position: relative;
}

.opinie-klientow h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--background-gradient);
    border-radius: 2px;
}

.opinie-klientow p {
    font-family: var(--font-family-text);
    color: var(--color-secondary);
    text-align: center;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    padding: 0rem 2rem;
    border-radius: 12px;
    pointer-events: none;
    margin-top: 0.5rem;
}

.opinie-klientow .opinie-item {
    border-bottom-width: var(--opinie-border-width, 0.09rem);
    padding: var(--opinie-item-padding, 1rem);
    text-align: center;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Responsywność dla sekcji opinie klientów */
@media (max-width: 768px) {
    .opinie-klientow {
        padding: var(--opinie-padding-tablet, 3rem 0);
    }
    .opinie-klientow h2 {
        font-size: var(--font-size-h2);
        margin-bottom: var(--opinie-h2-margin-tablet, 1.5rem);
    }
    .opinie-klientow p {
        font-size: var(--font-size-text2);
        padding: var(--opinie-p-padding-tablet, 0 1rem);
    }
    .opinie-klientow h2::after {
        width: var(--opinie-h2-after-width-tablet, 60px);
        height: var(--opinie-h2-after-height-tablet, 3px);
    }
}

@media (max-width: 480px) {
    .opinie-klientow {
        padding: var(--opinie-padding-mobile, 2rem 0);
    }
    .opinie-klientow h2 {
        font-size: var(--font-size-text6);
    }
    .opinie-klientow p {
        font-size: var(--font-size-text1);
        line-height: var(--font-size-text-line-height2);
    }
}

/* opinie klientów ------------------------------------------------- */




.page {
    background-color: var(--background-color2);
    padding: var(--page-padding, 4rem 0 4rem);
    position: relative;
    overflow: hidden;
}
.page img{
    width: 100%;
    max-width: var(--page-img-max-width, 20rem);
    padding: var(--page-img-padding, 2rem 2rem);
}

.page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--page-gradient1, rgba(255,255,255,0.05)) 0%, var(--page-gradient2, rgba(255,255,255,0.01)) 100%);
    pointer-events: none;
}

.page .row {
    position: relative;
    z-index: 2;
}

.page h2 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: left;
    font-size: var(--font-size-xlarge);
    font-weight: var(--font-weight-bold);
    margin-top: 0rem;
    margin-bottom: 1rem;
    position: relative;
    padding: 0rem 2rem;
}

.page h3 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: left;
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-bold);
    position: relative;
    padding: 0rem 2rem;
}

.page h4 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin-top: 0rem;
    margin-bottom: 1rem;
    position: relative;
    padding: 0rem 2rem;
}

.page h5 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    position: relative;
    padding: 0rem 2rem;
}

.page h6 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: left;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    margin-bottom: 0.6rem;
    padding-bottom: 0.2rem;
    position: relative;
    padding: 0rem 2rem;
}

.page h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--background-gradient);
    border-radius: 2px;
}

.page p {
    font-family: var(--font-family-text);
    color: var(--color-3);
    text-align: left;
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height3);
    padding: 0rem 2rem;
    border-radius: 12px;
    pointer-events: none;
    margin-top: 0.5rem;
}

.page span {
    font-family: var(--font-family-text);
    color: var(--color-3);
    text-align: left;
    font-size: var(--page-span-font-size, 0.8rem);
    line-height: var(--font-size-text-line-height3);
    padding: 0rem 2rem;
    border-radius: 12px;
    pointer-events: none;
    margin-top: 0.5rem;
     font-weight: var(--font-weight6);
}

.page ul {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.page ul li {
    font-family: var(--font-family-text);
    color: var(--color-2);
    text-align: left;
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height3);
    padding: 1rem 2.5rem 1rem 3rem;
    border-radius: 16px;
    background: var(--page-li-bg, linear-gradient(90deg, rgba(40,80,160,0.09) 0%, rgba(58,123,213,0.07) 100%));
    margin-bottom: 0;
    position: relative;
    pointer-events: auto;
    box-shadow: var(--page-li-shadow, 0 2px 12px rgba(40,80,160,0.06));
    transition: background 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.page ul li::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: var(--background-gradient);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(40,80,160,0.13);
}
.page ul li::after {
    content: "▶";
    position: absolute;
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--page-li-after-color, #fff);
    font-size: var(--page-li-after-font-size, 0.8rem);
    font-weight: bold;
    opacity: 0.9;
    z-index: 2;
    pointer-events: none;
}

.page ul li:hover {
    background: var(--page-li-bg-hover, linear-gradient(90deg, rgba(40,80,160,0.18) 0%, rgba(58,123,213,0.13) 100%));
    box-shadow: var(--page-li-shadow-hover, 0 6px 24px rgba(40,80,160,0.13));
    transform: translateY(-2px) scale(1.02);
}

@media (max-width: 767px) {
    .page ul li {
        font-size: var(--font-size-text1);
        padding: 0.8rem 1.5rem 0.8rem 2.2rem;
        border-radius: 12px;
    }
    .page ul li::before {
        width: 14px;
        height: 14px;
        left: 0.7rem;
    }
    .page ul li::after {
        left: 1rem;
        font-size: 0.7rem;
    }
}

.page strong {
    font-family: var(--font-family-text);
    color: var(--color-3);
    text-align: left;
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height3);
    padding: 0rem 2rem;
    border-radius: 12px;
    pointer-events: none;
    margin-top: 0.5rem;
    font-weight: var(--font-weight6);
}

.page .opinie-item {
    border-bottom-width: 0.09rem;
    padding: 1rem;
    text-align: left;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Linki w footer top */
.page a {
    font-family: var(--font-family-text);
    color: var(--color-3);
    text-decoration: none;
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height2);
    transition: all 0.3s ease;
    position: relative;
    padding: 0rem 2rem;
}

/* Hover effect dla linków */
.page a:hover {
    color: var(--color-2);
}

/* Efekt underline na hover */
.page a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 2rem;
    width: 0;
    height: 2px;
    background: var(--background-gradient);
    transition: width 0.3s ease;
}

.page a:hover::after {
    width: 100%;
}

/* Responsywność dla sekcji opinie klientów */
@media (max-width: 768px) {
    .page {
        padding: var(--page-padding-tablet, 3rem 0);
    }
    .page h2 {
        font-size: var(--font-size-h2);
        margin-bottom: var(--page-h2-margin-tablet, 1.5rem);
    }
    .page p {
        font-size: var(--font-size-text2);
        padding: var(--page-p-padding-tablet, 0 1rem);
    }
    .page h2::after {
        width: var(--page-h2-after-width-tablet, 60px);
        height: var(--page-h2-after-height-tablet, 3px);
    }
}

@media (max-width: 480px) {
    .page {
        padding: var(--page-padding-mobile, 2rem 0);
    }
    .page h2 {
        font-size: var(--font-size-text6);
    }
    .page p {
        font-size: var(--font-size-text1);
        line-height: var(--font-size-text-line-height2);
    }
}

/* podstrony page ------------------------------------------------- */

/* sekcja MY -------------------------------- */

.my-section
{
    margin: 4rem 0;
}

/* sekcja MY -------------------------------- */

/* section ZEGAR - Liczniki/Counters -------------------------------------------------------------------------- */

/* Główna sekcja Zegar */
.section-zegar {
   
    position: relative;
    overflow: hidden;
    padding: 0rem 2rem 0 0;
}

.section-zegar img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(40,80,160,0.09);
}

@media (max-width: 768px) {
    .section-zegar img {
        max-width: 90vw;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .section-zegar img {
        max-width: 100vw;
        border-radius: 8px;
    }
}


/* Kontener treści sekcji Zegar */
.section-zegar .row {
    position: relative;
    z-index: 2;
}

/* Nagłówek sekcji Zegar */
.section-zegar h2 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    text-align: center;
    font-size: var(--font-size-large);
    line-height: var(--line-height-xlarge);
    font-weight: var(--font-weight-bold);
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    position: relative;
}



/* Kontener pojedynczego atutu */
.zegar-atut {
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    background-color: var(--background-color);
    border-radius: 1rem;
    padding: 1rem;
    border: 8px solid var(--background-color2);
}



/* Liczba/Counter */
.zegar-liczba {
   font-size: var(--font-size-medium);
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.4;
    text-align: left;
    font-weight: var(--font-weight-bold);
}

/* Efekt pulsowania liczby podczas animacji */
.zegar-liczba.counting {
    animation: pulse-scale 0.1s ease-in-out;
}

@keyframes pulse-scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Opis pod liczbą */
.zegar-opis {
    font-size: var(--font-size-smallx);
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.4;
    text-align: left;
}

/* Dekoracyjna linia nad opisem */
.zegar-opis::before {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--background-gradient);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.zegar-atut:hover .zegar-opis::before {
    opacity: 1;
}

/* Animacja fadeIn dla całej sekcji */
.section-zegar .col-4,
.section-zegar .col-12 {
    animation: fadeInUp 0.8s ease-out;
}

.section-zegar .col-4:nth-child(2) { animation-delay: 0.2s; }
.section-zegar .col-4:nth-child(3) { animation-delay: 0.4s; }
.section-zegar .col-4:nth-child(4) { animation-delay: 0.6s; }

/* Responsywność dla sekcji Zegar */
@media (max-width: 768px) {
    .section-zegar {
        padding: 1rem 0 0;
    }
    
    .section-zegar h2 {
        font-size: var(--font-size-h2);
        margin-bottom: var(--zegar-h2-margin-tablet, 2rem);
    }
    
    .zegar-atut {
        padding: var(--zegar-atut-padding-tablet, 1.5rem 1rem);
        margin-bottom: var(--zegar-atut-margin-tablet, 1.5rem);
    }
    
    .zegar-liczba {
        font-size: var(--zegar-liczba-size-tablet, 3rem);
    }
    
    .zegar-opis {
        font-size: var(--font-size-text2);
    }
    
    .section-zegar h2::after {
        width: var(--zegar-h2-after-width-tablet, 60px);
        height: var(--zegar-h2-after-height-tablet, 3px);
    }
}

@media (max-width: 480px) {
    .section-zegar {
        padding: var(--zegar-padding-mobile, 3rem 0);
    }
    
    .section-zegar h2 {
        font-size: var(--font-size-text6);
        margin-bottom: var(--zegar-h2-margin-mobile, 1.5rem);
    }
    
    .zegar-atut {
        padding: var(--zegar-atut-padding-mobile, 1rem);
        margin-bottom: var(--zegar-atut-margin-mobile, 1rem);
    }
    
    .zegar-liczba {
        font-size: var(--zegar-liczba-size-mobile, 2.5rem);
    }
    
    .zegar-opis {
        font-size: var(--font-size-text1);
        letter-spacing: var(--zegar-opis-letter-spacing-mobile, 0.5px);
    }
}

/* section ZEGAR - Liczniki/Counters -------------------------------------------------------------------------- */




/* box footer TOP ----------------------------------------------------------------- */

/* Główna sekcja footer top */
.box-footer-top {
    background-color: var(--background-color4);
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
   
    /* Dodaj fale na górnej krawędzi */
}


/* Dodanie subtelnego gradientowego overlay */

/* Kontener treści footer top */
.box-footer-top .row {
    position: relative;
    z-index: 2;
}

/* Wspólne style dla wszystkich footer items */
.box-footer-top .footer-item1,
.box-footer-top .footer-item2,
.box-footer-top .footer-item3 {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Nagłówki w footer top */
.box-footer-top h2 {
    font-family: var(--font-family-heading);
    color: var( --color-inne2);
    text-align: left;
    font-size: var(--font-size-text4);
    line-height: var(--font-size-text-line-height4);
    font-weight: var(--font-weight9);
    margin-bottom: var(--footer-top-h2-margin, 1.5rem);
    padding-bottom: var(--footer-top-h2-padding-bottom, 0.8rem);
    position: relative;
    border-bottom: var(--footer-top-h2-border-bottom, 2px solid);
    border-image: var(--background-gradient);
    border-image-slice: 1;
}

.box-footer-top h3 {
   font-size: 2rem;
    font-weight: var(--font-weight-bold);
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    padding: 0 2rem 2rem; 
}
.box-footer-top h4 {
   font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    background: var(--background-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    padding: 2rem 2rem 1rem; 
}

.box-footer-top img {
    margin: 0.5rem 2rem 1rem;
}

/* Paragrafy w footer top */
.box-footer-top p {
   font-family: var(--font-family-text);
    color: var(--color-inne2);
    font-size: var(--font-size-base);
    line-height: var(--line-height-medium);
    padding: 0rem 2rem;
   
}

/* Listy w footer top */
.box-footer-top ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-grow: 1;
}

.box-footer-top ul li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1rem;
}



/* Linki w footer top */
.box-footer-top ul li a {
    background-color: var(--background-color3);
    color: var(--color-link);
    border-radius: 5px;
    padding: 14px 20px;
    font-size: var(--font-size-small);
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(40, 80, 160, 0.13);
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    text-transform: uppercase;
    border: none;
    outline: none;
    cursor: pointer;
    margin: .5rem 1rem 0;
    display: inline-block;
    text-decoration: none;
    transition: .5s;
}

.box-footer-top ul li a:hover {
    background: #0056b3;
}

/* Hover effect dla linków */


/* Efekt underline na hover */
.box-footer-top ul li a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--background-gradient);
    transition: width 0.3s ease;
}

.box-footer-top ul li a:hover::after {
    width: 100%;
}

/* Specyficzne style dla różnych sekcji footer */

/* Footer item 1 - Kontakt */
.box-footer-top .footer-item1 {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer item 2 - Nasza oferta */
.box-footer-top .footer-item2 {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer item 3 - Śledź nas */
.box-footer-top .footer-item3 ul li a {
    font-weight: var(--font-weight2);
}

.box-footer-top .footer-item3 ul li a:hover {
    transform: translateX(3px);
}

/* Responsywność dla footer top */
@media (max-width: 768px) {
    
    
    .box-footer-top .footer-item1,
    .box-footer-top .footer-item2,
    .box-footer-top .footer-item3 {
        border-right: none;
        border-bottom: var(--footer-top-item-border-bottom-tablet, 1px solid rgba(255, 255, 255, 0.1));
        margin-bottom: var(--footer-top-item-margin-bottom-tablet, 1rem);
    }
    
    .box-footer-top .footer-item3 {
        border-bottom: none;
    }
    
    .box-footer-top h2 {
        font-size: var(--font-size-text3);
        margin-bottom: var(--footer-top-h2-margin-tablet, 1rem);
    }
    
    .box-footer-top p
    {
        padding: 0rem;
    }
    .box-footer-top h3 
    {
        padding: 0rem 0rem 2rem
    }

    .box-footer-top ul li a {
        
        text-align: center;
        padding-bottom: var(--footer-top-pb-tablet, 1rem);
    }

    .box-footer-top ul li {
  
    padding-left: 0rem;
    }
    .box-footer-top ul li a 
    {
        margin: .5rem 0rem 0;
        padding: 10px 10px;
    }
}

@media (max-width: 480px) {
    
    
    .box-footer-top .footer-item1,
    .box-footer-top .footer-item2,
    .box-footer-top .footer-item3 {
        padding: var(--footer-top-item-padding-mobile, 2rem);
    }
    
    .box-footer-top h2 {
        font-size: var(--font-size-text2);
        margin-bottom: var(--footer-top-h2-margin-mobile, 0.8rem);
    }
    
    .box-footer-top ul li {
        margin-bottom: var(--footer-top-li-margin-mobile, 0rem);
    }
}

/* box footer TOP ----------------------------------------------------------------- */


/* box footer ----------------------------------------------------------------- */

.box-footer{
    background-color: var(--background-color2);
    position: relative;
}

.box-footer .footer-video
{
    
    padding: 1rem;
    text-align: center;
    min-height: 40px;
    max-height: 40px;
    display: flex;
    align-items: normal;
    justify-content: center;
}
.box-footer .footer-video video
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.box-footer .footer-item1
{
    color: var(--color-primary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    padding: 1rem;
    
}
.box-footer .footer-item1 a
{
    color: var(--color-accent);
    transition: .5s;
}
.box-footer .footer-item1 a:hover
{
    color: var(--color-secondary);
}



/* box footer ----------------------------------------------------------------- */
































/* menu RWD ------------------------------------------------------------------------  */

/* MENU RWD - Stylizacja i animacje menu rozwijanego */

/* Główne ustawienia kontenera menu */
#menu {
    background-color: var(--background-color2); /* Kolor tła menu */
    /*
        background-image: url(../img/17.gif); /* Opcjonalne tło animowane */
    
    background-size: 3000px;
    background-repeat: no-repeat;
    background-position: 0 -30px;
    background-attachment: fixed;
    z-index: 3;
    animation: bg-move 12s ease-in-out infinite alternate; /* Animacja tła */
    height: 100%;
    right: 0;
    opacity: 0; /* Domyślnie ukryte */
    overflow-y: auto;
    position: fixed;
    text-align: center;
    top: 0;
    transition: all 0.3s ;
    visibility: hidden;
    width: 0vw;
    z-index: 998;
    box-shadow: rgb(0 0 0 / 25%) 0px 0px 15px 5px; /* Cień pod menu */
}

/* Animacja wejścia karty menu od góry */
#menu {
        transform: translateY(-100%);
        transition: transform 1.6s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.5s, visibility 0.5s, width 0.5s;
}

/* Po otwarciu menu przesuwa się na miejsce */
#menu.open {
        opacity: 1;
        visibility: visible;
        width: 80vw;
        transform: translateX(0);
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
}

/* --- MOBILE FIX --- */
@media (max-width: 583px) {
    #menu {
        width: 100vw !important;
        left: 0;
        right: 0;
        max-width: 100vw;
        min-width: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #menu .main-nav {
        top: 0;
        transform: none;
        position: static;
        padding: 0;
        margin: 0;
    }
    #menu .main-nav a.link-menu,
    #menu .main-nav a.link-kontakt,
    #menu .main-nav h2,
    #menu .main-nav h3,
    #menu .main-nav p,
    #menu .main-nav span {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 1.1rem;
        word-break: break-word;
        text-align: left;
    }
    #menu .main-nav .linki-menu-rwd,
    #menu .main-nav .dane-kontaktowe-menu-rwd {
        padding: 20px 0;
        margin-top: 30px;
    }
    #menu .menu-footer {
        padding: 1rem;
        position: static;
    }
}

/* Animacja fadeInUp dla tekstów menu */
@keyframes fadeInUp {
        from {
                opacity: 0;
                transform: translateY(40px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

/* Teksty pojawiają się po wejściu karty */
#menu.open li {
        opacity: 0;
        animation: fadeInUp .9s forwards;
}

/* Opóźnienia animacji dla kolejnych elementów menu */
#menu.open li:nth-child(1) { animation-delay: 0.7s; }
#menu.open li:nth-child(2) { animation-delay: 0.8s; }
#menu.open li:nth-child(3) { animation-delay: 0.9s; }
#menu.open li:nth-child(4) { animation-delay: 1s; }
#menu.open li:nth-child(5) { animation-delay: 1.1s; }
#menu.open li:nth-child(6) { animation-delay: 1.2s; }
#menu.open li:nth-child(7) { animation-delay: 1.3s; }
#menu.open li:nth-child(8) { animation-delay: 1.4s; }
#menu.open li:nth-child(9) { animation-delay: 1.5s; }
#menu.open li:nth-child(10) { animation-delay: 1.6s; }
#menu.open li:nth-child(11) { animation-delay: 1.7s; }

/* Reset opacity i animacji dla li gdy menu zamknięte */
#menu li {
        opacity: 1;
        animation: none;
}

/* Efekt przyciemnienia linków przy najechaniu na ul */
#menu ul:hover a {
        opacity: 0.5;
        transition: .5s;
}

/* Podstawowe ustawienia linków */
#menu ul a {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity 0.3s ease-in-out;
    color: var(--menu-link-color, inherit);
    font-family: var(--font-family-text);
    font-size: var(--menu-link-font-size, 1rem);
}

/* Efekt podświetlenia linku przy hover */
#menu ul a:hover {
    opacity: 1;
    color: var(--menu-link-hover-color, #ffffff);
}

/* Pozycjonowanie głównej nawigacji w pionie */
/*
#menu .main-nav {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
}
 */
#menu .main-nav {
    position: relative;
    top: 2rem;
    transform: translateY(0%); 
}

/* Usunięcie stylów listy */
#menu .main-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
}

/* Gradientowy tekst linków głównych */
#menu .main-nav a {
    color: var(--color-primary);
    font-family: var(--font-family-text);
    font-size: var(--menu-main-link-font-size, 1.2rem);
}

/* Fallback for browsers that do not support background-clip: text */
@supports not (-webkit-background-clip: text) {
    #menu .main-nav a {
        color: var(--color-primary);
        background: none;
    }
}

/* Wygląd głównych linków menu */
#menu .main-nav a.link-menu {
    display: block;
    font-size: var(--font-size-base);
    line-height: var(--line-height-large);
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    padding: 1rem 0 0 2rem;
   
}

/* Wygląd linku kontaktowego */
#menu .main-nav a.link-kontakt {
    display: block;
    padding: var(--menu-link-kontakt-padding, .5rem 4rem);
    text-align: left;
    text-decoration: none;
    font-family: var(--font-family-text);
    text-align: left;
    font-weight: var(--font-weight3);
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height2);
}

/* Usunięcie paddingu dla pierwszego linku */
#menu .main-nav a:first {
        padding-top: 0;
}

/* Dodatkowe odstępy dla sekcji linków i kontaktów */
#menu .main-nav .linki-menu-rwd {
        padding: 50px 0;
}
#menu .main-nav .dane-kontaktowe-menu-rwd {
        padding: 50px 0;
        margin-top: 100px;
}

/* Gradientowy tekst nagłówków menu */
#menu .main-nav h2 {
    background: var(--background-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: block;
    font-size: var(--menu-h2-font-size, 1.5rem);
    font-family: var(--font-family-heading, "Lato", sans-serif);
    padding: var(--menu-h2-padding, .5rem 4rem);
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: var(--menu-h2-font-weight, 800);
}
#menu .main-nav h3 {
    background: var(--background-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: block;
    font-size: var(--menu-h3-font-size, 1.5rem);
    font-family: var(--font-family-heading, "Lato", sans-serif);
    padding: var(--menu-h3-padding, .5rem 4rem);
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: var(--menu-h3-font-weight, 800);
}

/* Wygląd paragrafów i spanów w menu */
#menu .main-nav p,
#menu .main-nav span {
        
    display: block;
    font-size: var(--menu-p-font-size, .8rem);
    padding: var(--menu-p-padding, .5rem 4rem);
    text-decoration: none;
    font-family: var(--font-family-text);
    color: var(--color-2);
    text-align: left;
    font-weight: var(--font-weight3);
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height2);
}

/* SUBMENU RWD - Menu rozwijane w wersji mobilnej */
/* Główny kontener li z submenu */
#menu .main-nav li {
    position: relative;
}

/* Submenu RWD - domyślnie pokazane (statycznie) */
#submenu-rwd {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid;
    border-image: var(--background-gradient);
    border-image-slice: 1;
}

/* Elementy listy submenu RWD */
#submenu-rwd li {
    margin: 0;
    padding: 0;
}

/* Linki w submenu RWD */
#submenu-rwd li a {
    display: block;
    padding: 0.4rem 2rem 0.4rem 5rem;
    font-family: var(--font-family-text);
    color: var(--color-2);
    text-decoration: none;
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height2);
    font-weight: var(--font-weight3);
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ostatni element bez ramki */
#submenu-rwd li:last-child a {
    border-bottom: none;
}

/* Hover dla linków submenu RWD */
#submenu-rwd li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    padding-left: 6rem;
    background: var(--background-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Wskaźnik submenu RWD (strzałka) dla rodzica */
#menu .main-nav li:has(#submenu-rwd) > a.link-menu::after {
    content: "▼";
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-2);
}

/* Mobile fix dla submenu RWD */
@media (max-width: 583px) {
    #submenu-rwd li a {
        padding-left: 2rem;
        padding-right: 1rem;
    }
    #submenu-rwd li a:hover {
        padding-left: 3rem;
    }
}

/* Stopka menu */
#menu .menu-footer {
        padding: 2rem;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
}
#menu .menu-footer ul {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;
}
#menu .menu-footer ul li {
        display: inline;
        margin: 0 1rem;
}
#menu .menu-footer a {
        color: #ffffff;
        text-decoration: none;
        text-transform: uppercase;
}

/* Przycisk hamburgera do otwierania menu */
.toggle-menu {

    position: fixed;
    top: 0rem;
    right: .7rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: block;
    float: right;
    height: 50px;
    outline: none;
    padding: 0;
    pointer-events: initial;
  
    width: 30px;
    z-index: 1110;
    display: none;
  
   
}

/* Wygląd kresek hamburgera */
.toggle-menu span {
        background-color: var(--color-primary);
        content: "";
        display: block;
        height: 3px;
        border-radius: 50px;
        left: calc(50% - 13px );
        position: absolute;
        top: calc(50% - 1px );
        transform-origin: 50% 50%;
        width: 26px;
}

/* Dwie dodatkowe kreski hamburgera */
.toggle-menu span:before, .toggle-menu span:after {
        background-color: var(--color-primary);
        content: "";
        display: block;
        height: 3px;
        border-radius: 50px;
        position: absolute;
        transform-origin: 50% 50%;
        width: 26px;
}
.toggle-menu span:before {
        top: 7px;
        transform: none;
        -webkit-transform: none;
}
.toggle-menu span:after {
        top: -7px;
        transform: none;
        -webkit-transform: none;
}

/* Animacja hamburgera po aktywacji (zamiana w X) */
.toggle-menu.active span {
        background-color: transparent;
        transition: background 0.2s ease-out;
}
.toggle-menu.active span:before, .toggle-menu.active span:after {
        transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;
        z-index: 2;
        opacity: 1;
}
.toggle-menu.active span:before {
        top: 0;
        transform: rotate3d(0, 0, 1, -45deg);
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
}
.toggle-menu.active span:after {
        top: 0;
        transform: rotate3d(0, 0, 1, 45deg);
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
}

/* Animacja pulsowania kresek hamburgera */
.toggle-menu span,
.toggle-menu span:before,
.toggle-menu span:after {
    animation: hamburger-pulse 1.2s infinite;
}
.toggle-menu span:before {
    animation-delay: 0.2s;
}
.toggle-menu span:after {
    animation-delay: 0.4s;
}

/* Popraw -webkit-transform w menu */
#menu ul a {
        transform: translateZ(0); /* Dodaj standardową właściwość */
        -webkit-transform: translateZ(0);
        transition: opacity 0.3s ease-in-out;
}


#menu .main-nav {
    position: relative;
    top: 2rem;
    transform: translateY(0%); 
}



/* ===
   SMALL MOBILE (max-width: 1200px)
   === */
@media (max-width: 1200px) {
    .toggle-menu
    {
        display: block; /* pokaz przycisk hamburgera domyślnie */;
    }
     
}

/* ===
   SMALL MOBILE (max-width: 767px)
   === */
@media (max-width: 767px) {
    
#menu .main-nav a.link-menu {
    display: block;
    
}
#menu .main-nav .dane-kontaktowe-menu-rwd {
        padding: 1rem 0;
        margin-top: 0px;
}


}
/* menu RWD ------------------------------------------------------------------------  */


/* ===
   ANIMOWANE TEKSTY - .animated-text
   jak używać:
   <!-- Podstawowa animacja (fade-up) -->
    <h2 class="animated-text">Tytuł sekcji</h2>

    <!-- Z konkretnym wariantem -->
    <p class="animated-text fade-left">Tekst wjeżdżający z lewej</p>

    <!-- Z efektem skalowania -->
    <div class="animated-text fade-scale">Zawartość z efektem scale</div>

    <!-- Bardzo subtelna animacja (domyślna) -->
<h2 class="animated-text">Delikatny tytuł</h2>

<!-- Tylko fade bez ruchu -->
<p class="animated-text fade-only">Tekst z samym fade</p>

<!-- Subtelne przesunięcie -->
<div class="animated-text fade-subtle">Bardzo delikatny ruch</div>
    
   === */

.animated-text {
    /* Podstawowe style dla animowanych elementów - SUBTELNA WERSJA */
    opacity: 0;
    transform: translateY(15px); /* Zmniejszone przesunięcie z 40px na 15px */
    transition: opacity 0.8s cubic-bezier(.25,.46,.45,.94), transform 0.8s cubic-bezier(.25,.46,.45,.94); /* Delikatniejszy easing i dłuższy czas */
    transition-delay: 0.2s; /* Zmniejszone opóźnienie */
    
    /* Zapewnienie płynności animacji */
    will-change: transform, opacity;
    backface-visibility: hidden;
    
    /* Stan aktywny - gdy element jest widoczny */
    &.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Warianty opóźnień dla efektu staggered - bardziej subtelne */
.animated-text:nth-child(1) { transition-delay: 0.1s; }
.animated-text:nth-child(2) { transition-delay: 0.15s; }
.animated-text:nth-child(3) { transition-delay: 0.2s; }
.animated-text:nth-child(4) { transition-delay: 0.25s; }
.animated-text:nth-child(5) { transition-delay: 0.3s; }

/* Różne warianty animacji - SUBTELNE */
.animated-text.fade-up {
    transform: translateY(15px); /* Zmniejszone z 40px */
}

.animated-text.fade-down {
    transform: translateY(-15px); /* Zmniejszone z -40px */
}

.animated-text.fade-left {
    transform: translateX(-15px); /* Zmniejszone z -40px */
}

.animated-text.fade-right {
    transform: translateX(15px); /* Zmniejszone z 40px */
}

.animated-text.fade-scale {
    transform: scale(0.96) translateY(8px); /* Subtelniejszy scale z 0.9 na 0.96 i mniejsze przesunięcie */
}

/* Nowy wariant - bardzo subtelny fade */
.animated-text.fade-subtle {
    transform: translateY(8px); /* Bardzo małe przesunięcie */
    transition-duration: 1s; /* Jeszcze dłuższa animacja */
}

/* Wariant tylko z fade bez ruchu */
.animated-text.fade-only {
    transform: none;
    transition: opacity 1s ease-out;
}

/* Animacja dla nagłówków */
.animated-text h1,
.animated-text h2,
.animated-text h3,
.animated-text h4 {
    margin-bottom: 0.5rem;
}

/* Animacja dla paragrafów */
.animated-text p {
    margin-bottom: 1rem;
}

/* Lepsze performance na urządzeniach mobilnych */
@media (prefers-reduced-motion: reduce) {
    .animated-text {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ===
   ANIMOWANE TEKSTY - END
   === */