/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* PODSTAWOWE STYLE */
html {
    scroll-behavior: smooth;
    height: 100%; /* Spraw, aby html zajmował całą wysokość */
}

body {
    font-family: 'Lato', sans-serif;
    background-color: rgb(51, 51, 51);
    margin: 0; /* Usuń domyślne marginesy przeglądarki */
    padding: 0; /* Usuń domyślne paddingi przeglądarki */
    display: flex; /* Ustaw body jako kontener flex */
    flex-direction: column; /* Ułóż elementy w body (nav, section, footer) w kolumnie */
    min-height: 100vh; /* Upewnij się, że body ma co najmniej wysokość całego widoku */
}

.container {
    width: 960px;
    margin: 0 auto;
    padding: 0 15px; /* Dodany padding, aby treść nie dotykała brzegów na mniejszych ekranach */
    box-sizing: border-box; /* Ważne, aby padding był wliczany w szerokość */
}

h1 {
    font-size: 36px;
    color: #FFF; /* Domyślny kolor dla h1, możesz nadpisać w sekcjach */
}

/* NAWIGACJA */
nav {
    background-color: rgb(51, 51, 51);
    position: sticky; /* Sticky nav */
    top: 0;
    z-index: 1000; /* Upewnia się, że nawigacja jest zawsze na wierzchu */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Lekki cień pod nawigacją */
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px; /* Wysokość dla nawigacji jest OK */
}

footer .container.footer-grid { /* Używamy footer-grid, aby upewnić się, że celujemy w właściwy kontener */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */
    gap: 50px; /* Odstęp między kolumnami */
    align-items: flex-start; /* Kolumny wyrównane do góry */
    text-align: left; /* Resetuj text-align dla kolumn */
    height: auto; /* <--- DODAJ LUB UPEWNIJ SIĘ, ŻE JEST TAK USTAWIONE! */
    padding: 30px 15px; /* Przykład paddingu, który może być potrzebny */
}

nav a {
    color: white;
    text-decoration: none;
}

.nav-logo {
    font-weight: 600;
    padding: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    width: 25%;
}

.nav-links a {
    transition: .3s all;
}

.nav-links a:hover {
    transform: scale(1.1); /* Powiększenie linków nawigacji po najechaniu kursorem*/
}



/* STRONA GŁÓWNA - LANDING PAGE */
.landing-page {
    height: calc(100vh - 60px);
    background-image: url(forest.jpg);
    background-position: center;
    background-size: cover;
}

.landing-page-shadow {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

.landing-page-shadow .container {
    display: flex;
    align-items: center;
    height: 100%;
}

.landing-page-text {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 20%;
    align-items:flex-start;
    padding: 20px; /* Dodany padding dla lepszego wyglądu na małych ekranach */
}

.landing-page-text h1 { /* Dodany styl dla h1 w tej sekcji */
    line-height: 1.3; /* Zwiększa odstęp między linijkami w h1 */
}

.landing-page-text h2 {
    font-size: 24px;
    line-height: 1.4; /* Zwiększa odstęp między linijkami w h2 */
}

.landing-page-text button {
    color: white;
    padding: 6px 13px;
    background: none;
    border: 2px solid white;
    border-radius: 14px;
    font-size: 16px;
    transition: 1s all;
    cursor: pointer;
    margin-top: 20px; /* Dodaje odstęp 20px od elementu powyżej (H2) */
}

.landing-page-text button:hover {
    background-color: white;
    color: black;
}

/* SEKCJA O MNIE (krótka na index.html) */
.about-me-short {
    padding: 80px 0; /* Odstęp góra/dół */
    background-color: #f4f4f4; /* Jasne tło, aby się wyróżniała */
    color: #333;
    text-align: center; /* Centrowanie tytułu */
}

.about-me-short h2 {
    margin-bottom: 40px;
    font-size: 32px;
    color: #333;
}

.about-me-short .about-me-content {
    display: flex;
    align-items: center;
    gap: 30px; /* Odstęp między tekstem a zdjęciem */
    margin-bottom: 30px;
    text-align: left; /* Tekst wewnątrz powinien być lewym */
}

.about-me-short .about-me-text-short {
    flex: 1; /* Tekst zajmuje dostępną przestrzeń */
}

.about-me-short .about-me-text-short p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.about-me-short .about-me-image {
    flex-shrink: 0; /* Obraz nie będzie się kurczyć */
    width: 250px; /* Stała szerokość obrazu na desktopie */
    height: 250px; /* Stała wysokość obrazu */
    border-radius: 50%; /* Aby zdjęcie było okrągłe */
    overflow: hidden; /* Upewnia się, że zdjęcie jest w okręgu */
}

.about-me-short .about-me-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Dopasowuje obraz do kontenera */
}

