body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    padding-top: 0; /* Dostosuj według wysokości nagłówka */
    overflow: visible; /* Umożliwia pełne przewijanie */
}

html, body {
    height: 100%; /* Umożliwia prawidłowe przewijanie */
}
html {
    scroll-behavior: smooth;
}

/* Ogólny podział stylów */
section {
    min-height: 100vh; /* Sekcje zajmują pełne okno przeglądarki */
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
    flex-direction: column; /* Układ w kolumnie */
    justify-content: center;
    align-items: flex-start; /* Wyrównanie do lewej strony */
    box-sizing: border-box; /* Uwzględnienie paddingu i marginesu */
/* padding: 20px; /* Odstępy wewnętrzne */
    padding-top: 20px; /* Dodaj miejsce dla nagłówka */
    margin-top: -20px; /* Skoryguj pozycję sekcji */
}
    header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: left;
    z-index: 1000;
}

header a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

header a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 2rem;
    margin: 0 0 20px;
    text-align: left; /* Wyrównanie tytułu sekcji do lewej */
}
.unified-header {
    background-color: #222; /* Kolor tła */
    color: white;
    display: flex;
    flex-direction: column; /* Układ w kolumnie */
    align-items: stretch;
    padding: 5px 10px; /* Zmniejszenie paddingu dla zmniejszenia wysokości */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
    box-sizing: border-box; /* Uwzględnienie paddingu w szerokości */
    max-height: 150px; /* Ustawienie maksymalnej wysokości nagłówka */
}

.unified-header .top-section {
    display: flex;
    justify-content: space-between; /* Wyrównanie sekcji */
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px; /* Zmniejszenie marginesu */
}

.unified-header .left-section {
    display: flex;
    align-items: center;
    gap: 8px; /* Mniejsze odstępy między logo a ikonami */
}

.unified-header .logo {
    height: 60px; /* Zmniejszenie wysokości logo */
    width: auto; /* Zachowanie proporcji logo */
}

.unified-header .icon {
    width: 15px; /* Zmniejszenie rozmiaru ikon */
    height: 15px;
}

.unified-header .right-section nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Zmniejszenie odstępów między linkami */
    justify-content: flex-end;
}

.unified-header .right-section nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px; /* Zmniejszenie rozmiaru tekstu linków */
    white-space: nowrap;
}

.unified-header .right-section nav a:hover {
    text-decoration: underline;
}

.unified-header .reservation-section {
    background-color: #99dee0; /* Tło formularza */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px; /* Zmniejszenie paddingu */
    margin-top: 5px; /* Zmniejszenie marginesu */
    display: flex;
    justify-content: center;
}

.unified-header .reservation-section form {
    display: flex; /* Układ w jednym wierszu */
    flex-wrap: nowrap; /* Zapobieganie zawijaniu pól do nowej linii */
    justify-content: space-between; /* Rozmieszczenie pól równomiernie */
    align-items: center; /* Wyrównanie etykiet i pól w pionie */
    gap: 0px; /* Usuń lub zmniejsz gap, jeśli był ustawiony */
}

/* Etykiety i pola formularza */
.unified-header .reservation-section form label {
    font-size: 12x; /* Czcionka etykiety */
    display: inline-block; /* Ustawienie w linii */
    white-space: nowrap; /* Zapobiega zawijaniu */
    margin-left: 15px; /* Zmniejszenie odstępu między etykietą a polem */
    margin-right: 5px; /* Zmniejszenie odstępu między etykietą a polem */
}

.unified-header .reservation-section form input,
.unified-header .reservation-section form select {
    font-size: 12px; /* Czcionka dla pól formularza */
    height: 30px; /* Wysokość pól */
    padding: 5px; /* Wewnętrzne odstępy */
    border: 1px solid #ccc; /* Ramka */
    border-radius: 5px; /* Zaokrąglone rogi */
    margin-top: 5px; /* Dodanie odstępu między polem a następną etykietą */
    box-sizing: border-box; /* Uwzględnienie paddingu w szerokości */
}

