.page p {
  
    border-radius: 16px;
    font-size: 1.13rem;
    color: #2a3550;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s cubic-bezier(.4,0,.2,1);
}

.page strong {
    font-weight: 800;
}

.page ul {
    gap: 1.3rem;
    margin: 1rem 0;
}
.page ul li {
    border-radius: 16px;
    padding: .5rem;
    margin-bottom: .5rem;
    font-size: 1.13rem;
    color: #2a3550;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s cubic-bezier(.4,0,.2,1);
    
}


.page img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(40, 80, 160, 0.13), 0 0 0 8px rgba(58, 123, 213, 0.07);
    transition: box-shadow 0.3s, transform 0.3s;
    position: relative;
    z-index: 1;
}
.page img:hover {
    box-shadow: 0 8px 32px rgba(40,80,160,0.18);
    transform: scale(1.03);
}
/* --- Nowoczesna stylizacja tekstów w ofercie --- */
.page .row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
}


.page h2 {
     font-size: calc(var(--font-size-text3) + 0.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: left;
    background: linear-gradient(90deg, #2850a0 60%, #3a7bd5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.page h3 {
    font-size: calc(var(--font-size-text3) + 0.1rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: left;
    background: linear-gradient(90deg, #2850a0 60%, #3a7bd5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.page h4 {
    border-radius: 10px;
    padding: .5rem;
    margin-top: 1rem;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    color: #2a3550;
    font-weight: 700;
    line-height: 1.8;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(90deg, #e3eaf6 0%, #f8fafc 100%);
    border: 1.5px solid rgba(58, 123, 213, 0.09);
    background: linear-gradient(90deg, #cfd8dc 0%, #e3eaf6 100%);
    border-color: #40c4ff;
}

.page h5, .page h6 {
    border-radius: 10px;
    padding: .5rem;
    margin-bottom: 1.3rem;
    font-size: 1rem;
    color: #2a3550;
    font-weight: 400;
    line-height: 1.8;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(90deg, #e3eaf6 0%, #f8fafc 100%);
    border: 1.5px solid rgba(58, 123, 213, 0.09);
    background: linear-gradient(90deg, #cfd8dc 0%, #e3eaf6 100%);
    border-color: #40c4ff;
}




/* 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;
}

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

/* Przycisk główny CTA */





.btn-header1 {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, #2850a0 60%, #3a7bd5 100%);
    color: #fff;
    border-radius: 24px;
    padding: 14px 40px;
    font-size: 1.5rem;
    font-weight: 600;
    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;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    margin: 1rem 0 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin: 15% 0 0 0;
    box-shadow: 0 0 24px 0 rgba(40,80,160,0.18);
    animation: btn-glow 3s infinite alternate;
}



@keyframes btn-glow {
    0% {
        box-shadow: 0 0 16px 0 rgba(40,80,160,0.18), 0 0 0 0 rgba(58,123,213,0.12);
    }
    40% {
        box-shadow: 0 0 24px 4px rgba(40,80,160,0.22), 0 0 0 9px rgba(58,123,213,0.08);
    }
    70% {
        box-shadow: 0 0 32px 8px rgba(40,80,160,0.28), 0 0 0 24px rgba(58,123,213,0.04);
    }
    100% {
        box-shadow: 0 0 24px 0 rgba(40,80,160,0.18), 0 0 0 0 rgba(58,123,213,0.12);
    }
}

/* Efekt hover dla przycisku */
.btn-header1:hover {
   background: linear-gradient(90deg, #1a3266 60%, #2850a0 100%);
    box-shadow: 0 6px 24px rgba(40,80,160,0.18);
}



.btn-header2 {
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translate(50%, -50%);
    background: linear-gradient(90deg, #2850a0 60%, #3a7bd5 100%);
    color: #fff;
    border-radius: 24px;
    padding: 14px 40px;
    font-size: 1.5rem;
    font-weight: 600;
    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;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
    margin: 1rem 0 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    margin: 15% 0 0 0;
    box-shadow: 0 0 24px 0 rgba(40,80,160,0.18);
    animation: btn-glow 3s infinite alternate;
}


/* Efekt hover dla przycisku */
.btn-header2:hover {
   background: linear-gradient(90deg, #1a3266 60%, #2850a0 100%);
    box-shadow: 0 6px 24px rgba(40,80,160,0.18);
}

@media (max-width: 900px) {
	
	
	.btn-header1 {
	padding: 10px 20px;
    font-size: 1rem;
	}
	.btn-header2 {
	padding: 10px 20px;
    font-size: 1rem;
	}
	
	
	
}


header{
        background-color: var(--background-color3);
        position: relative;
        width: 100%;
}
.box-header
{
    /*background: var(--background-gradient2);*/
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    position: fixed;
    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: 13rem;
}

.header-item {
    border-bottom-width: 0.09rem;
    background-color: #fff;
    padding: 1rem;
    text-align: center;
    min-height: 80px;
    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(--border-color2), .15);
     
}

.header-item-left
{
     border-left: solid 0.09rem rgba(var(--border-color2), .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: 100vh;
    /* Optymalizacja dla parallax */
    will-change: transform;
    transform: translateZ(0); /* Hardware acceleration */
}

/* ==========================================
   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: 100vh !important;
    min-height: 100vh;
}

/* 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: 70vh; /* 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: 60vh;
        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: 50%;
    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: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
    pointer-events: none;
}

.header-item-video-text {
    position: absolute;
    top: 50%;
    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);
    text-align: center;
    font-weight: var(--font-weight9);
    font-size: var(--font-size-h1);
    pointer-events: auto; /* Zmienione z none na auto */
    background: var(--background-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

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

/* Style dla linków w tekście video */
.header-item-video-text p a {
    color: var(--color-2);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 11; /* Jeszcze wyższy z-index dla linków */
    pointer-events: auto;
    display: inline;
    padding: 2px 4px;
}

.header-item-video-text p a:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

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

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

.breadcrumb-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1);
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
    transform: translateY(-1px);
}

.current-page {
    color: var(--color-2);
    opacity: 0.8;
}

/* 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 */
        top: 30%;
    }
    
    .breadcrumb-link {
        padding: 6px 12px;
        font-size: 0.9rem;
        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 
{
            border-bottom: solid 0.09rem rgba(var(--border-color), .15);
            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: #fff;
    background: var(--background-gradient3);
    /* Optymalizacja dla parallax */
    will-change: transform;
    transform: translateZ(0); /* Hardware acceleration */
    position: relative;
    overflow: hidden;
}
.header-item-baner video
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #fff;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

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

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

.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-0);
    text-align: left;
    font-weight: var(--font-weight3);
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height2);
    margin-bottom: 0.5rem; /* odstęp pod h2 */
}

.header-item-text-m h2 {
    font-family: var(--font-family-heading);
    color: var(--color-0);
    text-align: left;
    font-weight: var(--font-weight3);
    font-size: var(--font-size-text6);
    line-height: var(--font-size-text-line-height6);
    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 0;
    background-color: transparent;
    white-space: nowrap; /* Dodane: nie zawijaj menu w dół */
}

/* Lista menu desktopowego */
.menu ul {
    list-style: none;
    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-weight3);
    font-size: var(--font-size-text2);
    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-0);
    background-color: transparent;
    border: 2px solid transparent;
}

.menu ul li a.link-1:hover {
    color: var(--color-4);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-2);
    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: linear-gradient(90deg, #2850a0 60%, #3a7bd5 100%);
    color: #fff;
    border-radius: 24px;
    padding: 14px 40px;
    font-size: 1.15rem;
    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;
    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: linear-gradient(90deg, #1a3266 60%, #2850a0 100%);
    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 {
    background-color: var(--background-color3);
    padding: 2rem 0 4rem;
    position: relative;
    overflow: hidden;
}

/* Dodanie subtelnego gradientowego overlay */
.section-o-nas::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    pointer-events: none;
}

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

/* Nagłówek sekcji O nas */
.section-o-nas h2 {
   font-family: var(--font-family-heading);
   color: var(--color-0);
    text-align: center;
    font-size: var( --font-size-text5);
    font-weight: var(--font-weight9);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    position: relative;
}

/* Dekoracyjna linia pod nagłówkiem */
.section-o-nas h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--background-gradient);
    border-radius: 2px;
}

/* Paragraf sekcji O nas */
.section-o-nas 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;
}
.section-o-nas img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(40,80,160,0.13), 0 0 0 8px rgba(58,123,213,0.07);
    transition: box-shadow 0.3s, transform 0.3s;
    position: relative;
    z-index: 1;
}

.section-o-nas img:hover {
    box-shadow: 0 8px 32px rgba(40,80,160,0.18);
    transform: scale(1.03);
}

/* Nowoczesny ozdobnik: gradientowa obwódka za zdjęciem */
.section-o-nas img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 0 0 12px rgba(58,123,213,0.09);
    background: linear-gradient(120deg, #e3eaf6 0%, #f8fafc 100%);
    opacity: 0.7;
}

/* Responsywność */
@media (max-width: 768px) {
    .section-o-nas img {
        max-width: 90vw;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(40,80,160,0.09), 0 0 0 4px rgba(58,123,213,0.05);
    }
}
@media (max-width: 480px) {
    .section-o-nas img {
        max-width: 100vw;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(40,80,160,0.07), 0 0 0 2px rgba(58,123,213,0.03);
    }
}

.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 {
        padding: 3rem 0;
    }
    
    .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 {
    background: linear-gradient(90deg, #2850a0 60%, #3a7bd5 100%);
    color: #fff;
    border-radius: 24px;
    padding: 14px 40px;
    font-size: 1.15rem;
    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;
    letter-spacing: 0.04em;
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    margin: 1rem 0 0;
}

/* Efekt hover dla przycisku */
.btn1:hover {
   background: linear-gradient(90deg, #1a3266 60%, #2850a0 100%);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 24px rgba(40,80,160,0.18);
}

/* Efekt active dla przycisku */
.btn1:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


/* Fokus accessibility */
.btn1:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-2), 0.3);
}

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


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

/* Główna sekcja Oferta */
.section-oferta {
    background-color: var(--background-color4);
    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, rgba(0,0,0,0.03) 0%, 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 */
.section-oferta h2 {
    font-family: var(--font-family-heading);
    color: var(--color-0);
    text-align: center;
    font-size: var(--font-size-text5);
    line-height: var(--font-size-text-line-height35);
    font-weight: var(--font-weight9);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Dekoracyjna linia pod nagłówkiem oferta */
.section-oferta h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--background-gradient);
    border-radius: 2px;
    display: block;
    margin: 0 auto;
}

/* Paragraf sekcji Oferta */
.section-oferta p {
   font-family: var(--font-family-text);
    color: var(--color-3);
    text-align: center;
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height3);
    /* padding: 0rem 2rem; */
    border-radius: 12px;
    pointer-events: none;
   
}



