:root{
    --szary: #F0F8FF;
    --niebieski: #244B88;
    --czerwony: rgb(177, 9, 59);
    --jasnyniebieski: hsl(208, 100%, 97%);
    --gradientlewa: #244B88;
    --gradientprawa: #131d4f;
    --gradient: linear-gradient(90deg, rgba(4,87,150,1) 35%, rgba(19,29,79,1) 100%);
    --nowyniebieski: #244B88;
    --nowyjasnyniebieski: #F0F8FF;
}
.niebieski{
    background-color: var(--niebieski) !important;
}
*{
    --bs-gutter-x: 0px  !important;
    
}

img.img-fluid {
    height: 100% !important;
    object-fit: cover;
    width: 100%;
}
:focus{
    border: blue 2px solid !important;
}
 
.szkolenia .aktualnosci h2, .szkolenia .blog-kafel-p .archivedata{
    color: white !important;
}
.szkolenia .cont-kafel-blog a{
    border-radius: 0px !important;
    color: white !important;
}
.szkolenia .szkolenie h2{
    color: white !important;
}
.szkolenia .przy-aktual{
    border: solid 1px white !important;
    color: white !important;

}
.szkolenia .przy-n{
    border: solid 1px white !important;
}
.eksperci .swiper-scrollbar-drag {
    background-color: #131d4f !important;
}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    height: var(--swiper-scrollbar-size, 1px) !important;
 }

 .swiper-scrollbar-drag {
    height: 4px !important;
    top: -2px !important;
    background-color: white !important;
}
div#col1 p {
    font-size: 13px !important;
}

.kreska-footer {
    width: 15%;
    height: 3px;
    background: white;
    top: 0px;
    left: 0px;
}
.zapisy{
    background-color: #244B88 !important;
}
.baner-film {
    background-color: var(--szary); 
}
.kreska-block {
    width: 20%;
    height: 5px;
    top: 0px;
    left: 0px;
}
:focus-visible{
    border: blue 2px solid !important;
    outline: 2px solid blue !important;

}
div#page:focus{
    outline: blue 3px solid;
    border: blue 3px solid;
    margin: 2px;
    width: 98%;
    margin: auto;
}


div#page:focus-visible{
    outline: blue 3px solid;
    border: blue 3px solid;
    margin: 2px;
}

#primary:focus{
    outline: blue 3px solid;
    border: blue 3px solid;
    margin: 2px;
}

.szkoleniawr {
    height: auto !important;
    margin-bottom: 40px;
}
.kontrast {
    filter: invert(1);
    background-color: black;
    top: 0px !important;

}
.kontrast img{
    filter: invert(1) !important;
}
.kontrast .backgr{
    filter: invert(1);
}

.bootstr{
    background: var(--gradientprawa) !important;
    border-radius: 30px;
}
 
.search-section h1 {
    font-size: 2.75rem;
    font-weight: 600;
}

.search-section p {
    font-size: 1.25rem;
    opacity: 0.85;
    margin-bottom: 2rem;
}

.search-box .form-control {
    padding: 0.85rem 1rem;
    font-size: 1.1rem;
    border-radius: 0.5rem;
}

.search-box .btn-search {
    background: white;
    color: var(--niebieski);
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 0.5rem;
    padding: 0.85rem 1.25rem;
    transition: background 0.3s ease;
}

.search-box .btn-search:hover {
    background: var(--jasnyniebieski);
}

/* Bazowy dropdown */
.main-navigation ul ul {
    background: var(--jasnyniebieski);
     border: 1px solid var(--niebieski);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-25%) translateY(10px);
    z-index: 9999;
    display: block;
    min-width: 220px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Pokazanie dropdowna przy hoverze */
.main-navigation ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-25%) translateY(0); /* lekkie "wysunięcie" w górę */
}

/* Elementy submenu */
.main-navigation ul ul li {
    position: relative;
}

.main-navigation ul ul a {
    display: block;
    padding: 12px 20px;
    color: var(--niebieski);
    background-color: transparent;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 8px;
    text-align: center;
}