.about-me-short .about-me-more-button {
    background-color: #587158; /* Kolor przycisku */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s all;
    text-transform: none;
    text-decoration: none; /* Jeśli używasz tagu <a> zamiast <button> */
    display: inline-block; /* Ważne dla paddingu i marginesu jeśli <a> */
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-me-short .about-me-more-button:hover {
    transform: translateY(-5px); /* Lekkie uniesienie na hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

/* SEKCJA O MNIE (pełna na about-me.html) */
.about-me-full {
    padding: 80px 0;
    background-color: rgb(51, 51, 51);
    color: white;
}

.about-me-full h2 {
    font-size: 36px;
    margin-bottom: 40px;
    text-align: center;
    color: #587158;
}

.about-me-full h3 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #587158; /* kolor dla podnagłówków */
}

.about-me-full p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-me-full ul {
    list-style: none; /* Resetuj domyślne listy */
    padding-left: 0;
    margin-bottom: 20px;
}

.about-me-full ul li {
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px; /* Miejsce na niestandardowy znacznik listy */
}

.about-me-full ul li::before {
    content: '✓'; /* Użyj ikonki ticka jako znacznika */
    color: #587158;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

.about-me-full .about-me-intro {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

.about-me-full .about-me-intro img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.about-me-full .about-me-intro p {
    margin-bottom: 0; /* Usuń dolny margines dla akapitu w intro */
}

.about-me-full button {
    background-color: #587158; /* Kolor przycisku */
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    display: block; /* Zmienione na block, aby można było użyć margin: auto */
    width: fit-content; /* Zapewnia, że przycisk ma tylko taką szerokość, jak jego zawartość, a nie 100% */
    margin: 30px auto 0 auto; /* Ustawia górny margines i centrowanie poziome */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-me-full button:hover {
    transform: translateY(-5px); /* Lekkie uniesienie na hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}


/* SEKCJA OFERTA (na index.html) */
.offer {
    padding: 80px 0; /* Zwiększony padding */
    background-color: rgb(51, 51, 51);
    color: white;
}

.offer h1 {
    margin-bottom: 50px;
    text-align: center; /* Dodane dla lepszego centrowania na wszystkich ekranach */
}

.offer-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centruje boxy jeśli nie wypełniają całej szerokości */
}

.offer-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 30%; /* Domyślna szerokość dla większych ekranów padding: 30px;*/
    height: 150px;
    margin-bottom:5%;
    margin-right: 5%; /* Domyślny margines */
    background-color: #587158; /* Tło dla boxa */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-box:hover {
    transform: translateY(-5px); /* Lekkie uniesienie na hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

.offer-box h2 {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px; /* Większa czcionka dla tytułu oferty */
    color: white;
}

.offer-box h3 {
    font-size: 14px;
    color: white;
}

.offer-box:nth-of-type(3n) {
    margin-right: 0;
}


/* Style dla ogólnej sekcji na podstronach ofertowych */
.offer-page-content {
    padding: 80px 0;
    background-color: rgb(51, 51, 51);
    color: white;
}

.offer-page-content h1 {
    font-size: 38px; /* Nieco większy nagłówek dla głównego tytułu oferty */
    text-align: center;
    margin-bottom: 50px;
    color: #587158; /* Używamy Twojego koloru dla nagłówków */
}

.offer-page-content h2 {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #587158;
}

.offer-page-content p {
    line-height: 1.7;
    margin-bottom: 20px;
}

.offer-page-content ul {
    list-style: none; /* Usuwamy domyślne kropki */
    padding-left: 0;
    margin-bottom: 30px;
}

.offer-page-content ul li {
    line-height: 1.8;
    margin-bottom: 12px;
    position: relative;
    padding-left: 30px; /* Miejsce na ikonę */
}

.offer-page-content ul li::before {
    content: '✔'; /* Możesz zmienić na '✓', '▶' lub inną ikonę */
    color: #587158; /* Kolor ikonki listy */
    position: absolute;
    left: 5px;
    top: 0;
    font-size: 1em; /* Rozmiar ikonki */
    font-weight: bold;
}

/* Styl dla przycisku na podstronach ofertowych (podobnie jak na stronie "O mnie") */
.offer-page-content button {
    background-color: #587158;
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: .3s all;
    text-decoration: none;
    display: block; /* Umożliwia centrowanie */
    width: fit-content;
    margin: 40px auto 0 auto; /* Centrowanie poziome i górny margines */
}

.offer-page-content button:hover {
    transform: scale(1.1);
}

/* === STYL DLA NAGŁÓWKÓW PODSTRON (.page-header) - BANNER 300px === */
/* ======================================================= */
.page-header {
    /* Ustawiona wysokość dla podstron: 300px */
    height: 300px; 
    
    /* Zmień ścieżkę na ścieżkę do Twojego zoptymalizowanego obrazu 1920x300 */
    background-image: url('forest_page_header_300px.jpg'); 
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: #fff; /* Biały kolor tekstu dla kontrastu */
    position: relative;
}

/* Nakładka dla czytelności tytułu na tle zdjęcia (kolor rgb(51, 51, 51) z Twojego CSS) */
.page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.3); 
    z-index: 1;
}

/* Styl dla samego tytułu strony w nagłówku */
.page-header .container {
    z-index: 2;
    position: relative;
}
.page-header h1 {
    font-size: 32px; 
}

/* Style dla sekcji z przykładami (jeśli zdecydujesz się dodać) */
.offer-examples {
    margin-top: 50px;
    margin-bottom: 40px;
}

.offer-examples h3 {
    font-size: 26px;
    color: #587158;
    margin-bottom: 25px;
    text-align: center;
}

.offer-examples .example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsywna siatka */
    gap: 20px;
}