/* Kontener przycisku w sekcji Oferta */
.section-oferta-item {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

.section-oferta-item-video {
    display: flex;
    align-items: normal;
    justify-content: center;
    padding: 5rem 0 0;
    rotate: 10deg;
}


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

}




@media (max-width: 480px) {
    .section-oferta {
        padding: 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);
    }
    
    .btn1 {
        padding: 0.7rem 1.5rem;
        font-size: var(--font-size-text1);
        letter-spacing: 0.5px;
    }
}

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


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

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

.opinie-klientow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, 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-0);
    text-align: center;
    font-size: var(--font-size-text5);
    font-weight: var(--font-weight9);
    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-3);
    text-align: center;
    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;
}

.opinie-klientow .opinie-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 opinie klientów */
@media (max-width: 768px) {
    .opinie-klientow {
        padding: 3rem 0;
    }
    .opinie-klientow h2 {
        font-size: var(--font-size-h2);
        margin-bottom: 1.5rem;
    }
    .opinie-klientow p {
        font-size: var(--font-size-text2);
        padding: 0 1rem;
    }
    .opinie-klientow h2::after {
        width: 60px;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .opinie-klientow {
        padding: 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 ------------------------------------------------- */






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


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

/* Główna sekcja Zegar */
.section-zegar {
    background-color: var(--background-color);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

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

/* 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-0);
    text-align: center;
    font-size: var(--font-size-text5);
    line-height: var(--font-size-text-line-height35);
    font-weight: var(--font-weight9);
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    position: relative;
}

/* Dekoracyjna linia pod nagłówkiem */
.section-zegar h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--background-gradient);
    border-radius: 2px;
}

/* Kontener pojedynczego atutu */
.zegar-atut {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    border-color: #40c4ff;
    height: 12rem;
}

/* Efekt hover dla kontenera atutu */
.zegar-atut:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-2);
}