/* Hover na linkach submenu */
/* .main-navigation ul ul a:hover {
    background: var(--gradient);
    color: white;
} */

/* Strzałka dla parenta */
.main-navigation ul li.menu-item-has-children > a {
    position: relative;
    padding-right: 30px;
}

.main-navigation ul li.menu-item-has-children > a::after {
    content: "\f0d7"; /* Font Awesome: chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--niebieski);
    transition: transform 0.3s ease;
}

/* Opcjonalnie: obrót strzałki po hoverze */
.main-navigation ul li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
}





*{
    transition: 0.3s;
    font-family: "Poppins", sans-serif;
}

.czerwonycolor{
    color: var(--czerwony);
}

.czerwonybackground{
    background: var(--jasnyniebieski) !important;
}
.wcag-sterownik.justify-content-center.flex-column.flex-lg-row.d-flex.align-content-center * {
    font-size: 12px;
}
.swiper-scrollbar{
    background-color: var(--jasnyniebieski) !important;
}
.buttons{
    width: auto !important;
}
.cabin{
 font-family: "Cabin", sans-serif;
}
img.custom-logo {
    object-fit: contain;
    width: 180px !important;
    height: 43px !important;
}

.playfair{
    font-family: "Playfair Display", serif;
}

.odsteplewo {
    margin-bottom: 30px;
    margin-left: 10px;
}
.fs-16 {
    font-size: 17px;
}
.fs-12 {
    font-size: 12px;
}
.main-navigation a {
    font-family: "Poppins", serif !important;
}
ul#primary-menu li a {
    color: black;
    font-size: 16px;
    margin-right: 15px;
}
.rozmiar-1 {
    font-size: 10px !important;
    background-color: transparent ;
    border: none;
    height: 12px;
}
.rozmiar-2{
    font-size: 12px !important;
    background-color: transparent ;
    border: none ;
    height: 13px;
}

.aktualnosci {
    background: var(--nowyjasnyniebieski);
}

.rozmiar-3{
    font-size: 14px !important;
    background-color: transparent ;
    border: none;
    height: 14px;
}
.wcag i.fa-solid.fa-clock.text-wh {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    color: white !important;
}
button#zabierz-kontrast {
    font-size: 16px !important;
    width: 20px !important;
    height: 20px !important;
    color: black !important;
    border: none !important;
    margin: 0px 5px !important;
    padding: 0px !important;
    background-color: #D1D1D1 !important;
}
button#dodaj-kontrast {
    color: yellow !important;
    background-color: black;
    border: none !important;
    margin: 0px 5px !important;
    padding: 0px !important;
    font-size: 16px !important;
    width: 20px !important;
    height: 20px !important;
}
.wcag{
    align-items: center;
}
.wcag .tresc {
    align-items: baseline !important;
}
.menu{
    background-color: var(--jasnyniebieski);
}
.topbar {
    background-color: var(--niebieski);
    display: flex;
    justify-content: space-between;
}
.lewo-baner{
    background-color: #D4DFE3;
}
.prawo-baner{
    background-color: #FDCC31;
}
.w-80{
    width: 80% !important;
}
.w-75{
    width: 85% !important;
}
a.przycisk {
    background: var();
    color: black !important;
    text-decoration: none !important;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
}
.przycisk2{
    color: white !important;
    text-decoration: none !important;
}
.duzynumer{
    color: black !important;
    text-decoration: none;
}
.duzynumer i{
    color: var(--niebieski) !important;
    margin-right: 10px;
}
.ikona.koszyk {
    right: 0px;
    height: 100%;
    font-size: 25px;
    top: 10px;
    color: #BEBEBA !important;
}
span.yellow {
    background: var(--niebieski);
    padding: 2px;
    position: absolute;
    color: white !important;
    right: -5px;
    top: -10px;
    font-size: 12px;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.title-koszyk {
    font-size: 10px;
    font-weight: normal;
    color: white !important;
}
.koszyk {
    width: auto !important;
}

.opis-koszyk {
    text-align: right;
    margin-left: 10px;
}
.koszyk-link {
    text-decoration: none !important;
}
button.search-button.position-absolute.z-1 {
    background: transparent;
    border: 0px;
    right: 0px;
    height: 100%; 
    top: 0px;
}
input#search-input-yem {
    background: #F3F3F3;
    border: 0px;
    padding: 10px;
    width: 100%;
    color: black;
}
.maxw{
    max-width: 1600px;
}
div#search-results {
    position: absolute;
    z-index: 100;
    background: white;
    max-height: 500px;
    overflow-y: scroll;
    margin-top: 10px;
     width: 100%;
}
.post, .page {
    margin: 0 !important;
}
div#search-results img {
    background: black;
    height: 40px;
    width: 40px;
    margin-right: 20px;
}
div#search-results  a {
 text-decoration: none;
 color: black;
}
.bordertop{
    border-top: 2px #EAEAEA solid;
}
.kolor{
    color: #404040 !important;
}
.ikonaR {
    font-size: 13px;
}

