.header-container, .podheader-container {
    overflow: hidden;
}

/* Resetowanie domyślnych stylów */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stylowanie body */
body {
    background-color: black; /* Czarne tło na całą stronę */
    font-family: 'Recursive', sans-serif; /* Użycie fontu Recursive */
    color: white; /* Domyślny kolor tekstu */
}

/* Kontener dla nagłówka */
.header-container {
    position: relative; /* Pozwala na pozycjonowanie elementów wewnątrz */
    max-width: 100%; /* Pełna szerokość */
    margin: 0 auto; /* Wyśrodkowanie */
    text-align: center; /* Wyśrodkowanie obrazu */
}

/* Kontener nagłówka */
.header-container {
    position: relative;
    width: 100%;
    height: 928px; /* Stała wysokość */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Obrazek w nagłówku */
.header-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/* Zmiana na czarne tło dla ekranów ≤ 900px */
@media (max-width: 900px) {
    .header-container {
        background-color: black; /* Czarny kolor tła */
        height: 300px; /* Nowa wysokość nagłówka */
    }

    .header-image {
        display: none; /* Ukrycie obrazka */
    }
}





/* Zawartość na header.png */
.header-content {
    position: absolute; /* Pozycjonowanie absolutne względem .header-container */
    top: 48px; /* Odstęp od góry */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between; /* Rozmieszczenie logo i prawej sekcji */
    align-items: center;
    padding: 0 0px; /* Odstępy po bokach */
    max-width: 1250px; /* Ograniczenie szerokości */
    margin: 0 auto; /* Wyśrodkowanie */
}

/* Kontener dla logo */
.logo-container {
    position: relative;
}

/* Logo w formacie SVG */
.logo,
.logo-hover {
    height: 100px; /* Wysokość logo */
    width: auto; /* Zachowanie proporcji */
    transition: opacity 0.3s ease; /* Animacja dla logo */
}

/* Dodatkowe logo po najechaniu */
.logo-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Początkowo niewidoczne */
}

.logo-container:hover .logo {
    opacity: 0; /* Logo znika po najechaniu */
}

.logo-container:hover .logo-hover {
    opacity: 1; /* Logo1 pojawia się po najechaniu */
}

.right-section {
    display: flex;
    align-items: center;
    gap: 50px; /* Odstęp między menu a przyciskiem */
}

/* Menu */
.menu {
    list-style: none;
    display: flex;
    gap: 36px; /* Odstęp między elementami menu */
    margin: 0;
    padding: 0;
}

.menu li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Recursive', sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease; /* Animacja koloru i pogrubienia */
}

.menu li a:hover {
    color: #c9394a; /* Kolor po najechaniu */
    font-weight: bold; /* Pogrubienie tekstu po najechaniu */
}

/* Przycisk z telefonem */
.phone-button {
    display: inline-block;
    width: 250px;
    height: 66px;
    background-color: white;
    color: black;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Recursive', sans-serif;
    text-align: center;
    line-height: 66px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animacje */
}

.phone-button .plus {
    color: gray; /* Kolor "+48" */
}

.phone-button .number {
    color: black; /* Kolor reszty numeru */
}