/* Efekt świecenia na hover */
.zegar-atut::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.8s ease;
}

.zegar-atut:hover::before {
    left: 100%;
}

/* Liczba/Counter */
.zegar-liczba {
    font-family: var(--font-family-heading);
    font-size: 4rem;
    font-weight: var(--font-weight9);
    line-height: 1;
    margin-bottom: 1rem;
    position: relative;
    background: var(--background-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: all 0.3s ease;
}

/* 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-family: var(--font-family-text);
    color: var(--color-3);
    font-size: var(--font-size-text3);
    line-height: var(--font-size-text-line-height3);
    font-weight: var(--font-weight2);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    margin-top: 0.5rem;
}

/* 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: 4rem 0;
    }
    
    .section-zegar h2 {
        font-size: var(--font-size-h2);
        margin-bottom: 2rem;
    }
    
    .zegar-atut {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }
    
    .zegar-liczba {
        font-size: 3rem;
    }
    
    .zegar-opis {
        font-size: var(--font-size-text2);
    }
    
    .section-zegar h2::after {
        width: 60px;
        height: 3px;
    }
	.zegar-atut {

		height: auto;
		margin: 0 1rem;
	}
}

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

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




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

/* Główna sekcja footer top */
.box-footer-top {
    background: linear-gradient(90deg, rgb(40, 80, 160) 60%, rgb(58, 123, 213) 100%);
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* 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-2);
    text-align: left;
    font-size: var(--font-size-text4);
    line-height: var(--font-size-text-line-height4);
    font-weight: var(--font-weight9);
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    position: relative;
    border-bottom: 2px solid;
    border-image: var(--background-gradient);
    border-image-slice: 1;
}