.unified-header .reservation-section form input[type="email"] {
    width: 200px; /* Zmniejszenie szerokości pola email */
    text-align: left;
}

.unified-header .reservation-section form button {
    padding: 8px 12px; /* Zmniejszenie wielkości przycisku */
    background-color: #4d4f8a;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 12px; /* Zmniejszenie rozmiaru tekstu */
    margin-left: 15px; /* Zmniejszenie odstępu między etykietą a polem */
}

.unified-header .reservation-section form button:hover {
    background-color: #0056b3;
}
/* Responsywność dla małych ekranów (telefony i tablety) */
@media (max-width: 768px) {
    .unified-header .reservation-section form {
        flex-wrap: wrap; /* Pola mogą zawijać się w razie potrzeby */
        gap: 3px; /* Zmniejszenie odstępów między polami */
        justify-content: center; /* Wyśrodkowanie pól na ekranie telefonu */
    }

    .unified-header .reservation-section form input,
    .unified-header .reservation-section form select,
    .unified-header .reservation-section form button {
        flex: 1; /* Pola automatycznie dopasowują się do szerokości ekranu */
        max-width: 100px; /* Zmniejszenie szerokości pól na telefonach */
        font-size: 12px; /* Zmniejszenie rozmiaru czcionki */
        height: 30px; /* Zmniejszenie wysokości pól */
        padding: 4px; /* Zmniejszenie paddingu */
    }
}
/* Responsywność dla bardzo małych ekranów (telefony wąskie) */
@media (max-width: 480px) {
    .unified-header .reservation-section form {
        flex-wrap: wrap; /* Pola mogą zawijać się na bardzo małych ekranach */
        gap: 2px; /* Minimalne odstępy między polami */
        justify-content: center; /* Wyśrodkowanie pól */
    }

    .unified-header .reservation-section form input,
    .unified-header .reservation-section form select,
    .unified-header .reservation-section form button {
        flex: 1; /* Pola automatycznie dopasowują się do dostępnej przestrzeni */
        max-width: 80px; /* Zmniejszenie szerokości pól na wąskich ekranach */
        font-size: 10px; /* Minimalna czcionka dla pól */
        height: 25px; /* Minimalna wysokość pól */
        padding: 3px; /* Minimalny odstęp wewnętrzny */
    }
}
/* Stylizacja dla sekcji */
#home {
    background-color: #f0f8ff; /* Jasne tło */
    color: #333;
    font-style: italic;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /*font-size: 1.5rem;*/
    padding: 10px 10px; /* Wystarczające odstępy wewnętrzne */
    text-align: center;
    min-height: 100vh; /* Sekcja zajmuje pełną wysokość okna przeglądarki */
    display: flex;
    flex-direction: column; /* Układ w pionie */
    justify-content: center;
    align-items: center;
}
/*#home {
    scroll-margin-top: 140px; /* Dopasuj do wysokości nagłówka */
/*}
#home {
   /* padding-top: 140px;  Przesunięcie, aby sekcja nie była zakryta przez nagłówek */
/*}

/* Animacja dla nagłówka */
#home h2 {
    font-size: 2.5rem; /* Większy nagłówek */
    color: #004080; /* Wyrazisty kolor */
    animation: fadeIn 2s ease-in-out; /* Animacja wchodzenia */
    margin-bottom: 20px;
}

/* Tekst podświetlany na hover */
#home p {
    transition: color 0.3s ease-in-out; /* Efekt płynnej zmiany koloru */
    font-size: 1.5rem; /* Większy nagłówek */
}

#home p:hover {
    color: #004080; /* Podświetlenie tekstu na niebiesko */
}

/* Dodanie efektów animacji */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px); /* Wchodzi od góry */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Pozycja docelowa */
    }
}