.ikontop{
    margin-top: 6px !important;
}

.ka {
    border-right: 2px solid #eaeaea;
    background-color: var(--niebieski);
    color: white;
    padding: 5px 10px !important;
    text-align: center !important;
    border-radius: 30px;
}
.lewo{
    flex-wrap: nowrap !important;
}
nav#site-navigation {
    margin-left: 25px !important;
    width: fit-content;
}
ul#primary-menu li{
    margin-left: 15px !important;
}
.main-navigation ul ul.sub-menu a{
    text-wrap: wrap !important;
}
ul#primary-menu li a{
    color: black ;
    text-wrap: nowrap ;
}




div#block-12 {
    margin-bottom: 0px;
}
.ar {
    padding: 20px;
    border: solid 1px var(--gradientprawa);
 }
 .swiper-slide {
    display: flex;
    align-items: stretch;
}
/* BANER */

.baner-start{
    height: 60vh;
}
.baner-start h2{
    width: fit-content;
}
.tlo {
    background-color: var(--niebieski);
    top: 0;
    z-index: -1;
    width: 90%;
    height: 90%;
    right: 0;
    border-radius: 30px;
    border-bottom-left-radius: 300px;
}

.elipse{
    background: url('/wp-content/uploads/2025/03/Ellipse-6.png');
    top: -10px;
    right: -10px;
    background-repeat:no-repeat ;
    width: 123px !important;
    height: 139px !important;
    padding: 2rem !important;
}
.elipse img{
    border-bottom-left-radius: 0px !important;
}
.height {
    min-height: 160px;
    display: flex;
    align-items: center;
}
.kolo {
    background-color: var(--gradientprawa);
    border-radius: 50%;
    padding: 10px;
    width: 13rem;
    height: 13rem;
    left: -55px;
    bottom: -30px;
}
.kolo img{
    border-radius: 50%;
    border: solid white 2px;
    padding: 25px;
}
.lewo-start {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 10rem;
}
a.przy-n {
    width: fit-content;
    background-color: var(--gradientprawa);
    padding: 10px 10px;
    /* border-radius: 30px; */
    color: white !important;
    text-decoration: none !important;
    border: solid 1px white;
    margin-top: 20px;
}
a.przy-n2 {
    width: fit-content;
    background-color: var(--gradientprawa);
    padding: 10px 10px;
    color: white !important;
    text-decoration: none !important;
    border: solid 1px white;
}
a.przy-n2 i{
    color: white !important;
    padding: 5px;
    margin-left: 10px;
}
a.przy-n i{
    color: black !important;
    padding: 5px;
 
    margin-right: 10px;
}
.tlo-kawalek{
    width: 10%;
    background: var(--niebieski);
    top: 0;
    z-index: -1;
}
.h-95{
    height: 95% !important;
}
.baner-start2{
    height: 80vh !important;
}