.box-footer-top h3 {
    font-family: var(--font-family-heading);
    color: var(--color-2);
    text-align: left;
    font-size: var(--font-size-text3);
    line-height: var(--font-size-text-line-height4);
    font-weight: var(--font-weight9);
    margin-top: 1.5rem;
    padding-bottom: 0.8rem;
    position: relative;

  
}

.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-2);
    text-align: left;
    font-size: var(--font-size-text2);
    line-height: var(--font-size-text-line-height3);
    margin-bottom: 1rem;
}

/* 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;
}

/* Ikonki bullet points */
.box-footer-top ul li::before {
    content: "•";
    position: absolute;
    left: -0.5rem;
    top: -0.3rem;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    background: linear-gradient(90deg, #fff 60%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* Linki w footer top */
.box-footer-top ul li a {
    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);
    transition: all 0.3s ease;
    position: relative;
}

/* Hover effect dla linków */
.box-footer-top ul li a:hover {
    color: var(--color-2);
    padding-left: 0.5rem;
}

/* 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 {
        padding: 3rem 0 1.5rem;
    }
    
    .box-footer-top .footer-item1,
    .box-footer-top .footer-item2,
    .box-footer-top .footer-item3 {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 1rem;
    }
    
    .box-footer-top .footer-item3 {
        border-bottom: none;
    }
    
    .box-footer-top h2 {
        font-size: var(--font-size-text3);
        margin-bottom: 1rem;
    }
    
    .box-footer-top p,
    .box-footer-top ul li a {
        font-size: var(--font-size-text1);
        text-align: center;
        padding-bottom: 1rem;
    }
}

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

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


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

.box-footer{
    background-color: var(--color-2);
    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-0);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-text1);
	line-height: var(--font-size-text-line-height-1);
    padding: 1rem;
    
}
.box-footer .footer-item1 a
{
    color: var(--color-two);
    transition: .5s;
}
.box-footer .footer-item1 a:hover
{
    color: var(--color-3);
}

@media (max-width: 480px) {

.box-footer-top h3
{
    text-align: center;
    font-size: var(--font-size-text4);
}

}

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


/* zakładka kontakt  ----------------------------------------------------------------- */


span.kon-h2
{
    border-radius: 10px;
    padding: .5rem;
    margin-bottom: 1.3rem;
    font-size: 1.1rem !important;
    color: #2a3550;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s cubic-bezier(.4,0,.2,1);
     background: linear-gradient(90deg, #e3eaf6 0%, #f8fafc 100%);
    border: 1.5px solid rgba(58,123,213,0.09);
     background: linear-gradient(90deg, #cfd8dc 0%, #e3eaf6 100%);
    border-color: #40c4ff;
    
}



.kon-h4
{
    padding: .5rem .5rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.8 !important;
    text-transform: uppercase;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s;
}

.kon-h3
{
    border-radius: 10px;
    padding: 0 .5rem;
    /* margin-bottom: 1.3rem; */
    display: inline-block;
    font-size: 1.1rem !important;
    color: #2a3550;
    font-weight: 600;
    /* letter-spacing: 0.02em; */
    line-height: 1.8;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(90deg, #e3eaf6 0%, #f8fafc 100%);
}

a.kon-h5
{
    display: -webkit-box;
    background: linear-gradient(90deg, rgb(40, 80, 160) 60%, rgb(58, 123, 213) 100%);
    color: rgb(255, 255, 255);
    border-radius: 24px;
    padding: 10px 15px;
    font-size: 1.1rem !important;
    font-weight: 800;
    /* box-shadow: rgba(40, 80, 160, 0.13) 0px 2px 12px; */
    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;
    /* width: 23rem; */
    margin: .2rem 0;
    display: table;
}

.kon-h6
{
   
    font-size: 3em;
    font-weight: 800;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s;
    background: linear-gradient(90deg, rgb(40, 80, 160) 60%, rgb(58, 123, 213) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    padding-bottom: 1rem;
}
.kon-h7
{
    display: flex;
    /* margin: 0; */
    line-height: .8rem;
    /* padding: 0; */
    font-size: 1.1rem;
    color: #2a3550;
    font-weight: 800;
    /* letter-spacing: 0.02em; */
    /* line-height: 1.8; */
    /* transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; */
    position: relative;
    
    /* align-items: center; */
    justify-content: ss;
    /* position: relative; */
    /* overflow: hidden; */
    line-height: 1.2rem;
}
img.kon-h8
{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    max-width: 20rem ;
    display: block;
    margin: 1rem auto 3rem;
}

/* zakładka kontakt  ----------------------------------------------------------------- */




.page ul li {
    border-radius: 16px;
    padding: .3rem 1rem .3rem 2.5rem; /* extra left padding for bullet */
    margin-bottom: 0rem;
    font-size: 1.13rem;
    color: #2a3550;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s cubic-bezier(.4,0,.2,1);
}
.page ul li::before {
    content: "•";
    position: absolute;
    left: .5rem;
    top: .10rem;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    background: linear-gradient(90deg, rgb(40, 80, 160) 60%, rgb(58, 123, 213) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}




.page ul li:hover {
   
    box-shadow: 0 12px 48px rgba(40,80,160,0.18);
    transform: translateY(-2px) scale(1.04);
}


@media (max-width: 1199px) {

	span.kon-h2 {
    border-radius: none;
    padding: 0rem; 
    margin-bottom: 0rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0em;
    line-height: 1.3rem;
    transition: none;
    position: relative;
    overflow: hidden;
    animation: fadeInText 0.7s 
cubic-bezier(.4, 0, .2, 1);
    background: none;
    border: none;
    background: none;
     border-color: none;
	}
	
	span.kon-h2 {
    border-radius: 0px;
    padding: 0rem;
    margin-bottom: 0rem;
    font-size: 1rem;
    color: #000;
    font-weight: 800;
    letter-spacing: 0rem;
    line-height: 1.3;
    transition: none;
    position: relative;
    overflow: hidden;

    background: none;
    border: none;
    background: none;
    border-color: none;
}
	
}















/* 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;
}

/* Efekt podświetlenia linku przy hover */
#menu ul a:hover {
        opacity: 1;
        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 {
        background: var(--background-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
}

/* Wygląd głównych linków menu */
#menu .main-nav a.link-menu {
        display: block;
        font-size: 2rem;
        padding: .5rem 4rem;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
        font-family: "Lato", sans-serif;
        font-weight: 800;
}

/* Wygląd linku kontaktowego */
#menu .main-nav a.link-kontakt {
        display: block;
        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: 1.5rem;
        font-family: "Lato", sans-serif;
        padding: .5rem 4rem;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
        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: 1.5rem;
        font-family: "Lato", sans-serif;
        padding: .5rem 4rem;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 800;
}

/* Wygląd paragrafów i spanów w menu */
#menu .main-nav p,
#menu .main-nav span {
        
    display: block;
    font-size: .8rem;
    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 {
        background-color: transparent;
        border: none;
        cursor: pointer;
        display: block;
        float: right;
        height: 50px;
        outline: none;
        padding: 0;
        pointer-events: initial;
        position: relative;
        /* vertical-align: middle; */ /* Usuń tę właściwość, niepotrzebna przy display: block/flex */
        width: 30px;
        z-index: 1110;
        display: none; /* Ukryj przycisk hamburgera domyślnie */;
}

/* Wygląd kresek hamburgera */
.toggle-menu span {
        background-color: var(--color-1);
        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-1);
        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;
}
@keyframes hamburger-pulse {
        0%   { 
                transform: scaleX(1); 
                -webkit-transform: scaleX(1); /* Dodaj prefiks */
                transform-origin: right;
                -webkit-transform-origin: right; /* Dodaj prefiks */
        }
        50%  { 
                transform: scaleX(1.15); 
                -webkit-transform: scaleX(1.15); /* Dodaj prefiks */
                transform-origin: right;
                -webkit-transform-origin: right; /* Dodaj prefiks */
        }
        100% { 
                transform: scaleX(1); 
                -webkit-transform: scaleX(1); /* Dodaj prefiks */
                transform-origin: right;
                -webkit-transform-origin: right; /* Dodaj prefiks */
        }
}

/* 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;
    font-size: 1.5rem;
    padding: 0.5rem 2rem 0.5rem 4rem;

}
#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 */


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

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



/*  ustawia tłumacza stroony po prawej stronie  */
#floating-translate {
    position: fixed;       
    top: 50%;              
    right: 0;              
    transform: translateY(-50%); 
    z-index: 9999;         
    background: #fff;      
    border: 1px solid #ccc;
    padding: 3px;           /* mniejsze odstępy */
    border-radius: 4px 0 0 4px; 
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    font-size: 12px;        /* mniejsza czcionka w menu */
}

/*
#floating-translate img {
    width: 15px;           
    height: auto;
    margin: 2px;
}

#floating-translate a, 
#floating-translate span {
    font-size: 14px; 
    line-height: 1.2; 
    padding: 2px; 
}
8/