/* Interaktywny przycisk */
#home .call-to-action {
    display: inline-block;
    margin: 10px; /* Odstęp między przyciskami */
    padding: 10px 20px; /* Wewnątrz przycisków */
    background-color: #004080;
    color: white;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#home .call-to-action:hover {
    background-color: #002d60; /* Ciemniejszy kolor po najechaniu */
    transform: scale(1.05); /* Subtelne powiększenie */
}

/* Kontener dla przycisków */
#home .buttons-container {
    display: flex; /* Ustawia elementy w wierszu */
    justify-content: center; /* Wyśrodkowanie przycisków */
    flex-wrap: wrap; /* Zawijanie, jeśli brakuje miejsca */
    gap: 10px; /* Odstępy między przyciskami */
    margin-top: 20px; /* Odstęp od treści powyżej */
}
/*#home p {
    max-width: 800px; /* Ogranicza szerokość dla lepszej czytelności 
    text-align: center;
    margin: 0 auto;*/
/*}*/

/* Stylizacja sekcji Gallery */
/* Stylizacja sekcji Gallery */
/* Stylizacja sekcji Gallery */
#gallery {
    background-color: #ffffff; /* Tło sekcji */
    padding: 20px; /* Lekkie odstępy wewnętrzne */
    margin: 0; /* Usuń marginesy */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%; /* Dopasowanie wysokości */
}

/* Stylizacja kontenera karuzeli */
.carousel-container {
    width: 100%; /* Szerokość karuzeli */
    overflow: hidden; /* Ukryj zawartość wychodzącą poza kontener */
    margin: 0 auto; /* Wyśrodkowanie kontenera */
    position: relative;
    top: 50px;
}

/* Stylizacja karuzeli */
.carousel-slide {
    display: flex; /* Zdjęcia w jednym rzędzie */
    transition: transform 0.5s ease-in-out; /* Płynne przesuwanie */
    /*padding-top: 140px; /* Przesunięcie, aby sekcja nie była zakryta przez nagłówek */
    position: relative;
    top: 50px;
}

/* Zdjęcia w karuzeli */
.carousel-slide img {
    width: 100%; /* Dopasowanie szerokości do kontenera */
    max-width: calc(100% / 3); /* Wyświetlanie trzech zdjęć jednocześnie */
    height: auto; /* Automatyczne dopasowanie wysokości */
    object-fit: cover; /* Dopasowanie zdjęcia przy zachowaniu proporcji */
    margin: 0; /* Usuń odstępy między zdjęciami */
}

/* Stylizacja przycisków nawigacyjnych */
#prevBtn, #nextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 1000;
}
#prevBtn {
    left: 10px; /* Przycisk "poprzedni" po lewej stronie */
}

#nextBtn {
    right: 10px; /* Przycisk "następny" po prawej stronie */
}


/* Responsywność dla mniejszych ekranów */
@media (max-width: 768px) {
    .carousel-slide img {
        width: calc(100% / 2); /* Wyświetlanie dwóch zdjęć jednocześnie */
    }
}

@media (max-width: 480px) {
    .carousel-slide img {
        width: 100%; /* Wyświetlanie jednego zdjęcia jednocześnie */
    }
    #prevBtn, #nextBtn {
        font-size: 20px; /* Zmniejszenie rozmiaru przycisków */
        padding: 5px;
    }
}

/* ustawienie background dla karuzeli zdjęć
/*#gallery {
    /*background-image: url('pic/9.jpg'); /* Ścieżka do zdjęcia */
    /*background-size: cover; /* Dopasowanie obrazu do kontenera */
    /*background-position: center; /* Wyśrodkowanie obrazu */
   /* background-repeat: no-repeat; /* Zapobieganie powtarzaniu obrazu */
   /* width: 100%;
   /* height: 500px; /* Dostosuj wysokość sekcji */
/*}*/
.modal {
    display: none; /* Ukryty domyślnie */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Przyciemnione tło */
    overflow: hidden; /* Ukrycie przewijania */
}

.modal-content {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px; /* Zaokrąglone rogi */
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1100;
}

#prevModalBtn, #nextModalBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 1100;
}