a.przy-c {
    width: fit-content;
     padding: 10px 10px;
    border-radius: 30px;
    color: white !important;
    text-decoration: none !important;
    border: solid 1px white;
}
a.przy-n i{
    color: black !important;
    padding: 5px;
    background-color: white;
    border-radius: 50%;
    margin-right: 10px;
}


a.przy-b {
    width: fit-content;
    border-radius: 30px;
    color: white ;
    text-decoration: none !important;
    border-radius: 0px;
}
a.przy-b i {
    color: white !important;
    /* padding: 5px; */
    /* background-color: var(--niebieski); */
    /* border-radius: 50%; */
    margin-left: 10px;
    margin-left: 10px;
}
.szkolenia{
    background-color: #244B88 !important;
}
.szkolenia .szkolenie {
    border: solid 2px white !important;
}
.szkolenia .aktualnosci h2, .szkolenia .blog-kafel-p .archivedata{
    color: white !important;
}

.szkolenia .cont-kafel-blog a i{
    background-color: transparent !important;
    color: white !important;
}
.kwadratykontener {
    margin: -1rem !important;
}
a.przy-c i{
    color: white !important;
    padding: 5px;
     border-radius: 50%;
    margin-right: 10px;
}
.b-radius{
    border-radius: 30px !important;
    padding: 10px 5px !important;
    background-color: white !important;
}
.b-radius i{
    background-color: #244B88;
    border-radius: 50%;
    padding: 10px !important;
}
.media a{
    color: black !important;
}
.tlo-tytul {
    left: 0px;
    top: -15px;
    width: 100px;
    height: 5px;
    background-color: var(--gradientprawa);
}

.tlo-tytul2 {
    bottom: -15px;
    width: 155px;
    height: 5px;
    background-color: var(--gradientprawa);
}
.lewo-baner h2{
    width: fit-content;
}
.fs-big{
    font-size: 3rem !important;
}
.c-ciemnyniebieski{
    color: var(--gradientprawa) !important;
}
.blue{
    color: var(--niebieski);
}
.video{
    height: 300px;
}
/* DLACZEGO MY */
.minheight {
    min-height: 170px;
    align-items: center;
}
h1,h2,h3{
    color: var(--gradientprawa) !important;
}
.dlaczego{
    margin-top: 10rem !important;
}
.dlaczego h2{
    width: fit-content;
}
.tlo-dlaczego {
    border: solid 1px black;
}

.zmianatlanaodwrotny{
    background: var(--niebieski);
    color: white !important;
    border: solid 1px  var(--niebieski);

}
.tlo-dlaczego:hover {
    border: solid 1px var(--niebieski);
    background-color: var(--niebieski);

    
}
.zmianatlanaodwrotny p {
 
    color: white !important;

}

