/* Resetowanie i podstawowe style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5; /* Tło strony */
}

.menuu {
    background-color: #f9f9f9; /* Kolor tła menu */
    color: #000; /* Kolor tekstu */
    padding: 10px 20px; /* Wewnętrzny padding menu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Cień menu */
    position: sticky;
    top:-60%;
    z-index: 1000;
    border-bottom: 1px solid;
    transition: top 0.3s ease-in-out; /* Animacja sticky menu */
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
   /* justify-content: center; /* Wyśrodkowanie logo */
    align-items: center;
    flex-grow: 1; /* Pozwala logo na zajęcie dostępnej przestrzeni */
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none; /* Usunięcie podkreślenia linku logo */
    color: #fff; /* Kolor tekstu logo */
}

.logo svg {
    height: 60px; /* Wysokość logo */
}

.logo svg text {
    pointer-events: none; /* Wyłącz zdarzenia myszy dla tekstu SVG */
}

#menu {
    list-style-type: none;
    display: flex;
    transition: all 0.3s ease; /* Animacja elementów menu */
    
}

#menu li {
    margin-right: 20px;
    position: relative; /* Wymagane do obsługi submenu */
}

#menu a {
    color: #000;
    text-decoration: none; /* Usunięcie podkreślenia linków */
    padding: 10px 15px;
    display: block;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Efekt przejścia dla linków */
}

#menu a:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Tło linku po najechaniu */
    border-radius: 5px; /* Zaokrąglenie rogów */
    transform:scale(1.1);
}
.submenu {
    display: none;
    background-color: #f9f9f9;
    padding: 10px;
    list-style: none; /* Usunięcie kropek z podmenu */
    white-space: nowrap; /* Zapobieganie łamaniu wierszy w podmenu */
    transition: opacity 0.3s ease, transform 0.3s ease;
    
}

.submenu li {
    margin: 10px 0;
}

.submenu a {
    color: #000;
    text-decoration: none; /* Usunięcie podkreślenia linków w podmenu */
    width:150px;
    text-align: center;
}
/* Strzałka w dół w submenu */
.submenu-parent > a > .submenu-icon {
    margin-left: 5px;
}
.menuIcon 
{
    display: none;
}
/*KRZYŻYK ZAMKNIĘCIA MENU*/
.menuCloseIcon {
    display: none;
    margin-left:80%;
    font-size: 1.5em;
    cursor: pointer;
    color: #000;
}
/*STICKY MENU TYLKO PRZY PRZEIJANIU DO GÓRY*/
.menuu.visible {
    top: 0; /* Pokaż menu, gdy jest widoczne */
}
/*DARK MODE NAVBAR DESKTOP*/
    .dark-theme .menuu, .dark-theme .submenu
    {
        background-color: #333;
    }
    .dark-theme .menuIcon i,
.dark-theme .logo a,
.dark-theme ul#menu li a, .dark-theme .menuCloseIcon 
{
    color:#969696;
}
@media screen and (max-width: 768px) {
    .menuIcon {
        display: block; /* Pokaż na mniejszych ekranach */
        position: absolute;
        cursor: pointer;
        right:20px;
    }
.menuIcon i {
    font-size: 24px;
    color: #000;
}
    /*KRZYŻYK ZAMKNIĘCIA MENU MOBILNEGO*/
    .menuCloseIcon {
        display:inline-flex;
    }

    .submenu-parent.active .submenu-icon i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.submenu-icon i {
    transition: transform 0.3s ease;
}
    .nav-wrapper {
        justify-content: space-between; /* Pozwól elementom wewnątrz na wyrównanie przestrzeni */
    }

    #menu {
        display: flex; /* Ukryj główne menu na mniejszych ekranach */
        flex-direction: column;
        background-color: #f9f9f9; /* Kolor tła menu na mniejszych ekranach */
        position: fixed;
        top: 0;
        right: -100%;
        height: 100%;
        width: 250px;
        padding: 10px 0;
        z-index: 999; /* Zwiększ z-index, aby menu było na wierzchu */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Cień menu na mniejszych ekranach */
        transition: right 0.3s ease; /* Dodaj efekt przejścia */
        text-transform:uppercase;
    }

    #menu.active {
        right: 0; /* Pokaż menu po kliknięciu na hamburger */
    }

    #menu li {
        margin-right: 0;
        text-align: center;
        height:auto;
        padding: 5%;
    }

    #menu a {
        padding: 10px 0;
        width:auto;
        margin:5%;
    }

    .submenu {
        display: none; /* Ukryj podmenu w wersji mobilnej */
        background-color: #ebebeb;
    }
    .submenu-parent.active .submenu {
        display: block; /* Pokaż podmenu, gdy rodzic ma klasę active */
    }
    .logo {
        flex-grow: 1; /* Pozwól logo na zajęcie dostępnej przestrzeni */
        text-align: center; /* Wyśrodkuj logo */
    }

    .menuIcon {
        order: 1; /* Ustaw ikonę hamburgera jako pierwszą */
    }

    .logo {
        order: 2; /* Ustaw logo jako drugie */
    }
    /*DARK MODE NAVBAR*/
    .dark-theme #menu
    {
        background-color: #333;
    }
    .dark-theme .menuIcon i,
.dark-theme .logo a,
.dark-theme ul#menu li a
{
    color:#969696;
}

.dark-theme .submenu
{
    background-color: #3a3a3a;
}
}
@media screen and (min-width: 769px) {
    .submenu-parent:hover .submenu {
        display: block; /* Pokaż podmenu po najechaniu */
        position: absolute; /* Pozycjonowanie podmenu */
        z-index: 999;
        max-width:170px;
        top: 100%;
        left: 50%; /* Ustawienie na środku względem elementu nadrzędnego */
        transform: translateX(-50%); /* Przesunięcie w lewo o 50% szerokości podmenu */
        opacity: 1;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
        .submenu-parent:hover .submenu-icon i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.submenu-icon i {
    transition: transform 0.3s ease;
}
}
@media screen and (max-width: 903px) {
    #menu a {
        padding: 10px 3px
    }
}