#prevModalBtn {
    left: 20px;
}

#nextModalBtn {
    right: 20px;
}

#prices {
    background-color: #e0e0e0; /* Jasny zielony */
    color: #333; /* Ciemny kolor tekstu */
    padding: 50px 0;
    text-align: center;
}

#services {
    background-color: #f0f8ff; /* Jasny kolor tła */
    display: flex;
    flex-direction: column; /* Układ w pionie */
    align-items: center; /* Wyśrodkowanie */
    justify-content: center;
    text-align: center;
    padding: 15px; /* Zmniejszenie paddingu */
}

.services-title {
    font-family: 'Playfair Display', serif; /* Elegancka czcionka */
    font-size: 24px; /* Zmniejszenie rozmiaru tytułu */
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto 15px; /* Zmniejszenie odstępu poniżej tytułu */
    color: #333; /* Ciemniejszy tekst dla kontrastu */
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 kolumn w siatce */
    gap: 10px; /* Mniejsze odstępy między elementami */
    justify-items: center; /* Wyśrodkowanie każdego elementu */
    align-items: center;
    width: 100%; /* Dopasowanie szerokości do sekcji */
    padding: 10px; /* Zmniejszenie paddingu wewnętrznego siatki */
}

.equipment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #ffffff; /* Białe tło dla lepszej czytelności */
    border-radius: 5px; /* Zaokrąglone rogi */
    padding: 8px; /* Zmniejszenie paddingu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    width: 100%; /* Dopasowanie elementów w siatce */
    max-width: 150px; /* Ograniczenie szerokości elementów */
    transition: transform 0.3s ease; /* Dodanie efektu hover */
}

.equipment-item img {
    width: 30px; /* Zmniejszenie rozmiaru obrazków */
    height: auto;
    margin-bottom: 5px; /* Zmniejszenie odstępu poniżej obrazka */
}

.equipment-item p {
    font-weight: bold;
    font-size: 12px; /* Zmniejszenie rozmiaru tekstu */
    color: #333; /* Kolor tekstu */
}

/* Efekt hover */
.equipment-item:hover {
    transform: scale(1.05); /* Powiększenie elementu na hover */
}

/* Responsywność dla średnich ekranów */
@media (max-width: 1024px) {
    .equipment-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 kolumny na tabletach */
    }

    .services-title {
        font-size: 20px; /* Zmniejszenie rozmiaru tytułu */
    }

    .equipment-item {
        max-width: 130px; /* Dostosowanie szerokości elementów */
    }

    .equipment-item img {
        width: 25px; /* Dalsze zmniejszenie obrazków */
    }

    .equipment-item p {
        font-size: 11px; /* Zmniejszenie rozmiaru tekstu */
    }
}

/* Responsywność dla małych ekranów */
@media (max-width: 768px) {
    .equipment-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolumny na małych ekranach */
        gap: 8px; /* Zmniejszenie odstępów */
    }

    .services-title {
        font-size: 18px; /* Dostosowanie rozmiaru tytułu */
    }

    .equipment-item {
        padding: 6px; /* Dalsze zmniejszenie paddingu */
    }

    .equipment-item img {
        width: 20px; /* Dalsze zmniejszenie obrazków */
    }

    .equipment-item p {
        font-size: 10px; /* Jeszcze mniejsza czcionka */
    }
}

/* Responsywność dla bardzo małych ekranów */
@media (max-width: 480px) {
    .equipment-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny na bardzo małych ekranach */
        gap: 5px; /* Minimalne odstępy */
    }

    .services-title {
        font-size: 16px; /* Mniejszy tytuł */
    }

    .equipment-item {
        max-width: 100px; /* Jeszcze mniejsze elementy */
        padding: 5px; /* Minimalny padding */
    }

    .equipment-item img {
        width: 15px; /* Najmniejsze obrazki */
    }

    .equipment-item p {
        font-size: 9px; /* Minimalna czcionka dla tekstu */
    }
}