.zmianatlanaodwrotny:hover p{
    color: black !important;
}
.zmianatlanaodwrotny:hover{
    background: white;
    color: white !important;
    border: solid 1px black;

}
.tlo-dlaczego:hover p{
    color: white !important;
}
.tlo-dlaczego:hover .ikona-dlaczego i{
    color: black;
    background-color: white;
}
.ikona-dlaczego{
    top: -20px;
    font-size: 5rem;
}
.ikona-dlaczego i{
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    text-align: center;
    padding: 5px;
    background-color: var(--gradientprawa);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* PRZERYWNIK */

.przerywnik{
    height: 55vh;
    color: white !important;
}
.przerywnik-n{
    height: 40vh;
    color: white !important;
}
.przerywnik-n .nakladka{
    background: linear-gradient(85.01deg, rgba(36, 75, 136, 0.89) 26.68%, rgba(36, 75, 136, 0.89) 88.66%);

}
.tekst-przerywnik{
    width: 50%;
}
.logo{
    bottom: 30px;
    right: 30px;
}
.tlo-przerywnik{
    z-index: -1 !important;
}
.przy-b{
    padding: 10px;
    color: white !important;
    border: solid 2px white;
    border-radius: 30px;
    width: fit-content !important;
    text-decoration: none;
}
.przy-b i{
    margin-left: 0px !important;
}
.nakladka{
    z-index: -1;
    background: rgb(4,87,150);
    background: linear-gradient(90deg, rgba(4,87,150,0.8911939775910365) 0%, rgba(4,87,150,0.30015756302521013) 30.12%, rgba(4,87,150,0) 89%);
}

.kolorkreska {
    height: 2px;
    background-color: black;
    display: block;
}

.breadcrumbs {
    font-weight: light;
    margin: 0px;
}
/* AKTUALNOSCI */

.aktualnosci h2{
    width: fit-content;
}
.backgroundnone {
    background: none !important;
    border: solid 1px white;
}
.blog-zdj-archive {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover;
}
cont-kafel-blog {
    padding: 20px;
    /* background-color: var(--szary); */
    height: 100%;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center !important;
    border: solid 1px white;
}
.cont-kafel-blog a{
    text-decoration: none !important;
    color: black !important;
}
/* .blog-kafel-p {
    padding: 20px;
} */

.aktualnosci .swiper-scrollbar {
    margin: auto !important;
}
.swiper-wrapper {
 
    align-items: stretch !important;
}
.cont-kafel-blog .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 50vh !important;
 }
