body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* Czarne tło */
    color: white; /* Biały tekst */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Zapewnia zawijanie elementów w nagłówku */
    background-color: #222; /* Nieco jaśniejsze tło */
    color: white;
    padding: 20px;
}

.header-content, .welcome-section, .why-us, .join-us, .services, .contact-info, .gallery {
    text-align: center;
    margin: 20px auto;
    max-width: 80%;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Wyśrodkowanie linków */
    gap: 10px; /* Dodaje przestrzeń między elementami listy */
}

nav ul li {
    margin: 0 1%; /* Procentowy margines dla większej responsywności */
}

nav ul li a, .footer-main-content a, .social-media a, .services a {
    color: white; /* Biały tekst dla linków */
    text-decoration: none; /* Usuwa podkreślenie z linków */
    padding: 5px 10px;
    border-radius: 5px;
}

nav ul li a.download-app-btn, nav ul li a.register-btn, .services a:hover {
    background-color: #007bff; /* Niebieskie tło */
}

footer {
    background-color: #333;
    color: white;
    text-align: center; /* Wyśrodkowanie tekstu w stopce */
    padding: 20px;
}

/* Responsywność i galeria */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Linki w kolumnie dla mniejszych ekranów */
    }
    
    nav ul li {
        margin: 10px auto; /* Zwiększa margines dla elementów w kolumnie */
    }


    .header-content {
        padding: 0; /* Usuwa odstępy na mniejszych ekranach, aby lepiej wykorzystać przestrzeń */
    }

    .gallery-grid .slick-slide {
        margin: 0 5px;
    }
    
    .slick-prev, .slick-next {
        display: none; /* Ukrycie przycisków nawigacyjnych na mniejszych ekranach */
    }
}

ul {
    padding-left: 0;
    list-style-position: inside;
}

ul li, .footer-main-content a:hover, .social-media a:hover {
    margin-bottom: 5px;
    color: #007bff; /* Przykładowy niebieski kolor po najechaniu myszką */
}

.footer-main-content, .social-media {
    margin: 0 auto; /* Wyśrodkowanie treści i ikon mediów społecznościowych */
    display: block;
}

/* Stylowanie dla karuzeli */
.gallery {
    padding: 20px 0;
}

.gallery-grid .slick-slide {
    margin: 0 10px;
}

.gallery-grid .slick-slide img, .gallery-image {
    max-width: 100%;
    height: auto; /* Wysokość auto pozwala na zachowanie proporcji obrazu */
    object-fit: cover; /* Zapewnia, że obraz wypełni kontener bez zniekształceń */
    border-radius: 10px;
}

/* Usunięcie domyślnych kropek nawigacyjnych Slick Carousel */
.slick-dots {
    bottom: -30px;
}

/* Dodanie stylów dla przycisków nawigacji */
.slick-prev, .slick-next {
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

.slick-prev {
    left: 25px;
}

.slick-next {
    right: 25px;
}

.gallery-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Responsywność dla karuzeli */
@media (max-width: 768px) {
    .gallery-grid .slick-slide {
        margin: 0 5px;
    }
    
    .slick-prev, .slick-next {
        display: none; /* Ukrycie przycisków nawigacyjnych na mniejszych ekranach */
    }
}

/* Stylowanie dla reszty strony */
@media (max-width: 768px) {
    /* Twoje istniejące style dla responsywności */
}


section.gallery {
    text-align: center; /* Wyśrodkowanie tekstu w sekcji */
    margin: 20px auto; /* Centralizacja sekcji względem boków kontenera */
    padding: 20px 0; /* Dodaje padding na górze i na dole dla estetyki */
    width: 100%; /* Zapewnia, że sekcja rozciąga się na całą szerokość */
}

section.gallery h2 {
    margin: 0 auto; /* Wyśrodkowanie tytułu "Galeria" */
    padding: 10px 0; /* Dodatkowy odstęp dla lepszego wyglądu */
}

/* Upewnij się, że .gallery-grid również nie jest w jakiś sposób przesunięte na bok */
section.gallery .gallery-grid {
    display: flex; /* Umożliwia elastyczne rozmieszczanie zawartości galerii */
    justify-content: center; /* Wyśrodkowuje zawartość galerii w poziomie */
    flex-wrap: wrap; /* Pozwala zawartości na zawijanie, gdy nie ma wystarczająco dużo miejsca */
    gap: 20px; /* Odstępy między elementami galerii */
    margin: auto; /* Dodatkowe zabezpieczenie przed przesunięciem */
}

/* Upewnij się, że twoje zmiany są ładowane */
/* Możesz tymczasowo dodać !important do stylów, aby zobaczyć, czy problem leży po stronie specyficzności lub konfliktów CSS */

/* Stylowanie linków w stopce */
footer a:link, footer a:visited {
    text-decoration: underline; /* Podkreślenie linku */
    color: white; /* Domyślny kolor tekstu linku */
}


/* Stylizacja linków w stopce, aby były spójne z sekcją "services" */
.footer-main-content a, .social-media a, .services a {
    color: white; /* Biały tekst dla linków */
    text-decoration: none; /* Usuwa podkreślenie z linków */
    padding: 5px 10px;
    border-radius: 5px;
}

.footer-main-content a:hover, .social-media a:hover, .services a:hover {
    background-color: #007bff; /* Niebieskie tło po najechaniu */
    color: white; /* Zachowanie białego koloru tekstu */
}

.logo-img {
    width: 10%; /* Procentowa szerokość logo */
    max-width: 100px; /* Maksymalna szerokość logo */
    height: auto;

.content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Wyśrodkowanie w poziomie */
    text-align: center; /* Wyśrodkowanie tekstu */
}