.phone-button:hover {
    background-color: #f0f0f0; /* Kolor tła po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}



/* Media queries dla wersji mobilnej */
@media (max-width: 900px) {
    /* Zmiana układu header */
    .header-content {
        flex-direction: column; /* Ułożenie pionowe */
        align-items: center; /* Wyśrodkowanie */
        top: 20px; /* Odstęp od góry */
         padding-left: 10px;
         padding-right: 1px;
    }

    /* Menu */
    .menu {
        gap: 15px; /* Mniejszy odstęp między elementami menu */
        text-align: center; /* Wyśrodkowanie tekstu */
        margin-top: -15px; /* Odstęp od góry */
    }

    .menu li a {
        color: white;
        text-decoration: none;
        font-size: 15px;
        font-family: 'Recursive', sans-serif;
        transition: color 0.3s ease, font-weight 0.3s ease; /* Animacja koloru i pogrubienia */
}

    /* Sekcja logo */
    .logo-container {
        margin-bottom: 0px; /* Odstęp między logo a menu */
    }

    /* Numer telefonu */
    .right-section {
        gap: 20px; /* Mniejszy odstęp */
        flex-direction: column; /* Ułożenie elementów pionowo */
        align-items: center; /* Wyśrodkowanie */
        margin-top: 20px; /* Odstęp nad numerem telefonu */
    }

    .phone-button {
        margin-top: 10px; /* Odstęp między telefonem a menu */
    }
}






/* Kontener dla podheader.png */
.podheader-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* Obrazek podheader.png */
.podheader-image {
    display: block; /* Usunięcie domyślnego marginesu pod obrazem */
    margin: 0 auto; /* Wyśrodkowanie obrazu */
    height: auto; /* Zachowanie proporcji */
    max-width: none; /* Usunięcie ograniczenia szerokości */
}

/* Zawartość na podheader.png */
.podheader-content {
    position: absolute;
    top: 80px; /* Odstęp od góry */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between; /* Tekst po lewej, wideo/animacja po prawej */
    align-items: center;
    max-width: 1250px; /* Ograniczenie szerokości */
    margin: 0 auto; /* Wyśrodkowanie */
    padding: 0 00px; /* Odstępy po bokach */
}

/* Tekst po lewej stronie */
.podheader-text {
    max-width: 50%; /* Ograniczenie szerokości tekstu */
}

.podheader-text h1 {
    font-family: 'Recursive', sans-serif;
    font-size: 40px;
    font-weight: 700; /* Bold */
    margin: 0;
}

.podheader-text p {
    font-family: 'Readex Pro', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Regular */
    margin: 30px 0 0 0;
    line-height: 1.5;
}

/* Przycisk konfiguratora */
.config-button {
    display: inline-block;
    width: 300px;
    height: 66px;
    background-color: white;
    color: black;
    text-decoration: none;
    font-size: 24px;
    font-family: 'Recursive', sans-serif;
    font-weight: 700; /* Bold */
    text-align: center;
    line-height: 66px;
    border: none;
    cursor: pointer;
    margin-top: 30px; /* Odstęp od tekstu */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animacje */
}

.config-button:hover {
    background-color: #f0f0f0; /* Kolor tła po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}

/* Wideo/animacja po prawej stronie */
.podheader-media {
    max-width: 50%; /* Ograniczenie szerokości */
}

.podheader-media video,
.podheader-media img {
    width: 100%; /* Pełna szerokość kontenera */
    height: auto; /* Zachowanie proporcji */
    border-radius: 10px; /* Zaokrąglone rogi */
}



/* Media queries dla wersji mobilnej */
@media (max-width: 900px) {
    /* Zmiana układu kontenera */
    .podheader-content {
        flex-direction: column; /* Układ pionowy */
        align-items: center; /* Wyśrodkowanie elementów */
        justify-content: center; /* Wyśrodkowanie zawartości */
        top: 40px; /* Mniejszy odstęp od góry */
    }

    /* Wyśrodkowanie tekstu */
    .podheader-text {
        text-align: center; /* Wyśrodkowanie tekstu */
        max-width: 90%; /* Większa szerokość dla tekstu */
    }

    /* Zmniejszenie rozmiaru tekstu */
    .podheader-text h1 {
        font-size: 28px; /* Mniejszy rozmiar nagłówka */
    }

    .podheader-text p {
        font-size: 14px; /* Mniejszy rozmiar tekstu */
    }

    /* Wyśrodkowanie przycisku */
    .config-button {
        width: 250px; /* Mniejszy przycisk */
        height: 60px; /* Mniejsza wysokość przycisku */
        font-size: 18px; /* Mniejszy tekst na przycisku */
        text-align: center; /* Wyśrodkowanie tekstu w przycisku */
        margin-top: 20px; /* Odstęp od tekstu */
    }

    /* Zmniejszenie szerokości animacji */
    .podheader-media {
        max-width: 100%; /* Większa szerokość w porównaniu do tekstu */
        display: flex;
        margin-left: -20px;
        justify-content: center; /* Wyśrodkowanie animacji */
    }
}




/* Stylowanie main */
main {
    padding: 20px;
    background-color: white;
    color: black;
}

/* Sekcja galerii */
.gallery {
    max-width: 1250px;
    width: 100%;  /* Zajmuje 100% dostępnej szerokości, ale nie przekracza 1250px */
    margin: 0 auto;  /* Wyśrodkowanie galerii */
}

/* Siatka galerii */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolumny */
    gap: 18px; /* Odstęp między zdjęciami */
    max-width: 1250px;  /* Ograniczenie szerokości galerii */
    margin: 0 auto;  /* Wyśrodkowanie siatki */
}

/* Elementy galerii */
.gallery-item {
    position: relative;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: auto;  /* Utrzymuje proporcje obrazków */
    object-fit: cover;  /* Zachowanie proporcji zdjęcia */
    transition: transform 0.3s ease; /* Animacja powiększenia */
}



/* Media queries dla wersji mobilnej */
@media (max-width: 900px) {
    /* Zmiana układu galerii na pionowy (jedna kolumna) */
    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr; /* Jedna kolumna */
        gap: 20px; /* Odstęp między zdjęciami */
        max-width: 100%;  /* Zajmuje 100% dostępnej szerokości */
        margin: 0 auto;  /* Wyśrodkowanie galerii */
    }

    /* Wyświetlanie tylko 3 zdjęć na stronie głównej (index.html) */
    .home-page .gallery-item:nth-child(n+4) {
        display: none;  /* Ukrywanie zdjęć po trzecim na stronie głównej */
    }
}