.offer-examples .example-grid img {
    width: 100%;
    height: 200px; /* Stała wysokość dla obrazów */
    object-fit: cover; /* Dopasowanie obrazu */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* Style dla strony kontaktowej */
.contact-page-content {
    padding: 80px 0;
    background-color: rgb(51, 51, 51);
    color: white;
}

.contact-page-content h1 {
    font-size: 38px;
    text-align: center;
    margin-bottom: 30px;
    color: #ffffff;
}

.contact-page-content .contact-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

.contact-page-content h2 {
    font-size: 28px;
    color: #ffffff;
    margin-bottom: 25px;
    text-align: center;
}

.contact-details-and-form {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    align-items: stretch; /* Zmienione na stretch, aby kolumny miały tę samą wysokość */
}

.contact-info, .contact-form {
    flex: 1;
    min-width: 300px;
    background-color: #3f3f3f;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    box-sizing: border-box; /* Dodane, aby padding był wliczany w szerokość */
}

.contact-info p {
    margin-bottom: 15px;
    line-height: 1.5;
}

.contact-info a {
    color: #ffffff; /* Kolor linków w danych kontaktowych */
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #587158;
}

.map-container {
    margin-top: 25px;
    border-radius: 8px;
    overflow: hidden; /* Aby mapa miała zaokrąglone rogi */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.map-container iframe {
    border: 0; /* Usuwa domyślną ramkę iframe */
}

/* Formularz kontaktowy */
.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block; /* Etykiety nad polami input */
    margin-bottom: 8px;
    font-weight: bold;
    color: #dbdbdb;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #4a4a4a;
    color: white;
    font-size: 16px;
    box-sizing: border-box; /* Wlicza padding w szerokość */
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #587158;
    outline: none;
    box-shadow: 0 0 0 2px rgba(88, 113, 88, 0.5);
}

.contact-form textarea {
    resize: vertical; /* Pozwala na zmianę wysokości przez użytkownika */
    min-height: 400px; /* PRZYKŁADOWA WARTOŚĆ: Zwiększ tę wartość, np. do 180px, 200px, 250px, aby wypełnić przestrzeń */
}

.contact-form button[type="submit"] {
    background-color: #587158;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block; /* Centrowanie */
    margin: 30px auto 0 auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-form button[type="submit"]:hover {
    background-color: #587158;
    transform: translateY(-5px); /* Lekkie uniesienie na hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

/* STOPKA */
footer {
    background-color: rgb(228, 228, 228);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 10px 0; /* Zmniejszony padding dla niższej stopki */
    color: #333;
    font-size: 14px; /* Domyślny rozmiar fontu dla całej stopki */
    line-height: 1.4; /* Domyślne odstępy między linijkami dla całej stopki */
}

footer a { /* Obejmuje .footer-logo, linki kontaktowe, linki prawne, linki usług */
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Główne kolumny stopki (teraz 3 kolumny) */
footer .container.footer-grid {
    display: grid; /* Używamy grid dla układu 3 kolumn */
    grid-template-columns: repeat(3, 1fr); /* 3 równe kolumny */
    gap: 30px; /* Odstęp między głównymi kolumnami */
    align-items: stretch; /* Kolumny rozciągają się na całą wysokość */
    text-align: left; /* Ogólne wyrównanie tekstu w kontenerze stopki do lewej */
    height: auto;
    padding: 10px 15px; /* Padding wewnętrzny kontenera stopki */
}

/* Ogólne style dla WSZYSTKICH kolumn w stopce */
.footer-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* : Wyrównuje zawartość kolumny do dołu */
    align-items: flex-start; /* Domyślne wyrównanie zawartości każdej kolumny do lewej */
    gap: 5px; /* <-- DODANE: Globalny odstęp między elementami w kolumnie */
}

/* Style dla kolumny z logo i kontaktem */
.footer-column.footer-info-contact {
    /* Dziedziczy większość stylów z .footer-column */
}

.footer-logo {
    font-weight: 600;
    font-size: 20px;
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 0px;
}

footer p {
    font-size: 14px;
    line-height: 1.4;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 0px;
}

/* Style dla linków kontaktowych i prawnych */
.footer-contact a,
.footer-legal-links ul li a { /* Ważna korekta selektora, bo linki prawne są w ul li */
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
    line-height: 1.4;
}

.footer-contact a:hover,
.footer-legal-links ul li a:hover { /* Ważna korekta selektora */
    color: #587158;
}

/* Style dla kolumny z linkami prawnymi */
.footer-column.footer-legal-links {
    /* Dziedziczy z .footer-column */
}

.footer-legal-links ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.footer-legal-links ul li {
    margin-bottom: 5px; /* Odstęp między linkami prawnymi */
}

/* Style dla kolumny z usługami (wrapper i wewnętrzny grid) */
.footer-column.footer-offers-wrapper {
    align-items: flex-end; /* Wyrównuje zawartość tej kolumny do prawej */
}

.footer-offers-grid { /* Kontener dla dwóch pod-kolumn linków usług */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie pod-kolumny wewnątrz */
    gap: 10px; /* Mały odstęp między pod-kolumnami */
    width: 100%; /* Zajmuje całą dostępną szerokość */
}

.footer-offers-grid ul { /* Listy w pod-kolumnach usług */
    list-style: none;
    padding-left: 0;
    margin: 0;
    text-align: right; /* Wyrównuje tekst w listach do prawej */
}

.footer-offers-grid ul li {
    margin-bottom: 5px; /* Odstęp między elementami listy */
}

.footer-offers-grid ul li:last-child {
    margin-bottom: 0;
}

.footer-offers-grid ul li a { /* Linki w pod-kolumnach usług */
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
    line-height: 1.4;
}

.footer-offers-grid ul li a:hover {
    color: #587158;
}


/* === MEDIA QUERIES DLA RESPONSYWNOŚCI === */

@media (max-width: 992px) {
    .container {
        width: 100%; /* Kontener zajmuje całą szerokość na mniejszych ekranach */
    }
    .nav-links {
        width: 35%; /* Zwiększona szerokość linków nawigacji */
    }
}

@media (max-width: 768px) {
    nav .container {
        flex-direction: column; /* Nawigacja w kolumnie na małych ekranach */
        height: auto;
        padding: 10px 0;
        align-items: center; /* Centrowanie elementów w kolumnie */
    }
    .nav-logo {
        /* Zwiększ rozmiar na mobile, by było bardziej widoczne */
        height: 80px; 
        width: 80px; 
        margin-bottom: 20px; /* Odstęp od linków nawigacyjnych */
        /* Upewnienie się, że jest w pełni widoczne */
        position: static; /* Usuń pozycjonowanie absolutne/relatywne */
    }

    /* Właściwy okrąg */
    .logo-circle {
        /* Wyrównanie wewnątrz .nav-logo */
        position: relative; 
        top: 0;
        bottom: 0;
        left: 0; 
        transform: none; /* Usuń transformację */

        /* Dopasowanie rozmiaru do nowego .nav-logo */
        width: 80px; 
        height: 80px; 
        background-size: 80px 80px; 
        
        /* KLUCZOWA ZMIANA: Usuń wystawanie */
        box-shadow: none; /* Opcjonalnie usuń cień dla czystszego wyglądu */
    }

    .nav-links {
        width: 80%; /* Linki zajmują większą szerokość */
        justify-content: space-around; /* Równomierne odstępy */
        font-size: 14px;
        margin-top: 0; /* Zostało już obsłużone przez margin-bottom na .nav-logo */
    }

    .landing-page {
        height: 80vh; /* Mniejsza wysokość na mobilnych */
    }
    .landing-page-text h1 {
        font-size: 38px;
    }
    .landing-page-text h2 {
        font-size: 20px;
    }
    .landing-page-text button {
        padding: 10px 25px;
        font-size: 18px;
    }

    .about-me-short {
        padding: 50px 0;
    }
    .about-me-short h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }
    .about-me-short .about-me-content {
        flex-direction: column; /* Stos obraz i tekst pionowo */
        text-align: center;
    }
    .about-me-short .about-me-image {
        margin-bottom: 20px;
    }

    .about-me-full {
        padding: 50px 0;
    }
    .about-me-full h2 {
        font-size: 30px;
        margin-bottom: 30px;
    }
    .about-me-full h3 {
        font-size: 22px;
        margin-top: 25px;
        margin-bottom: 10px;
    }
    .about-me-full .about-me-intro {
        flex-direction: column;
        text-align: center;
        margin-bottom: 30px;
    }
    .about-me-full .about-me-intro img {
        margin-bottom: 20px;
    }
    .about-me-full ul li {
        padding-left: 0; /* Na telefonach usuń wcięcie */
        text-align: left; /* Utrzymaj wyrównanie do lewej */
    }
    .about-me-full ul li::before {
        position: static; /* Znacznik będzie przed tekstem w linii */
        margin-right: 10px;
    }

    .offer {
        padding: 60px 0;
    }
    .offer h1 {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .offer-box {
        width: 80%; /* Oferty zajmują większą szerokość na mniejszych ekranach, ale zostawiają marginesy boczne */
        margin-right: 0; /* Usunięcie marginesu bocznego, bo jest centrowanie */
        margin-bottom: 20px; /* Zwiększenie odstępu między boxami */
    }

    .page-header {
        height: 200px; /* Niska wysokość na mobile */
    }
    .page-header h1 {
        font-size: 20px; /* Mniejszy tytuł na mobile */
    }

    /* Style dla strony kontaktowej */
    .contact-page-content {
        padding: 50px 0;
    }
    .contact-page-content h1 {
        font-size: 32px;
    }
    .contact-details-and-form {
        flex-direction: column; /* Układanie kolumn pod sobą */
        gap: 30px;
        align-items: center; 
    }
    .contact-info, .contact-form {
        padding: 25px;
        width: 100%; /* Ustaw szerokość na 100% dostępnej przestrzeni */
        flex-basis: auto; /* Zresetuj flex-basis, aby elastycznie się dopasowywało */
        max-width: 500px; /* Opcjonalnie: Ustaw maksymalną szerokość, aby nie były zbyt rozciągnięte na tabletach w pionie */
        box-sizing: border-box;
    }

        /* Stopka na mobilnych - układ jednokolumnowy */
    footer .container.footer-grid {
        grid-template-columns: 1fr; /* Zmieniono na jedną kolumnę */
        gap: 20px; /* Zmniejsz odstęp między sekcjami stopki na mobilnych */
        text-align: center; /* Centruj całą zawartość stopki na mobilnych */
        padding: 20px 15px; /* Zwiększ padding na mobilnych */
    }

    /* Ogólne style dla kolumn stopki na mobilnych (wyśrodkowane) */
    .footer-column {
        align-items: center; /* Centruj zawartość kolumn (poziomo) na mobilnych */
        text-align: center; /* Centruj tekst w kolumnach na mobilnych */
    }

    .footer-column.footer-offers-wrapper {
        align-items: center; /* <-- WAŻNE: Centruj zawartość tej kolumny na mobilnych */
    }

    /* Dopasuj logo na mobilnych */
    .footer-logo {
        margin: 0 auto 10px auto; /* Wyśrodkuj logo */
        font-size: 18px; /* Mniejszy rozmiar */
    }

    /* Dostosuj rozmiar tekstu i linków na mobilnych */
    footer p,
    .footer-contact a,
    .footer-legal-links ul li a,
    .footer-offers-grid ul li a {
        font-size: 13px;
    }

    /* Układ usług na mobilnych - jedna pod-kolumna */
    .footer-offers-grid {
        grid-template-columns: 1fr; /* Zmieniono na jedną pod-kolumnę */
        gap: 0; /* Usuń odstępy między pod-kolumnami */
        width: 100%;
    }

    .footer-offers-grid ul {
        margin-bottom: 10px; /* Dodaj odstęp między listami na mobilnych */
        text-align: center; /* Centruj tekst w listach usług na mobilnych */
    }

    .footer-offers-grid ul:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .nav-links {
        width: 95%; /* Linki zajmują jeszcze większą szerokość */
        font-size: 12px;
    }
    .landing-page-text h1 {
        font-size: 32px;
    }
    .landing-page-text h2 {
        font-size: 18px;
    }
    
    .about-me-short h2 {
        font-size: 24px;
    }
    .about-me-full h2 {
        font-size: 26px;
    }
    .about-me-full h3 {
        font-size: 20px;
    }
    .offer h1 {
        font-size: 28px;
    }

    /* Style dla strony kontaktowej */
    .contact-page-content h1 {
        font-size: 28px;
    }
    .contact-page-content h2 {
        font-size: 24px;
    }
    .contact-info, .contact-form {
        padding: 20px; /* Nieco mniejszy padding na najmniejszych ekranach */
    /* width: 100%; - Ta reguła powinna być już z 768px i nadal działać */
}
}


/* ========================================================= */
/* ZAAWANSOWANA STYLIZACJA WYSTAJĄCEGO LOGO (POPRAWKA: WYSTAJE NA DOLE) */
/* ========================================================= */

/* Ustawienia kontenera nawigacji dla wyrównania */
nav .container {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
}

/* 1. Ustawienie tła dla elementu NAV (upewnij się, że jest ten sam kolor co logo-circle) */
nav {
    background-color: rgb(51, 51, 51); /* Ustaw kolor Twojego paska nawigacyjnego */
    z-index: 100; 
    /* Ważne: usuń lub zmniejsz padding-bottom, jeśli jest zbyt duży */
    padding-top: 10px; 
    padding-bottom: 10px; 
}

/* 2. Styl dla kontenera logo (linku) */
.nav-logo {
    position: relative; 
    
    /* Wymiary: Mniej więcej połowa docelowego rozmiaru okręgu ($120px / 2 = 60px$) */
    height: 60px; 
    width: 60px; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110; 
}

/* 3. Styl dla właściwego, wystającego okręgu (span) */
.logo-circle {
    position: absolute; 
    
    /* Docelowy rozmiar okręgu (120px) */
    width: 110px; 
    height: 110px; 
    
    /* KLUCZOWA ZMIANA: Przesunięcie do dołu: -Połowa rozmiaru (120px / 2 = 60px) zmniejszone do -40*/ 
    bottom: -30px; 
    left: 0; 

    /* Kształt i Kolor */
    border-radius: 50%; 
    background-color: rgb(51, 51, 51); /* MUSI BYĆ TAKI SAM JAK background-color dla <nav> */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); 
    
    /* Obrazek jako tło okręgu */
    background-image: url('logo.png'); 
    background-size: 110px 110px; 
    background-repeat: no-repeat;
    background-position: center center; 
    
    transition: transform 0.3s ease; 
}

/* 4. Efekt po najechaniu myszą (opcjonalny) */
.nav-logo:hover .logo-circle {
    transform: scale(1.03); 
}

/* Stylizacja banera Cookies */
.cookie-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #2c3e50; /* Ciemny, profesjonalny kolor */
    color: #ffffff;
    padding: 15px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    display: none; /* Ukryty domyślnie, JS go pokaże */
}

.cookie-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.cookie-content a {
    color: #3498db;
    text-decoration: underline;
}

.cookie-btn {
    background: #587158; /* Zielony kolor akcji */
    color: white;
    border: none;
    padding: 10px 20px;
    margin-left: 20px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.3s;
}

.cookie-btn:hover {
    background: #6a976a;
}

/* Responsywność dla telefonów */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    .cookie-btn {
        margin: 15px 0 0 0;
        width: 100%;
    }
}