*,
*::before,
*::after {
    box-sizing: border-box;
    /* Ustawia globalnie model pudełkowy 'border-box' dla wszystkich elementów. */
    /* Dzięki temu wypełnienie (padding) i obramowanie (border) nie zwiększają całkowitej szerokości i wysokości elementu poza zadeklarowaną wartość, co eliminuje poziomy overflow. */
}

/* style.css */
/* Style dla Komunikatów Statusu */

.status-msg {
    padding: 15px;
    margin: 15px auto;
    /* Centrowanie i odstęp */
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    border: 1px solid transparent;
    max-width: 800px;
    /* Ograniczenie szerokości */
}

.form-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.success-msg {
    color: #3c763d;
    /* Ciemna zieleń */
    background-color: #dff0d8a0;
    /* Jasna zieleń */
    border-color: #d6e9c6;
    /* Granica zielona */
}

.price-box {

    /* 2. Ustawienie układu pionowego (elementy jeden pod drugim) */
    flex-direction: column;
    /* 3. Wyśrodkowanie wszystkich elementów w poziomie */
    align-items: center;
    /* 4. Dodatkowe wyśrodkowanie dla tekstu wewnątrz elementów span (zalecane) */
    text-align: center;

}

.price-box .contact-button {
    /* Upewnienie się, że przycisk jest blokiem (lub inline-block)
       i ma margines, aby odsunąć się od ceny */
    margin-top: 10px;
    /* Zapewnienie, że przycisk jest traktowany jako inline-block,
       dzięki czemu Flexbox może go wyśrodkować. */
    display: inline-block;
    color: #e09100;
}

.error-message {
    color: red;
    font-size: 0.85em;
    margin-top: 5px;
    display: block;
}

.contact-form .form-group {
    position: relative;
}

.char-count-container {
    text-align: right;
    margin-top: -20px;
    font-size: 0.8em;
    color: #666;
    position: absolute;
    bottom: 5px;
    right: 15px;
}

.status-container {
    text-align: center;
}

.back-button {
    color: #e09100;
}

.zero-results {
    text-align: center;
}