/* Powiększenie obrazka po najechaniu */
.gallery-item:hover img {
    transform: scale(1.1); /* Lekkie powiększenie po najechaniu */
}

/* Przycisk "Pokaż wszystkie zdjęcia" */
.show-all-button {
    display: inline-block;
    width: 280px;
    height: 66px;
    background-color: black;
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Recursive', sans-serif;
    text-align: center;
    line-height: 66px;
    border: 2px solid white;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Animacje */
}

.show-all-button:hover {
    background-color: #dd4155; /* Kolor tła po najechaniu */
    color: white; /* Kolor tekstu po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}

/* Sekcja galerii z nagłówkiem */
.gallery-section {
    padding: 40px 0px; /* Odstęp od góry i boków */
    max-width: 1250px; /* Ograniczenie szerokości */
    margin: 0 auto; /* Wyśrodkowanie */
}

/* Sekcja galerii z nagłówkiem */
.gallery-section2 {
    padding: 58px 0px; /* Odstęp od góry i boków */
    max-width: 1250px; /* Ograniczenie szerokości */
    margin: 0 auto; /* Wyśrodkowanie */
}

.gallery-header {
    display: flex;
    justify-content: space-between; /* Napis po lewej, przycisk po prawej */
    align-items: center;
    margin-bottom: 60px; /* Odstęp od siatki zdjęć */
}

.gallery-header h2 {
    font-family: 'Recursive', sans-serif;
    font-size: 40px;
    font-weight: 700; /* Bold */
    margin: 0;
}



/* Modal do powiększenia zdjęć */
.modal {
    display: none; /* Ukryty domyślnie */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Czarne tło z przezroczystością */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease; /* Dodana animacja */
}

.modal-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* Zachowanie proporcji zdjęcia */
    transition: transform 0.3s ease-in-out;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    cursor: pointer;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}







html, body {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;  /* Płynne przewijanie */
}


/* Sekcja kontaktu */
.contact-section {
    background-color: white; /* Białe tło dla sekcji kontaktu */
    padding: 50px 0; /* Odstęp od góry i dołu */
    margin: 0 auto; /* Wyśrodkowanie */
}

/* Kreska pod galerią */
.contact-line {
    width: 1250px;
    height: 6px;
    background-color: #f7f7f7;
    margin-top: -20px; /* Odstęp od góry */
    margin-left: auto;
    margin-right: auto;
}

/* Napis "Kontakt" */
.contact-text {
    font-family: 'Recursive', sans-serif;
    font-size: 40px; /* Taka sama wielkość jak "Galeria ESOX" */
    font-weight: 700; /* Bold */
    color: black; /* Taki sam kolor jak "Galeria ESOX" */
    text-align: left;
    max-width: 1250px; /* Ograniczenie szerokości */
    margin: 0 auto; /* Centrowanie elementu, jeśli jest mniejszy niż 1250px */
    word-wrap: break-word; /* Łamanie długich słów, jeśli to konieczne */
    margin-top: 50px; /* Odstęp od kreski */
    margin-bottom: 50px; /* Odstęp od ikony */
}

/* Kontener dla ikony i przycisków */
.contact-container {
    display: flex;
    justify-content: left;
    max-width: 1250px; /* Ograniczenie szerokości */
    margin: 0 auto; /* Centrowanie elementu, jeśli jest mniejszy niż 1250px */
    align-items: center;
    gap: 20px; /* Odstęp między elementami */
    margin-top: 50px; /* Odstęp od napisu "Kontakt" */
}

/* Styl dla ikony SVG */
.contact-icon {
    width: 66px;
    height: 66px;
    cursor: pointer;
    transition: transform 0.3s ease; /* Animacja powiększenia */
}