.blog-zdj-archive .post-thumbnail{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.blog-kafel-p .archivedata{
    color: var(--niebieski);
}
.cont-kafel-blog:hover {
    background-color: white;
}
.cont-kafel-blog:hover .post-thumbnail img{
    scale: 1.2;
}
.cont-kafel-blog:hover h2,.cont-kafel-blog:hover .archivedata, .cont-kafel-blog:hover a.przy-n{
    color: black !important;
}
.cont-kafel-blog:hover a.przy-n i{
    background-color: var(--niebieski);
    color: white !important;
}
.cont-kafel-blog:hover a.przy-n{
    border-color: var(--niebieski) !important;
}

.przy-aktual{
    border: solid 1px black;
    color: black !important;
    text-decoration: none !important;
    padding: 10px;
}
.przy-aktual i{
    margin-right: 10px !important;
}
/* LICZBY */


.liczby h2{
    width: fit-content;
}
.liczby .ikona-dlaczego{
    font-size: 1.5rem !important;
    color: white !important;
}


/* EKSPERCI */
.h-3{
    height: 3px !important;
}
.eksperci h2{
    width: fit-content;
}
.eksperci{
    /* background-color: var(--szary); */
    border-top: 0.5px solid var(--gradientprawa);
}
.img-ekspert {
    height: 13rem;
    width: 13rem;
    margin-right: auto;
    background-color: var(--niebieski);
    border-radius: 50%;
    margin-bottom: 20px;
}
.img-ekspert img{
    border-radius: 50%;
}
.s-eksperci {
    bottom: 0;
    right: 20px;
}
a.solo-s i {
    background-color: white;
    padding: 10px;
    border-radius: 50%;
    color: black;
}


/* KONTAKT */


.kontakt{
    background-color: var(--niebieski);
}
span.wpcf7-form-control-wrap{
    width: 100% !important;
}
span.wpcf7-form-control-wrap input{
    width: 100% !important;
    padding: 10px;
    border: solid 2px white;
    background-color: transparent;
    border-radius: 30px;
}
span.wpcf7-form-control-wrap input::placeholder{
    color: white !important;
    font-weight: bold;
}
.top-kontakt p{
    display: flex;
    justify-content: space-between;
}
.top-kontakt span.wpcf7-form-control-wrap{
    width: 48% !important;
}
textarea.wpcf7-form-control.wpcf7-textarea{
    padding: 10px;
    border: solid 2px white;
    background-color: transparent;
    border-radius: 30px;
}
textarea.wpcf7-form-control.wpcf7-textarea::placeholder{
    color: white !important;
    font-weight: bold;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    float: right;
    background-color: white;
    color: black;
    border-radius: 30px;
    border: none;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner:hover{
    transform: scale(1.2);
}
.kontakt li i{
    margin-right: 10px;
}
.kontakt li{
    margin-bottom: 10px;
}
.kontakt li a {
    color: black ;
    text-decoration: none;
    font-weight: normal;
}
.kontakt li a:hover{
    text-decoration: underline;
}
.kontakt h2{
    font-weight: bold;
    color: white;
}
.kontakt p{
    color: white !important;
}
.kontakt ul{
    padding: 0px !important;
    margin: 0px !important;
    list-style-type: none !important;
}
.site-footer{
    background-color: var(--niebieski);
    color: white !important;
    text-align: center !important;
}
.site-footer a{
    color: white !important;
}
.page{
    margin: auto !important;
    max-width: 1920px !important;
}
.zmianatlanaodwrotny i{
    color: black;
    background-color: white;
}
.zmianatlanaodwrotny:hover{
    background-color: white !important;

}
.zmianatlanaodwrotny:hover p{
    color: var(--niebieski) !important;
}
.zmianatlanaodwrotny:hover i{
    background-color: var(--gradientprawa) !important;
    color: white !important;
}
@media screen and (max-width: 1100px) and (min-width: 992px){
    .site-header .lewo{
        padding-left:0px !important ;
    }
}
@media screen and (max-width: 992px){
    ul#primary-menu li a{
    color: black ;
    text-wrap: wrap !important;
    }
    .baner-start {
        height: auto;
    }
    .elipse{
        top: -75px;
    }
    .kolo {
        width: 7rem;
        height: 7rem;
        left: 0px;
        bottom: -20px;
        border-radius: 50% !important;
    }
    .prawo-start img {
        border-bottom-left-radius: 150px;
    }
    .swiper-baner .prawo-start img{
        border-bottom-left-radius: 0px !important;
        height: 260px !important;
    }
    .kolo-img{
        border-radius: 50% !important;
    }
    .tekst-przerywnik{
        width: 100% !important;
    }
    .logo-menu{
        width: 160px !important;
    }
    .tlo-kawalek{
        display: none !important;
    }
    nav#site-navigation{
        margin-left: 50px !important;
    }
    .h-95{
        height: auto !important;
    }
    button.menu-toggle{
        background-color: var(--niebieski);
        border-radius: 30px;
        border: none !important;
        color: white !important;
    }
    .main-navigation.toggled .menu-menu-1-container ul#primary-menu{
        background-color: transparent;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 999999;
        width: 100%;
        height: 100vh !important;
        background-color: var(--niebieski);
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
.main-navigation.toggled .menu-menu-1-container ul a {
        color: white !important;
        font-weight: bold !important;
        font-size: 1.5rem !important;
        padding: 0px !important;
        margin: 10px 0px !important;
    }
    .wcag i.fa-solid.fa-clock.text-wh {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
        margin-right: 10px !important;
        color: white !important;
        margin: auto;
    }
    .wcag-sterownik div {
        margin: 0px !important;
    }
    .menu .container-fluid{
        display: flex;
        flex-direction: column !important;
    }
    .menu .prawo{
        margin: auto !important;
        width: fit-content !important;
        margin-top: 15px !important;
    }
    .baner-start2 {
        height: auto !important;
    }
    .baner-start2 .swiper-scrollbar{
        display: none !important;
    }
    .dlaczego{
    margin-top: 0rem !important;
    }
    .przerywnik-n {
    height: 55vh;
    color: white !important;
    }
    ul.sub-menu{
        left: 100px !important;
    }
    .ar div:first-child{
        height: auto !important;
    }
    .main-navigation ul li.focus > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-25%) translateY(0);
        left: -44px !important;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--niebieski);
        height: 100vh;
        top: -380px;
}
    .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-25%) translateY(0);
        left: -65px !important;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--niebieski);
        height: 100vh;
        top: -340px;
    }
    ul#primary-menu li{
        margin-left: 0px !important;
    }
}