#contact {
    background-color: #e0e0e0;
    color: #333;
    padding: 20px 0; /* Większe odstępy wewnętrzne dla lepszej czytelności */
    margin: 0 auto; /* Wyśrodkowanie zawartości */
    text-align: center;
    position: relative;
    width: 100%; /* Szerokość sekcji */
    box-sizing: border-box; /* Uwzględnienie paddingu w szerokości */
    overflow-x: hidden; /* Ukrycie przewijania na szerokość */
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr; /* Domyślny układ: 3 kolumny */
    gap: 20px; /* Odstępy między sekcjami */
    padding: 20px;
    align-items: stretch; /* Wyrównanie wszystkich sekcji */
    width: 100%; /* Dopasowanie szerokości */
    box-sizing: border-box; /* Uwzględnienie paddingu w szerokości */
}

.contact-info,
.contact-form,
.map-container {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px; /* Zaokrąglone rogi */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    height: auto; /* Dynamiczna wysokość zależna od zawartości */
}

/* Formularz kontaktowy */
.contact-form form {
    display: flex;
    flex-direction: column; /* Układ w pionie */
    gap: 10px; /* Odstępy między elementami formularza */
}

.contact-form input,
.contact-form textarea,
.contact-form button {
    width: 100%; /* Pola zajmują całą szerokość */
    font-size: 14px; /* Dopasowana czcionka */
    padding: 10px; /* Wewnętrzne odstępy */
    border: 1px solid #ccc; /* Ramka */
    border-radius: 5px; /* Zaokrąglone rogi */
    box-sizing: border-box;
}

.contact-form button {
    background-color: #007BFF; /* Kolor przycisku */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #0056b3; /* Kolor przycisku podczas hover */
}

/* Stylizacja dla mapy */
.map-container iframe {
    width: 100%; /* Dopasowanie szerokości mapy */
    height: 300px; /* Stała wysokość dla lepszej czytelności */
    border: none;
    border-radius: 10px;
}

/* Responsywność dla średnich ekranów (tablety) */
@media (max-width: 1024px) {
    .contact-container {
        grid-template-columns: 1fr; /* Układ w jednej kolumnie */
        gap: 15px; /* Zmniejszenie odstępów */
    }

    .contact-info,
    .contact-form,
    .map-container {
        padding: 15px; /* Zmniejszenie paddingu na tabletach */
    }
}

/* Responsywność dla małych ekranów (telefony) */
@media (max-width: 768px) {
    .contact-info,
    .contact-form,
    .map-container {
        padding: 10px; /* Zmniejszenie paddingu dla telefonów */
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form button {
        font-size: 12px; /* Zmniejszenie czcionki */
        padding: 8px; /* Dopasowanie odstępów */
    }

    .map-container iframe {
        height: 250px; /* Zmniejszenie wysokości mapy */
    }
}

/* Responsywność dla bardzo małych ekranów (telefony wąskie) */
@media (max-width: 480px) {
    .contact-container {
        grid-template-columns: 1fr; /* Wszystkie sekcje w jednej kolumnie */
        gap: 10px; /* Minimalne odstępy */
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form button {
        font-size: 10px; /* Mniejsza czcionka dla najmniejszych ekranów */
        padding: 5px; /* Minimalne odstępy wewnętrzne */
    }

    .map-container iframe {
        height: 200px; /* Zmniejszenie wysokości mapy */
    }
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Półprzezroczyste tło */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.show {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.modal-content h1 {
    font-size: 24px;
    color: #333;
}

.modal-content button {
    margin-top: 20px;
    padding: 10px 20px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.modal-content button:hover {
    background-color: #0056b3;
}


.cookie-popup {
    position:fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

.cookie-popup button {
    background-color: #f8b400;
    border: none;
    color: white;
    padding: 10px 15px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 9999;
}

.cookie-popup button:hover {
    background-color: #e0a200;
}

.cookie-settings {
    display: none;
    margin-top: 10px;
    z-index: 9999;
}