/* Kolory z palety zdjęcia */
		:root {
			--primary-blue-dark: #1A3B5C; /* Głęboki Błękit / Ciemny Granat */
			--neutral-dark-gray: #3A4750; /* Ciemnoszary / Antracyt */
            --neutral-light-gray: #E0E6EE; /* Bardzo Jasny Szary / Off-White */
            --accent-red: #D9534F; /* Czerwień / Ceglasta Czerwień */
            --accent-blue-light: #8EA4B8; /* Niebiesko-szary */
            --white: #FFFFFF;
            --text-color: #333333;
        }

        /* Ogólne style */
        body {
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--primary-blue-dark); /* Kolor tła dla całej strony */
            color: var(--text-color);
            line-height: 1.7;
            padding-top: 0px; /* Dodatkowy padding nie jest potrzebny, bo nagłówek ma pozycję absolute */
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px; /* Padding dla kontenera, żeby zawartość nie kleiła się do krawędzi */
        }

        /* Sekcja banera */
        .banner-container {
            width: 100%;
            overflow: hidden;
            position: relative; /* Zmienione na relative, ponieważ header został zmieniony z fixed na absolute */
            top: 0;
            left: 0;
            z-index: -1; /* Umieszczamy baner pod headerem, ale widoczny */
            height: auto; /* Banner skaluje się razem ze stroną zachowując proporcje, więc element nadrzędny który go zawiera musi też samoczynnie zmieniać wysokość. W przciwnym razie przy pomniejszeniu strony stworzy się puste miejsce pod grafiką bannera */
        }
		.banner-image {
            width: 100%;
            height: auto;
            max-height: 780px;
            display: block;
            object-fit: cover;
            object-position: center;
        }

        /* Nagłówek */
        header {
            background-color: rgba(0, 0, 0, 0.4); /* Półprzezroczyste czarne tło */
            color: var(--white);
            padding: 15px 20px; /* Zmniejszony padding dla niższej wysokości (ok. 1/3 poprzedniej) */
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            position: absolute; /* Nakładanie na baner, pozostaje na górze podczas przewijania */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000; /* Upewnia się, że header jest na wierzchu */
            backdrop-filter: blur(5px); /* Delikatne rozmycie tła za headerem, jeśli przeglądarka wspiera */
        }

        .logo-container {
            display: flex; /* Zmienione na flex dla ułożenia obok siebie */
            flex-direction: row; /* Elementy obok siebie */
            align-items: flex-end; /* Wyśrodkowanie pionowe */
            justify-content: flex-start; /* Wyśrodkowanie poziome */
            gap: 20px; /* Odstęp między nazwą a credo */
            max-width: 1200px; /* Upewnij się, że nie jest szerszy niż kontener */
            margin: 0 auto; /* Wyśrodkowanie kontenera logo */
        }
		.header-logo {
			height: 100px;
			}

        .company-name {
            font-size: 2.8em; /* Zmniejszony rozmiar czcionki, aby pasował do niższej wysokości */
            font-weight: 700;
            margin-bottom: 0; /* Usunięty dolny margines, bo są obok siebie */
            letter-spacing: 2px;
            color: var(--white);
            white-space: nowrap; /* Zapobiega łamaniu nazwy firmy na wiele linii */
        }

        .credo {
            font-size: 1.4em; /* Zmniejszony rozmiar czcionki */
			text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.4);
            color: var(--neutral-light-gray);
            margin-top: 0; /* Usunięty górny margines, bo są obok siebie */
            font-weight: 600;
            white-space: nowrap; /* Zapobiega łamaniu credo na wiele linii */
			text-transform: uppercase;
        }

        /* Nawigacja */
        nav {
            background-color: var(--neutral-dark-gray); /* Nadal ciemne tło dla nawigacji */
            padding: 12px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative; /* Może być relative, bo jest pod headerem */
            z-index: 999; /* Nieco niżej niż header, ale nad treścią */
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        nav ul li {
            margin: 0 20px;
        }

        nav ul li a {
            color: var(--white);
            text-decoration: none;
            font-weight: 600;
            padding: 8px 15px;
            border-radius: 4px;
            transition: background-color 0.3s ease, color 0.3s ease;
			text-transform: uppercase;
        }

        nav ul li a:hover {
            background-color: var(--accent-red);
            color: var(--white);
        }

        /* Sekcje treści */
        .section {
            background-color: var(--white);
            margin: 25px auto; /* Wyśrodkowanie sekcji w kontenerze */
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            max-width: 1160px; /* Trochę mniej niż container, aby padding zadziałał */
        }

        .section h2 {
            color: var(--primary-blue-dark);
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.5em;
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
        }

        .section h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: var(--accent-red);
            margin: 10px auto 0;
            border-radius: 2px;
        }

        /* Nowa sekcja usług - siatka */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 kolumny równej szerokości */
            gap: 25px; /* Odstęp między polami */
            max-width: 80%; /* Cała sekcja 80% szerokości strony */
            margin: 0 auto; /* Wyśrodkowanie siatki */
        }

        .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; /* Lepsze rozmieszczenie, jeśli teksty mają różną wysokość */
            padding: 25px;
            background-color: var(--neutral-light-gray);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            text-align: center;
            text-decoration: none;
            color: var(--neutral-dark-gray);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; /* Dodanie color do transition */
            min-height: 150px;
        }

        .service-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            color: var(--primary-blue-dark); /* Zmiana koloru tekstu po najechaniu */
        }

        .service-item img {
            max-width: 144px; /* Taki rozmiar jest optymalny wizualnie.  */
            width: auto; /* Pozwala skalować się swobodnie w ramach max-width */
            height: auto;
            margin-bottom: 15px;
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
            /*
            Usunąłem filter: sepia(...) dla .icon-red, ponieważ najlepiej jest
            mieć ikony w docelowym kolorze lub użyć SVG inline z currentColor.
            Jeśli Twoje SVG są w domyślnym kolorze i chcesz je zabarwić na czerwono,
            możesz potrzebować specyficznego filtra, ale to zależy od oryginalnego koloru SVG.
            Dla czarnych ikon SVG (fill="black"), możesz użyć:
            filter: invert(100%) sepia(100%) saturate(2000%) hue-rotate(340deg) brightness(80%);
            Aby zmienić je na accent-red.
            */
        }
        
        /* Stylizacja dla SVG, jeśli zdecydujesz się na inline SVG */
        .service-item svg {
            width: 90px; /* Rozmiar SVG */
            height: 90px;
            color: var(--accent-red); /* Domyślny kolor dla SVG z fill="currentColor" */
            margin-bottom: 15px;
            transition: color 0.3s ease; /* Animacja zmiany koloru SVG */
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
        }

        .service-item:hover svg {
            color: var(--primary-blue-dark); /* Kolor SVG po najechaniu */
        }


        .service-item span {
            font-size: 1.1em;
            font-weight: 600;
        }

        .call-to-action {
            display: block;
            width: fit-content;
            margin: 35px auto 0;
            padding: 18px 35px;
            background-color: var(--accent-red);
            color: var(--white);
            text-decoration: none;
            font-size: 1.3em;
            font-weight: bold;
            border-radius: 8px;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        }

        .call-to-action:hover {
            background-color: #c0403e; /* Ciemniejsza czerwień */
            transform: translateY(-2px);
        }

        /* Stopka */
        footer {
            background-color: var(--neutral-dark-gray);
            color: var(--neutral-light-gray);
            text-align: center;
            padding: 25px;
            margin-top: 50px;
            font-size: 0.9em;
        }

        /* Responsywność */
        @media (max-width: 992px) {
            body {
                padding-top: 70px; /* Dostosowanie padding-top dla mniejszych ekranów */
            }
            .company-name {
                font-size: 2.2em;
            }
            .credo {
                font-size: 1em;
            }
            .section h2 {
                font-size: 2em;
            }
            .call-to-action {
                font-size: 1.2em;
                padding: 15px 30px;
            }
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
                max-width: 85%;
            }
            .service-item img, .service-item svg { /* Zaktualizowane dla SVG */
                max-width: 70px;
                width: 70px; /* Ustawienie stałej szerokości na mniejszych ekranach */
                height: 70px;
            }
        }

        @media (max-width: 768px) {
            body {
                padding-top: 60px; /* Dostosowanie padding-top */
            }
            .company-name {
                font-size: 1.8em;
            }
            .credo {
                font-size: 0.9em;
                display: none; /* Ukryj credo na bardzo małych ekranach, jeśli miejsca mało */
            }
            .logo-container {
                gap: 10px; /* Zmniejszenie odstępu */
                flex-wrap: wrap; /* Zezwól na zawijanie, jeśli jest bardzo mało miejsca */
            }
            nav ul {
                flex-direction: column;
            }
            nav ul li {
                margin: 8px 0;
            }
            .section {
                padding: 30px;
            }
            .services-grid {
                grid-template-columns: 1fr;
                max-width: 90%;
            }
            .service-item img, .service-item svg { /* Zaktualizowane dla SVG */
                max-width: 60px;
                width: 60px;
                height: 60px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding-top: 50px; /* Dostosowanie padding-top */
            }
            .company-name {
                font-size: 1.5em;
            }
            .section {
                padding: 20px;
            }
            .section h2 {
                font-size: 1.6em;
            }
            .call-to-action {
                font-size: 1em;
                padding: 12px 25px;
            }
             .service-item img, .service-item svg { /* Zaktualizowane dla SVG */
                max-width: 50px;
                width: 50px;
                height: 50px;
            }
        }