.contact-icon:hover {
    transform: scale(1.1); /* Lekkie powiększenie po najechaniu */
}

/* Styl dla przycisków */
.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-family: 'Readex Pro', sans-serif;
    font-size: 18px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animacje */
}

/* Styl dla przycisku telefonu */
.phone-button2 {
    display: inline-block;
    width: 250px;
    height: 66px;
    background-color: black;
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Recursive', sans-serif;
    text-align: center;
    line-height: 66px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animacje */
}

.phone-button2 .plus {
    color: #f5f5f5; /* Kolor "+48" */
}

.phone-button2 .number {
    color: white; /* Kolor reszty numeru */
}

.phone-button2:hover {
    background-color: #FF223E; /* Kolor tła po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}

/* Styl dla przycisku mailowego */
.email-button {
    display: inline-block;
    width: 270px;
    height: 66px;
    background-color: #f2f2f2;
    color: black;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Recursive', sans-serif;
    text-align: center;
    line-height: 66px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animacje */
}

.email-button:hover {
    color: white;
    background-color: #FF223E; /* Kolor tła po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}

/* Styl dla przycisku "Konfigurator łodzi" */
.config-button2 {
    margin-left: auto;  /* Wyrównanie do prawej */
    margin-right: 0;    /* Usunięcie marginesu z prawej */
    max-width: none;    /* Usunięcie ograniczenia szerokości */
    background-color: transparent;
    border: 3px solid black; /* Obramowanie */
    color: black; /* Czarny kolor tekstu */
    display: inline-block;
    width: 300px;
    height: 66px;
    text-decoration: none;
    font-size: 24px;
    font-family: 'Recursive', sans-serif;
    font-weight: 700; /* Bold */
    text-align: center;
    line-height: 66px;
    cursor: pointer;
    margin-top: 30px; /* Odstęp od tekstu */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animacje */
}

.config-button2:hover {
    background-color: #f0f0f0; /* Kolor tła po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}

.contact-button, .phone-button2, .email-button, .config-button2 {
    margin: 0;
    padding: 0;
}

.contact-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Przerwa między przyciskami */
}

.config-button2 {
    margin-left: auto; /* Wyrównanie przycisku do prawej */
}



/* Media queries dla wersji mobilnej */
@media (max-width: 900px) {
    /* Kontener dla ikony i przycisków */
    .contact-container {
        display: flex;
        flex-direction: column; /* Zmieniamy na kolumnowy układ */
        align-items: center; /* Wyśrodkowanie elementów */
        gap: 20px; /* Odstęp między elementami */
        margin-top: 50px; /* Odstęp od napisu "Kontakt" */
    }

    /* Styl dla ikony SVG */
    .contact-icon {
        width: 50px; /* Zmniejszenie ikony */
        height: 50px; /* Zmniejszenie ikony */
        cursor: pointer;
        transition: transform 0.3s ease; /* Animacja powiększenia */
    }

    .contact-icon:hover {
        transform: scale(1.1); /* Lekkie powiększenie po najechaniu */
    }

    /* Styl dla przycisków */
    .contact-button,
    .phone-button2,
    .email-button,
    .config-button2 {
        width: 100%; /* Przycisk zajmuje całą szerokość */
        max-width: 350px; /* Ograniczenie szerokości */
        font-size: 18px; /* Wielkość czcionki */
    }

    .contact-buttons-container {
        display: flex;
        flex-direction: column; /* Układ kolumnowy */
        align-items: center; /* Wyśrodkowanie przycisków */
        gap: 20px; /* Przerwa między przyciskami */
    }

    /* Kontakt w nowej linii */
    .contact-text {
        font-size: 30px; /* Zmniejszenie czcionki */
        margin-top: 30px; /* Odstęp od przycisków */
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    /* Styl dla konfiguratora */
    .config-button2 {
        width: 100%; /* Zajmuje całą szerokość */
        max-width: 350px; /* Ograniczenie szerokości */
        margin: 0 auto; /* Wyśrodkowanie */
    }
}














/* Stopka" */
.footer {
    background-color: #fafafa;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center; /* Wyśrodkowanie pionowe */
    padding: 0;
}

.footer-content {
    display: flex;
    justify-content: flex-start; /* Ustawienie elementów od lewej */
    align-items: center;
    width: 1250px;
    margin: 0 auto;
}

.footer-logo {
    width: 200px;
}

.footer-text {
    font-family: 'Recursive', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin-left: 32px; /* Możesz dostosować wartość, by zmniejszyć przestrzeń */
}

.footer-info {
    font-family: 'Recursive', sans-serif;
    font-size: 16px;
    color: gray;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Wyrównanie tekstu do prawej w kontenerze */
    margin-left: auto; /* Wyrównanie .footer-info do prawej strony */
}

.gray-text {
    color: gray;
}

.black-text {
    color: black;
}

.footer-info .footer-link {
    color: #333; /* Domyślny kolor */
    text-decoration: none; /* Usunięcie podkreślenia */
    transition: color 0.3s ease, transform 0.3s ease; /* Animacja */
}

.footer-info .footer-link:hover {
    color: #FF223E; /* Kolor po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}



/* Media queries dla wersji mobilnej */
@media (max-width: 900px) {
    /* Stopka */
    .footer {
        height: auto; /* Automatyczna wysokość */
        padding: 20px 0; /* Dodanie paddingu */
        display: flex;
        flex-direction: column; /* Układ kolumnowy */
        align-items: center; /* Wyśrodkowanie zawartości */
    }

    /* Zawartość stopki */
    .footer-content {
        display: flex;
        justify-content: center; /* Wyśrodkowanie */
        align-items: center; /* Wyśrodkowanie */
        width: 100%; /* Zajmowanie całej szerokości */
        margin: 0;
        flex-wrap: wrap; /* Pozwolenie na zawijanie */
    }

    /* Logo i Copyright w jednej linii */
    .footer-logo {
        width: 150px; /* Zmniejszenie rozmiaru logo */
        margin-right: 16px; /* Odstęp między logo a copyright */
    }

    .footer-text {
        font-family: 'Recursive', sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: black;
    }

    /* Info o wykonaniu strony wyśrodkowane */
    .footer-info {
        display: flex;
        justify-content: center; /* Wyśrodkowanie */
        align-items: center; /* Wyrównanie w pionie */
        width: 100%;
        margin-top: 20px; /* Odstęp od logo i copyright */
    }

    .footer-info .footer-link {
        color: #333; /* Kolor domyślny */
        text-decoration: none; /* Brak podkreślenia */
        transition: color 0.3s ease, transform 0.3s ease; /* Animacja */
    }

    .footer-info .footer-link:hover {
        color: #FF223E; /* Kolor po najechaniu */
        transform: scale(1.05); /* Lekkie powiększenie */
    }
}


.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.gallery-item {
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    height: auto;
    display: block;
}






::selection {
    background-color: #FF223E; /* Kolor tła przy zaznaczeniu */
    color: white; /* Kolor tekstu przy zaznaczeniu */
}

#animacja {
    width: 100%;
    height: auto;
    align-items: flex-end; /* Wyrównanie tekstu do prawej w kontenerze */
    margin-left: auto; /* Wyrównanie .footer-info do prawej strony */
}




/* Ustawienia dla kontenera filmów */
.galeria-filmow {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 filmy w rzędzie */
    gap: 18px; /* Odstęp między filmami */
    justify-content: center;
}

/* Ustawienia dla iframe */
.galeria-filmow .gallerymovie-item {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 proporcje (9/16 = 0.5625 => 56.25%) */
    overflow: hidden;
}

.galeria-filmow iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ustawienia dla dodatkowych filmów */
#filmy-dodatkowe {
    margin-top: 18px; /* Taki sam odstęp jak między filmami */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    display: none;
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 900px) {
    .galeria-filmow {
        grid-template-columns: 1fr; /* Jeden film w rzędzie na mniejszych ekranach */
    }
}



/* Widoczność filmów po kliknięciu */
#filmy-dodatkowe.visible {
    display: grid;
    opacity: 1;
    transform: translateY(0);
}

/* Przycisk "Pokaż więcej/mniej" */
#pokaz-wiecej {
    margin-top: 20px; /* Mniejszy odstęp od filmów */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Stylizacja nagłówka "Nasze filmy" */
#nasze-filmy {
    font-size: 26px; /* Dopasowany rozmiar do "Galeria ESOX" */
    font-weight: bold;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px; /* Możesz dostosować wartość */
}

#nasze-filmy h2 {
    margin-bottom: 50px; /* Wymuszony margines */
}

#certyfikaty-grid .gallery-item img {
    max-width: 80%; /* Zmniejsza szerokość certyfikatów do 70% */
    height: auto; /* Zachowuje proporcje */
}