/* Nowe style dla kontenera, który będzie "przyklejony" na górze strony */
.sticky-header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* NOWE STYLE DLA GÓRNEGO PASKA */
.top-bar {
    background-color: #fdfcfa;
    color: #faa21c;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}

.top-bar a {
    color: #faa21c;
}

.contact-info i {
    color: #faa21c;
    margin-right: 5px;
}

.social-links {
    display: flex;
    align-items: center;
}

.social-links a {
    margin-left: 10px;
}

.social-links .social-icon i {
    font-size: 1.2em;
}

.facebook-logo {
    width: 24px;
    height: auto;
    vertical-align: middle;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Style dla głównego nagłówka z logo i menu */
.main-header {
    background-color: #faa21c;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- STYLE DLA STOPKI (FOOTER) --- */
.main-footer {
    background-color: #333;
    /* Ciemne tło dla kontrastu. */
    color: #fdfcfa;
    /* Biały/jasny tekst. */
    padding: 2rem 1rem;
    /* Duży odstęp wewnętrzny. */
    text-align: center;
    /* Wyśrodkowanie tekstu. */
    font-size: 0.9rem;
    /* Mniejsza czcionka. */
    border-top: 5px solid #faa21c;
    /* Akcent kolorystyczny na górze. */
    margin-top: 0rem;
    /* Duży margines, oddzielający od reszty strony. */
}

.main-footer p {
    margin: 0.5rem 0;
    /* Lekki margines między wierszami. */
}

.developer-signature {
    color: #faa21c;
    /* Wyróżnienie podpisu kolorem akcentującym. */
    font-weight: bold;
    /* Pogrubienie dla lepszej widoczności. */
    margin-top: 1rem;
    /* Większy odstęp od informacji o prawach autorskich. */
}

.logo {
    background-color: #faa21c;
    color: white;
    text-align: left;
}

.normal_logo {
    max-width: 250px;
    height: auto;
}

/* Zaktualizowany układ nagłówka */
.main-header {
    background-color: #faa21c;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* style.css */

.main-nav {
    margin-left: auto;
    margin-right: auto;
}

/* 1. Główne style linków - usuwamy stałe podkreślenie */
.main-nav ul li a {
    color: #fdfcfa;
    /* Kolor tekstu (biały/jasny). */
    /* 🔥 USUNIĘTO: border-bottom: 3px solid #fdfcfa; */
    border-bottom: 3px solid transparent;
    /* Utrzymuje miejsce, ale jest niewidoczne */
    padding-bottom: 5px;
    /* Odstęp między tekstem a podkreśleniem. */
    font-weight: bold;
    /* Pogrubienie czcionki. */
    transition: all 0.2s ease-in-out;
    /* Płynne przejście. */
}

/* 2. Styl dla aktywnego elementu - WŁĄCZAMY podkreślenie */
.main-nav ul li a.active {
    border-bottom: 3px solid #fdfcfa;
    /* Tylko aktywny element dostaje podkreślenie */
    /* Opcjonalnie: możesz dodać inny kolor, aby był bardziej widoczny, np.: */
    /* color: #faa21c; */
}


.search-bar {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    background-color: white;
}

.search-bar input {
    border: none;
    padding: 8px 15px;
    font-size: 1rem;
    outline: none;
    width: 250px;
    background-color: transparent;
}

.search-bar button {
    background-color: #337ab7;
    border: none;
    color: white;
    padding: 8px 12px;
    cursor: pointer;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0 15px;
    font-size: 1.2rem;
}

/* Zmienione style dla głównego kontenera 'main' */
main {
    padding: 0;
    max-width: 100%;
    margin: 0;
    background: linear-gradient(to bottom, #007bff, #58d4fd);
    box-shadow: none;
    color: rgb(247, 242, 242);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Nowy styl tła dla wszystkich stron */
.page-background {
    background-image: url('beach1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    padding: 2rem;
}

/* style.css - Dodaj te style */

/* Kontener dla wyśrodkowania komunikatu o braku wyników w pionie i poziomie */
.no-results-container {
    display: flex;
    /* Używa Flexbox do zarządzania układem wewnątrz kontenera. */
    justify-content: center;
    /* Centruje zawartość (komunikat) w poziomie. */
    align-items: center;
    /* Centruje zawartość (komunikat) w pionie. */
    width: 100%;
    /* Zajmuje całą dostępną szerokość rodzica (main). */
    flex-grow: 1;
    /* Wypełnia całą dostępną wysokość w kontenerze flexbox (main), jeśli jest ustawiona minimalna wysokość. */
    min-height: 70vh;
    /* Zapewnia minimalną wysokość, aby wyśrodkowanie pionowe działało. */
    padding: 2rem;
    /* Dodaje trochę marginesu wewnętrznego. */
}

/* Dostosowanie istniejącej klasy, aby komunikat był w czytelnej ramce na tle */
.no-results {
    /* Klasa jest już zdefiniowana w Twoim pliku style.css (text-align: center). */
    background-color: rgba(255, 255, 255, 0.9);
    /* Lekko przezroczyste białe tło dla lepszej czytelności. */
    padding: 30px;
    /* Dodaje wewnętrzny margines. */
    border-radius: 10px;
    /* Zaokrągla rogi. */
    max-width: 600px;
    /* Ogranicza szerokość kontenera. */
    width: 100%;
    /* Upewnia się, że działa poprawnie na mniejszych ekranach. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Delikatny cień dla wyróżnienia. */
}

.no-results h2,
.no-results p {
    color: #333;
    /* Ustawia ciemny kolor tekstu dla czytelności na jasnym tle. */
}

.no-results h2 {
    margin-top: 0;
    /* Usuwa górny margines. */
}

/* Nowy kontener do siatki wycieczek */
.offer-grid {
    display: grid;
    /* Domyślnie na desktopie */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
}

/* Dostosowanie stylów dla "Wycieczek" i "Ofert specjalnych", aby tekst był czytelny na ciemnym tle */
.offer-grid a {
    background-color: rgba(250, 248, 248, 0.77);
    color: #f0f0f0;
}

.offer-grid h2,
.offer-grid .price {
    color: #ffffff;
}

/* --- STYLE DLA GŁÓWNEGO ZDJĘCIA WYCIECZKI --- */
.main-image-price {
    width: 100%;
    /* Upewnia się, że kontener zajmuje całą szerokość rodzica. */
    padding: 0 2rem;
    /* Dodaje odstęp boczny (margines), aby zdjęcie nie dotykało krawędzi na desktopie. */
    margin-bottom: 2rem;
    /* Odstęp od sekcji poniżej. */
    margin-left: auto;
    /* Wyśrodkowanie na stronie. */
    margin-right: auto;
}

/* Ustawia padding, aby dodać niewielki margines od lewej i prawej strony.*/
.main-image-price .image-container {
    width: 100%;
    /* Wypełnienie szerokości rodzica. */
    height: 450px;
    /* Ustawia stałą, jednolitą wysokość. */
    overflow: hidden;
    /* Zabezpieczenie przed wyjściem elementu poza kontener. */
    border-radius: 10px;
    /* Zaokrąglenie rogów. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Ten blok jest OK, ale musimy go zdefiniować.*/

.main-image-price .image-container img {
    width: 100%;
    /* Wymusza, aby obrazek wypełnił szerokość kontenera. */
    height: 100%;
    /* Wymusza, aby obrazek wypełnił wysokość kontenera. */
    object-fit: cover;
    /* KLUCZ: Skaluje obraz tak, aby pokrył całą ramkę bez deformacji (przycinając brzegi), co zapewnia jednolite wymiary. */
    display: block;
    /* Zapewnia poprawne zachowanie elementu. */
}

/* Nowy styl dla karty wycieczki/oferty */
.wycieczka-item,
.oferta-item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.wycieczka-item:hover,
.oferta-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.wycieczka-item .image-container,
.oferta-item .image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.wycieczka-item .image-container img,
.oferta-item .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wycieczka-item .content,
.oferta-item .content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wycieczka-item h2,
.oferta-item h2 {
    margin-top: 0;
    font-size: 1.4rem;
    color: #161515;
}

.wycieczka-item p,
.oferta-item p {
    font-size: 0.9rem;
    color: #161515;
    flex-grow: 1;
}

.price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.price-section .price {
    font-size: 1.0rem;
    font-weight: bold;
    color: #333;
}

.price-section .details-link {
    background-color: #faa21c;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.price-section .details-link:hover {
    background-color: #e09100;
}

/* Zaktualizowane style dla kontenerów na stronie głównej */
.containers-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    padding: 2rem;
    /* background-color: rgba(255, 255, 255, 0.7); */
    /* border-radius: 8px; */
    flex-wrap: wrap;
    width: 100%;
}

.container {
    flex: 1;
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.container-icon-box {
    width: 60px;
    height: 60px;
    background-color: #337ab7;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 50%;
    margin: 0 auto 15px;
}

.container h3 {
    margin-top: 0;
    color: #333;
}

.container p {
    color: #555;
    flex-grow: 1;
}

.container a {
    color: #337ab7;
    text-decoration: none;
    font-weight: bold;
}

/* Nowe style dla widoku szczegółów */
.detail-container {
    background-color: #0a0a0aa6;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail-container h1 {
    text-align: center;
    /* Wyśrodkowuje tekst nagłówka h1 (nazwę wycieczki). */
    padding: 1rem 0;
    /* Dodaje odstęp góra/dół. */
    margin-top: 0;
    /* Usuwa domyślny górny margines. */
    color: #f7f5f5;
    /* Ciemny kolor tekstu. */
    font-size: 2.5rem;
    /* Duży rozmiar czcionki. */
}

.contact-details {
    white-space: nowrap;
}

/* NOWE STYLE DLA DWUKOLUMNOWEGO UKŁADU KONTAKT */
.contact-page-main {
    background-image: url('../images/tlo_kontakt_01m.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: flex-start;
    padding: 2rem;
    min-height: 80vh;
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    width: 100%;
    padding: 3rem;
    border-radius: 10px;
}

.contact-info-column {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

/* Zmodyfikowane style dla ikon w sekcji kontaktowej */
.contact-info-column p {
    color: #555;
    line-height: 0.5;
    margin-bottom: 1.0rem;
    display: flex;
    align-items: center;
}

.contact-info-column p i {
    margin-right: 1rem;
    color: #337ab7;
}

.contact-info-column h2 {
    color: #337ab7;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.contact-form-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-form .form-group {
    margin-bottom: 1rem;
}

.contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #fdfafa;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.contact-form textarea {
    resize: vertical;
}

/* Styl dla nieaktywnego przycisku wysyłania wiadomości */
.contact-form #submit-button:disabled {
    opacity: 0.5;
    /* Zmniejsza przezroczystość, aby wyglądał na nieaktywny */
    cursor: not-allowed !important;
    /* Zmienia kursor, by wskazać, że klikanie jest niemożliwe */
    background-color: #2b86e19b;
    /* Utrzymuje kolor tła (opcjonalnie można zmienić na szary) */
    /* Zapewnienie, że styl 'hover' nie będzie aplikowany, gdy przycisk jest nieaktywny */

}

.contact-form .send-button {
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: #faa21c;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: bold;
}

#button-error {
    color: #ff001596;
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: auto;
}

/* Nowe style dla statycznego kontenera obrazu */
/* Nowe style dla statycznego kontenera obrazu */
.static-image-container {
    position: relative;
    width: 100%;
    height: auto;
    /* Zmieniono na auto, aby wysokość dopasowywała się do obrazka */
    max-height: 400px;
    /* Opcjonalnie: ustaw maksymalną wysokość, aby nie był zbyt duży */
    overflow: hidden;
    margin: 0;
    display: flex;
    /* Dodaj flexbox, aby wyśrodkować obraz */
    justify-content: center;
    align-items: center;
}

.static-image-container img {
    width: 100%;
    height: auto;
    /* Zachowaj proporcje */
    object-fit: contain;
    /* Zmieniono na 'contain' - obraz będzie widoczny w całości, z ewentualnymi pustymi przestrzeniami */
    display: block;
    /* Usuń dodatkowe marginesy */
    border-radius: 25px;
}

.image-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.397);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
}

.image-text h2 {
    margin: 0;
    font-size: 2.5rem;
}

.image-text p {
    margin: 0;
    font-size: 1.2rem;
}

/* Style dla strony "O nas" */
.about-us-main {
    background-image: url('beach1.jpg');
    /* Ścieżka do Twojego obrazka */
    background-size: cover;
    /* Pokryj całą przestrzeń */
    background-position: center;
    /* Wyśrodkuj obraz */
    background-attachment: fixed;
    /* Opcjonalnie: tło będzie stałe podczas scrollowania */
    color: white;
    /* Zmień kolor tekstu na biały, aby był czytelny na ciemnym tle */
    padding: 4rem 2rem;
    /* Dodaj więcej paddingu, aby treść nie przylegała do krawędzi */
    min-height: 100vh;
    /* Upewnij się, że sekcja zajmuje całą wysokość widoku */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.about-us-container {
    background-color: rgba(0, 0, 0, 0.432);
    /* Ciemniejsze, półprzezroczyste tło dla czytelności tekstu */
    padding: 3rem;
    border-radius: 10px;
    max-width: 1200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);

}

.about-us-container h1,
.about-us-container h2 {
    color: #ffffff;
    /* Kolor nagłówków */
    margin-bottom: 1.5rem;
}

.about-us-container p,
.about-us-container ul {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #f0f0f0;
    text-align: center;
    /* Jasny kolor tekstu */
}

.about-us-container ul {
    list-style-type: none;
    /* Usuń domyślne kropki */
    padding-left: 0;
}

.about-us-container ul li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 25px;
    /* Miejsce na niestandardową ikonę */
    text-align: left;
    /* Wyrównanie listy do lewej */
}

.about-us-container ul li::before {
    content: "\f00c";
    /* Ikona "check" z Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #faa21c;
    /* Kolor ikony */
    position: absolute;
    left: 0;
    top: 0;
}

.gallery-section {
    margin-bottom: 0;
    /* Ustawia zerowy margines na dole, aby galeria nie miała dodatkowego odstępu od kolejnej sekcji. */
}

.description-full {
    margin-top: 20px;
    /* Ustawia margines górny dla sekcji Opis, jeśli potrzebujesz odstępu. */
    /* Jeśli ten selektor już istnieje, zaktualizuj jego wartość margin-top. */
}

/* NOWE STYLE DLA GALERII (BASE - Desktop) */
.gallery-grid {
    display: grid;
    /* Ustawia układ siatki. */
    grid-template-columns: repeat(3, 1fr);
    /* Domyślnie 3 równe kolumny na desktopie. */
    gap: 15px;
    /* Standardowy odstęp między zdjęciami. */
    padding: 5px 0 20px 0;
    /* POPRAWKA: Zmniejszenie paddingu góra/dół do 5px na górze, co minimalizuje odstęp od głównego zdjęcia. */
    width: 100%;

}

.gallery-grid img {
    width: 100%;
    height: 100px;
    /* Możesz dostosować wysokość, jeśli potrzebujesz. */
    object-fit: cover;
    border-radius: 50%;
    /* ZAOOKRĄGLENIE W 50% TWORZY IDEALNE KOŁO/ELIPSĘ */
    transition: transform 0.3s;
    /* Płynne przejście przy najechaniu. */
    cursor: pointer;
    /* Wskazuje, że element jest klikalny. */
}

/* ... RESZTA STYLI DLA .gallery-grid img BEZ ZMIAN ... */


/* POPRAWKI DLA ODSUNIĘCIA SEKCJI (ABY GALERIA BYŁA WYŻEJ) */
.gallery-section h2 {
    margin-top: 0;
    /* Usuwa domyślny margines górny nagłówka <h2>, który wpycha galerię w dół. */
}

.gallery-section {
    margin-bottom: 0;
    /* Ustawia zerowy margines na dole, aby galeria nie miała dodatkowego odstępu od kolejnej sekcji. */
}

.description-full {
    margin-top: 20px;
    /* Ustawia kontrolowany margines górny dla sekcji Opis, oddzielając ją od galerii. */
}

/* ZAPYTANIA MEDIALNE - RESPONSIVE DESIGN */

/* --- WIDOK MOBILNY: Telefony (< 600px) --- */

@media (max-width: 599px) {

    /* Nagłówek i nawigacja */
    .top-bar {
        /* Upewnienie się, że górny pasek składa się w pionie */
        flex-direction: column;
        /* Zmieniamy wyrównanie na 'center' */
        align-items: center;
        /* Centruje elementy w pionowym układzie. */
    }

    .top-bar {
        margin-top: 5px;
        /* Odstęp między info a socialami */
    }

    /* Wyśrodkowanie tekstu wewnątrz zagnieżdżonych elementów dla lepszej estetyki */
    .contact-info,
    .social-icon {
        width: 100%;
        text-align: center;
        /* Wyrównuje tekst i ikony wewnątrz bloków. */
    }

    .contact-info>span {
        display: block;
        /* Sprawia, że mail i telefon są w oddzielnych wierszach i mogą być centrowane. */
        margin: 5px 0;
    }

    .main-header {
        flex-direction: column;
        align-items: center;
        padding: 1rem 0.5rem;
    }

    /* Logo skaluje się poprawnie */
    .normal_logo {
        max-width: 180px;
        /* Mniejsze logo na telefonie */
    }

    /* Ukryj na mniejszych ekranach pasek wyszukiwania, jeśli nie jest otwarty */
    /* Zostawiamy obsługę widoczności wyszukiwarki do klasy 'nav-open' z JS */
    .search-bar {
        width: 100%;
        /* Wyszukiwarka na całą szerokość */
    }

    .search-bar input {
        width: 100%;
        /* Pole wejściowe na całą szerokość */
    }

    .search-container {
        width: 100%;
        /* Wyszukiwarka na całą szerokość, dodana, aby mogła być widoczna */
        margin-top: 10px;
    }

    .main-nav {
        width: 100%;
        /* Powinno być domyślnie ukryte */
        display: none;
        /* Domyślnie ukrywa nawigację na telefonach. */
    }

    /* Układ menu nawigacji - optymalizacja pod kliknięcia palcem */
    .main-nav.nav-open ul {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }

    .main-nav.nav-open {
        display: flex;
        /* Pokazuje nawigację, gdy ma klasę 'nav-open'. */
        flex-direction: column;
        /* Ustawia kolumnowy układ dla otwartego menu. */
        align-items: center;
        /* Wyśrodkowanie elementów w kolumnie. */
    }

    .main-nav.nav-open ul li {
        text-align: center;
        width: 100%;
        /* Każdy element zajmuje całą szerokość */
        margin: 5px 0;
        padding: 12px 0;
        /* Większy padding dla łatwiejszego klikania */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-nav.nav-open ul li:last-child {
        border-bottom: none;
    }

    main {
        padding: 1rem;
        /* Dodaje margines wewnętrzny 1rem ze wszystkich stron, aby treść nie "przyklejała się" do krawędzi ekranu. */
        min-height: 80vh;
        /* Upewnia się, że treść jest wyśrodkowana na stronie bez tła. */
    }

    /* Sekcje siatki/listy (jedna kolumna) */
    .offer-grid,
    .containers-section {
        grid-template-columns: 1fr;
        /* Jedna kolumna na telefonach */
        gap: 1.5rem;
        padding: 0;
        /* Mniejszy padding */
    }

    .containers-section {
        flex-direction: column;
        align-items: center;
        position: relative;
        bottom: -10px;
    }

    .container {
        width: 100%;
        max-width: none;
    }

    /* Strona szczegółów */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 kolumny dla telefonów/małych tabletów */
        gap: 10px;
    }

    .gallery-grid img {
        height: 70px;
        /* Średnia wysokość */
    }

    .detail-container .price-details-sections {
        flex-direction: column;
        /* Sekcje cen w pionie */
        gap: 1.5rem;
    }

    .detail-container {
        padding: 0;
        /* Upewnienie się, że detail-container nie ma paddingu, ponieważ padding jest już na elemencie main, które go otacza. */
    }

    .detail-container h1 {
        font-size: 1.8rem;
        /* Zmniejsza rozmiar nagłówka na telefonach. */
        padding: 0.5rem 0;
        /* Zmniejsza odstęp góra/dół. */
    }

    .detail-container .price-details {
        font-size: 1rem;
        /* Zmniejsza rozmiar ceny. */
        margin-bottom: 1rem;
    }

    .detail-container h2,
    .extended-description,
    .detailed-program,
    .included,
    .not-included,
    .gallery {
        padding: 0 1rem;
        /* Dodaje padding poziomy do wszystkich sekcji i nagłówków w detail-container, aby zachować odstęp od krawędzi ekranu, zgodnie z paddingiem na 'main'. */
    }

    /* Strona Kontakt */
    .contact-page-main {
        padding: 1rem;
        /* Mniejszy padding na małych ekranach */
    }

    .contact-grid-container {
        flex-direction: column;
        /* Układ jednokolumnowy na telefonach */
        padding: 1rem;
        gap: 1rem;
        background-color: #16151571;
    }

    .contact-info-card {
        border-bottom: 1px solid #fcf7f7;
    }

    .contact-info-card,
    .contact-form-card {
        min-width: unset;
        /* Usunięcie minimalnej szerokości, aby się złożyły */
        width: 100%;
    }

    .image-text {
        padding: 5px 10px;
        /* Zmniejsza margines wewnętrzny tekstu dla kompaktowego wyglądu. */
        bottom: 5px;
        /* Podnosi lekko kontener, aby nie był zbyt blisko krawędzi. */
        width: 295px;
        border-radius: 15px;
    }

    .image-text h2 {
        font-size: 1.5rem;
        /* Zmniejsza główny nagłówek. */
    }

    .image-text p {
        font-size: 0.9rem;
        /* Zmniejsza akapit. */
    }


    .main-image-price {
        padding: 0 1rem;
        /* Zapewnia margines boczny, aby zdjęcie nie dotykało krawędzi ekranu. */
        margin-bottom: 1rem;
    }

    .main-image-price .image-container {
        height: 250px;
        /* Optymalna wysokość dla widoku mobilnego. */
        border-radius: 5px;
        /* Mniejsze zaokrąglenie. */
    }

    .main-image-price .image-container img {
        height: 100%;
        /* Wymusza, by obraz wypełniał nową, mniejszą wysokość. */
    }
    .contact-map {
        width: 100%;
        margin-top: 5px;
    }
}

/* --- WIDOK ULTRA MOBILNY: Telefony (< 410px) --- */
@media (max-width: 410px) {
    .image-text {
        bottom: 5px;
        /* Obniża pozycję kontenera tekstu z 10px na 5px. */
    }

    .image-text h2 {
        font-size: 1.2rem;
        /* Jeszcze bardziej zmniejsza nagłówek, aby tekst mieścił się na bardzo małych ekranach. */
    }

    .image-text p {
        font-size: 0.8rem;
        /* Jeszcze bardziej zmniejsza akapit. */
    }

    .detail-container h1 {
        font-size: 1.8rem;
        /* Zmniejsza rozmiar nagłówka na telefonach. */
        padding: 0.5rem 0;
        /* Zmniejsza odstęp góra/dół. */
    }

    .detail-container .price-details {
        font-size: 1rem;
        /* Zmniejsza rozmiar ceny. */
        margin-bottom: 1rem;
    }


    .main-image-price {
        padding: 0 0.5rem;
        /* Minimalny margines boczny 8px (0.5rem). */
        margin-bottom: 0.8rem;
    }

    /* Minimalny padding dla bardzo wąskich ekranów.*/

    .main-image-price .image-container {
        height: 200px;
        /* Najmniejsza wysokość dla wąskich ekranów. */
        border-radius: 3px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 4 małe kolumny dla wąskich ekranów */
        gap: 6px; /* Bardzo mały odstęp */
        padding: 5px 10px 15px 10px; /* Dodanie paddingu bocznego, aby nie przylegało do krawędzi */
    }

    .gallery-grid img {
        height: 60px;
        /* Najmniejsza wysokość */
    }
    .contact-map {
        width: 107%;
        margin-top: 5px;
    }
}

/* --- WIDOK TABLETOWY: (600px do 1024px) --- */
@media (min-width: 600px) and (max-width: 1024px) {

    /* Nagłówek i nawigacja */
    .top-bar {
        /* Lepsze wykorzystanie przestrzeni - pozostaje poziomy */
        flex-direction: row;
        justify-content: space-around;
    }

    .contact-info {
        /* Upewnienie się, że elementy obok siebie nie są za blisko */
        padding-right: 1rem;
    }

    /* Nagłówek główny - może być poziomy, ale z mniejszym logo */
    .main-header {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .normal_logo {
        max-width: 200px;
    }

    /* Wyszukiwarka na tabletach może być widoczna */
    /* Nadpisanie ukrywania z poprzedniej reguły (jeśli jest) */
    .search-container {
        display: block !important;
        /* Upewnienie się, że jest widoczny */
        order: 2;
        margin-left: 10px;
    }

    /* Pokaż przycisk hamburgera */
    .menu-toggle {
        display: block;
        order: 3;
    }

    /* Menu jest domyślnie ukryte i pojawia się po kliknięciu */
    .main-nav {
        width: 100%;
        order: 4;
        display: none;
        margin-left: 0;
        margin-right: 0;
    }

    .main-nav.nav-open {
        display: block;
        /* Pokazuje nawigację, gdy ma klasę 'nav-open'. */
        /* flex-direction: column; */
        /* Ustawia kolumnowy układ dla otwartego menu. */
        /* align-items: center; */
        /* Wyśrodkowanie elementów w kolumnie. */
    }

    .main-nav.nav-open ul {
        flex-direction: column;
        /* Elementy menu w pionie dla lepszej czytelności. */
        align-items: center;
        /* Wyśrodkowanie elementów. */
    }

    main {
        padding: 2rem;
        /* Dodaje margines wewnętrzny 2rem, odpowiedni dla tabletów. */
    }

    /* Zaktualizuj sekcje siatek, aby nie miały podwójnego paddingu */
    .offer-grid,
    .containers-section {
        padding: 0;
        /* Usuwamy padding z siatki, aby był tylko na głównym elemencie 'main'. */
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .container {
        width: auto;
        max-width: none;
    }

    .detail-container h1 {
        font-size: 1.8rem;
        /* Zmniejsza rozmiar nagłówka na telefonach. */
        padding: 0.5rem 0;
        /* Zmniejsza odstęp góra/dół. */
    }

    .detail-container .price-details {
        font-size: 1rem;
        /* Zmniejsza rozmiar ceny. */
        margin-bottom: 1rem;
    }

    /* Strona szczegółów */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Dwie kolumny dla galerii na tabletach */
        gap: 15px;
    }

    .gallery-grid img {
        height: 90px;

    }

    /* Strona Kontakt */
    .contact-grid-container {
        /* Dwie kolumny na tabletach, ale z lepszym odstępem */
        flex-direction: row;
        gap: 2rem;
        padding: 2rem;
        background-color: #16151556;
    }

    .contact-info-card {
        border-bottom: 1px solid #fcf7f7;
    }

    .contact-info-card,
    .contact-form-card {
        min-width: 300px;
        /* Utrzymanie czytelnej szerokości */
    }

    .image-text h2 {
        font-size: 2rem;
        /* Umiarkowane zmniejszenie nagłówka na tabletach. */
    }

    .image-text p {
        font-size: 1rem;
        /* Umiarkowane zmniejszenie akapitu na tabletach. */
    }

    .main-image-price {
        padding: 0 1.5rem;
        /* Mniejszy margines/odstęp boczny. */
    }

    .main-image-price .image-container {
        height: 380px;
        /* Redukcja wysokości na tabletach. */
    }
    .contact-map {
        width: 100%;
    }
}

/* --- WIDOK DESKTOPOWY: ( > 1024px) --- */
@media (min-width: 1025px) {

    /* Upewnij się, że na desktopie menu i wyszukiwarka są widoczne */
    .main-nav ul,
    .search-container {
        display: flex !important;
    }

    /* Upewnij się, że na desktopie menu jest poziome */
    .main-nav ul {
        flex-direction: row;
    }

    /* Ukryj przycisk hamburgera */
    .menu-toggle {
        display: none;
    }

    /* Wyczyść style flex-wrap/order */
    .main-header {
        flex-wrap: nowrap;
    }

    .main-nav {
        width: auto;
    }

    .search-container {
        order: initial;
    }

    /* Przywrócenie domyślnego układu siatek na desktopie */
    .offer-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .containers-section {
        flex-direction: row;
    }

    .contact-grid-container {
        /* Używamy Flexbox dla sekcji info i formularza */
        display: flex;
        /* Elementy w jednym rzędzie */
        flex-direction: row;
        /* Zawijanie elementów tylko na mniejszych ekranach (domyślnie jest to ustawione w media query) */
        flex-wrap: wrap;
        gap: 2rem;
        /* Odstęp między kolumnami */
        max-width: 1200px;
        width: 100%;
        margin: 2rem auto;
        /* Wyśrodkowanie kontenera na stronie */
        padding: 2rem;
        background-color: rgba(8, 8, 8, 0.493);
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .contact-info-card {
        /* Upewnienie się, że lewa kolumna zajmuje odpowiednią przestrzeń */
        flex: 1;
        /* Pozwól, aby zajęła przynajmniej 300px, a potem się rozciągała */
        min-width: 300px;
        padding: 1.5rem;
        border-right: 1px solid #fcf7f7;
        /* Wizualne oddzielenie */

    }

    .contact-form-card {
        /* Upewnienie się, że formularz zajmuje resztę przestrzeni */
        flex: 2;
        /* Daj formularzowi więcej miejsca (np. 2 razy więcej niż info-card) */
        min-width: 350px;
        padding: 1.5rem;
    }

    /* Nowa sekcja dla mapy pod spodem */
    .contact-map {
        width: 100%;
        /* Mapa na pełną szerokość kontenera */
        margin-top: 5px;
        /* Odstęp od sekcji info/formularza */
        overflow: hidden;
        /* Zabezpieczenie przed wyjściem mapy poza granice */
        max-width: 1200px;
        
    }

   
    /* NOWE STYLE DLA GALERII (BASE - Desktop) */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolumny na dużym ekranie */
        gap: 20px;
    }

    .gallery-grid img {
        height: 120px; /* Największa wysokość */
    }

    .gallery-grid img:hover {
        transform: scale(1.03);
        /* Delikatne powiększenie po najechaniu myszką. */
    }


    .main-image-price {
        padding: 0 2rem;
        /* Większy margines/odstęp boczny na dużych ekranach. */
    }

    .main-image-price .image-container {
        height: 500px;
        /* Optymalna wysokość dla dużych monitorów. */
        margin: 0 auto;
        /* Wyśrodkowanie kontenera zdjęcia, jeśli .detail-container byłby szerszy. */
    }
}