/* style.css */
body {
    margin: 0;
    font-family: 'Lato', Arial, sans-serif;
    overflow-x: hidden;
}

html, body {
    width: 100%; /* Zapewnienie, że szerokość elementów jest ograniczona */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit; /* Włączenie box-sizing dla wszystkich elementów */
}


.navbar {
    display: flex;
    align-items: center;
    padding: 20px 0;
    background-color: #fff;
    border-bottom: 6px solid #007BFF;
}

.logo {
    flex: 0 0 50%; /* Logo zajmuje połowę szerokości nawigacji */
    display: flex;
    align-items: center; /* Wyrównanie w pionie */
    padding-left: 75px; /* Odstęp od lewej krawędzi */
    box-sizing: border-box; /* Padding nie wpływa na szerokość elementu */
}


.logo img {
    height: 50px; /* Rozmiar obrazka pozostaje taki sam */
    margin-right: 10px; /* Odstęp między obrazkiem a tekstem */
}

.menu {
    list-style: none;
    display: flex;
    flex: 1; /* Menu zajmuje resztę przestrzeni */
    margin: 0;
    padding: 0;
}

.menu li {
    flex: 1; /* Każdy element zajmuje równą szerokość */
    text-align: center; /* Centrowanie tekstu */
    padding: 20px 0;
}

.menu a {
    text-decoration: none;
    color: #474747;
    font-size: 17px;
    display: block;
}

.menu a:hover {
    color: #007BFF;
}

.main-content {
    position: relative; /* Ustawienie pozycji dla pseudo-elementu */
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 10px;
    color: white;
    box-sizing: border-box;
    overflow: hidden; /* Ukrywa wszystko poza granicami */
}

.main-content::before {
    content: ""; /* Pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/bg.webp'); /* Ścieżka do obrazka */
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: top center;
    filter: blur(5px); /* Efekt rozmycia */
    z-index: -1; /* Umieszcza pseudo-element za treścią */
}




.main-content .text-wrapper {
    background-color: rgba(0, 0, 0, 0.5); /* Półprzezroczyste czarne tło */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Delikatny cień */
    width: 100%; /* Zamiast 100vw */
    max-width: 100%; /* Zapewnia, że nie przekroczy szerokości rodzica */
    margin: 0 auto;
}



.main-content h1 #titleone {
    font-size: 2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Cień dla tekstu */
}

.main-content p #titltwo {
    font-size: 1.4rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Cień dla tekstu */
}

.white-box {
    background-color: white; /* Białe tło */
    width: 70%; /* Pokrycie 75% szerokości ekranu */
    margin: 20px; /* Wyśrodkowanie w poziomie */
    padding: 20px 125px; /* Wewnętrzne odstępy */
    border-radius: 10px; /* Zaokrąglone rogi */
    border: 1px solid black;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Delikatny cień dla efektu uniesienia */
    text-align: center; /* Centrowanie tekstu wewnątrz */
    color: #333; /* Kolor tekstu */
    display: flex; /* Flexbox do wsparcia dynamicznej zawartości */
    flex-direction: column; /* Ustawienie zawartości w kolumnie */
    justify-content: center; /* Centrowanie zawartości w pionie */
    align-items: center; /* Centrowanie zawartości w poziomie */
}

.white-box p {
    font-size: 16px;
    line-height: 1.4;
    text-align: justify;
}

.white-box h2 {
    color: #474747;
    font-size: 30px;
}

.icon-row {
    display: flex; /* Wyświetlanie w rzędzie */
    justify-content: space-evenly; /* Wyśrodkowanie elementów */
    gap: 20px; /* Odstępy między elementami */
    margin: 20px auto; /* Margines wokół rzędu */
    width: 80%; /* Szerokość rzędu, proporcjonalna do ekranu */
}

.icon-box {
    display: flex; /* Flexbox wewnątrz elementu */
    flex-direction: column; /* Układ w kolumnie */
    align-items: center; /* Wyśrodkowanie zawartości */
    text-align: center; /* Wyrównanie tekstu */
    padding: 10px; /* Wewnętrzny odstęp */
    background-color: #f6f6f6; /* Białe tło */
    border-radius: 8px; /* Zaokrąglone rogi */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    width: 200px; /* Szerokość pojedynczego elementu */
}

.icon-box img {
    width: 64px; /* Szerokość obrazka */
    height: 64px; /* Wysokość obrazka */
    margin-bottom: 15px; /* Odstęp poniżej obrazka */
}

.icon-box p {
    font-size: 14px; /* Czcionka tekstu */
    color: #333; /* Kolor tekstu */
    margin: 0; /* Zerowanie marginesów */
}

.image_row {
    display: flex; /* Wyświetlanie w rzędzie */
    justify-content: space-between; /* Równomierne rozmieszczenie elementów */
    gap: 150px; /* Odstęp między obrazkami */
    margin: 20px 0; /* Odstęp nad i pod rzędem */
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 40px;
    background-color: #ffffff;
    border-top: 4px solid #007BFF;
    font-family: 'Lato', Arial, sans-serif;
}

.footer-section {
    flex: 1;
    padding: 0 20px;
    text-align: left;
    color: #333;
    font-size: 14px;
}

.logo-section .footer-logo {
    margin-top: 30px;
    height: 50px;
}


.links-section h3, .contact-section h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #007BFF;
}

.links-section ul, .contact-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.links-section ul li, .contact-section p {
    margin: 15px 0;
    font-size: 14px;
}

.links-section ul li a {
    text-decoration: none;
    color: #474747;
}

.links-section ul li a:hover {
    color: #007BFF;
}

.contact-section p {
    color: #666;
}

.wide-link {
    display: inline-block; /* Pozwala na ustawienie szerokości */
    width: 125px; /* Ustawienie szerokości */
}

.download-button {
    display: inline-block;
    background-color: #ff413e; /* Niebieskie tło */
    color: white; /* Biały tekst */
    font-size: 16px; /* Rozmiar tekstu */
    padding: 15px 25px; /* Wewnętrzne odstępy */
    border: none; /* Brak obramowania */
    border-radius: 5px; /* Zaokrąglone rogi */
    text-decoration: none; /* Brak podkreślenia */
    font-weight: bold;
    cursor: pointer; /* Kursor wskazujący na kliknięcie */
    transition: background-color 0.3s ease; /* Animacja zmiany koloru */
    text-align: center;
    margin-top: 20px; /* Odstęp od góry */
}

/* Hover efekt dla przycisku */
.download-button:hover {
    background-color: #990f02; /* Ciemniejszy niebieski na hover */
}

.services-grid {
    display: flex;
    flex-wrap: wrap; /* Dzieli elementy na rzędy przy mniejszych ekranach */
    gap: 30px; /* Odstęp między polami */
    margin-top: 20px;
    margin-bottom: 20px;
}

.service-item {
    display: flex;
    align-items: center; /* Wyrównanie obrazka i tekstu w pionie */
    text-align: justify;
    background-color: #f9f9f9; /* Jasne tło */
    border: 1px solid #ddd; /* Ramka */
    border-radius: 10px; /* Zaokrąglone rogi */
    padding: 30px; /* Wewnętrzne odstępy */
    width: 100%; /* Domyślnie na całą szerokość */
    max-width: 1000px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    margin: 0 auto; 
}

.service-item img {
    width: 64px; /* Rozmiar obrazka */
    height: 64px;
}

.separator {
    width: 2px; /* Szerokość separatora */
    background-color: #474747; /* Kolor separatora */
    margin-right: 25px; /* Odstęp między separatorem a tekstem */
    margin-left: 20px;
    flex-shrink: 0;
    height: 64px; /* Dopasowanie wysokości do obrazka */
}

.service-text h3 {
    font-size: 16px;
    margin: 0 0 10px;
    color: #333;
}

.service-text p {
    font-size: 14px;
    margin: 0;
    color: #666;
    line-height: 1.5;
}

.white-box2 {
    background-color: white;
    width: 70%; /* Zachowaj szerokość kontenera */
    margin: 20px auto; /* Wyśrodkowanie białego pola */
    padding: 20px 125px; /* Wewnętrzne odstępy */
    border-radius: 10px; /* Zaokrąglone rogi */
    border: 1px solid black;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: justify; /* Ustawienie wyrównania tekstu na lewo */
    color: #333;
    display: flex;
    flex-direction: column; /* Układ elementów w kolumnie */
    align-items: flex-start; /* Wyrównanie wszystkich elementów do lewej */
}

.white-box2 p {
    font-size: 16px;
    line-height: 1.4;
    text-align: justify;
}

.service-element {
    display: flex; /* Ustaw elementy w rzędzie (obrazek + tekst) */
    align-items: center; /* Wyrównanie obrazka i tekstu w pionie */
    text-align: left; /* Tekst wyrównany do lewej */
    padding: 10px 0; /* Odstępy wewnętrzne góra/dół */
    width: 100%; /* Zajmuje całą szerokość rodzica */
}


.service-icon {
    width: 32px; /* Rozmiar ikony */
    height: 32px;
    margin-right: 15px; /* Odstęp między ikoną a tekstem */
}

.service-description {
    text-align: left; /* Tekst wyrównany do lewej */
}

.service-description h3 {
    font-size: 14px;
    margin: 0 0 5px;
    font-weight: bold;
    color: #333;
}

.service-description p {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
    color: #666;
}

.contact-box {
    display: flex;
    flex-direction: column; /* Ustaw w kolumnie na mniejszych ekranach */
    align-items: center;
    gap: 20px; /* Odstęp między mapką a tekstem kontaktowym */
}

.contact-details {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
}


.contact-details .highlight {
    color: #007BFF; /* Niebieski kolor dla wyróżnienia */
    text-decoration: none; /* Brak podkreślenia dla linków */
}

.contact-details a:hover {
    text-decoration: underline; /* Podkreślenie linku po najechaniu */
}

.map-container iframe {
    width: 100%; /* Dopasowanie szerokości do rodzica */
    max-width: 100%; /* Nie wykraczaj poza kontener */
    height: auto; /* Automatyczna wysokość proporcjonalna do szerokości */
    border: 0; /* Usuń obramowanie */
}

.map-container {
    flex: 1;
    max-width: 300px; /* Szerokość mapki */
}

.blur-text {
    display: inline-block;
    color: transparent; /* Ukrycie tekstu */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Efekt rozmycia */
    cursor: pointer; /* Zmiana kursora na "kliknięcie" */
}

.download-section h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #007BFF;
}

.blur-text:hover {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7); /* Wzmocnienie rozmycia przy najechaniu */
}

.blur-text.revealed {
    color: inherit; /* Odsłonięcie koloru tekstu */
    text-shadow: none; /* Usunięcie rozmycia */
    background-color: transparent;
    border: none;
}


@media (max-width: 868px) {

    .navbar {
        flex-direction: column; /* Menu w kolumnie */
        align-items: center; /* Wyśrodkowanie elementów w poziomie */
        padding: 10px;
    }
    
    .main-content .text-wrapper #titleone{
        font-size: 20px;
    }

    .navbar .logo {
        margin-bottom: 20px;
        padding-left: 0px;
    }

    .menu {
        flex-direction: column; /* Menu w pionie */
        align-items: center; /* Wyśrodkowanie w poziomie */
        width: 100%; /* Rozciągnięcie menu */
        padding: 0;
    }

    .white-box {
        width: 90%; /* Dopasowanie szerokości */
        padding: 15px 25px; /* Zmniejszenie odstępów */
        text-align: justify; /* Tekst wyjustowany */
    }

    .white-box2 {
        width: 90%; /* Dopasowanie szerokości */
        padding: 15px 20px; /* Zmniejszenie odstępów */
        text-align: justify; /* Tekst wyjustowany */
    }

    .menu li {
        text-align: center; /* Wyśrodkowanie tekstu */
        padding: 6px;
    }

    .footer {
        flex-direction: column; /* Układ w kolumnie */
        align-items: center; /* Wyśrodkowanie elementów w poziomie */
        text-align: center; /* Tekst wyśrodkowany */
        padding: 15px; /* Zmniejszenie paddingu */
    }

    .footer-section {
        padding: 10px 0; /* Mniejsze odstępy między sekcjami */
        text-align: left; /* Wyśrodkowanie tekstu */
    }
    
    .footer-section h3 {
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    .image_row{
        gap: 50px;
        justify-content: center;
    }

    .contact-box {
        flex-direction: column; /* Kolumnowy układ na mniejszych ekranach */
        align-items: center; /* Wyśrodkowanie tekstu */
        text-align: center; /* Wyśrodkowanie wierszy */
        gap: 15px; /* Mniejsze odstępy między kolumnami */
    }

    .map-container {
        max-width: 100%; /* Rozciągnięcie mapki na całą szerokość */
    }

    .contact-details {
        font-size: 12px; /* Zmniejszenie rozmiaru czcionki */
    }

    .menu a {
        font-size: 15px; /* Zmniejszenie czcionki w menu */
    }
}

@media (max-width: 480px) {

    .logo img {
        height: 40px; /* Rozmiar obrazka pozostaje taki sam */
    }

    .footer-section.logo-section {
        text-align: center; /* Wyśrodkowanie sekcji */
    }

    .footer-section.logo-section .footer-logo {
        height: 40px; /* Zmniejszenie rozmiaru logo */
        margin: 0 auto; /* Wyśrodkowanie */
        max-width: 100%; /* Dopasowanie szerokości do kontenera */
    }

    .white-box {
        padding: 10px; /* Jeszcze mniejsze odstępy */
        font-size: 14px; /* Zmniejszenie rozmiaru tekstu */
    }

    .icon-box img {
        width: 48px; /* Zmniejszenie rozmiaru ikony */
        height: 48px;
    }

    .menu {
        align-items: center; /* Wyśrodkowanie tekstu w nawigacji */
    }

    .menu li {
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    .image_row{
        gap: 20px;
        justify-content: center;
    }

    .image_row img {
        width: 30%;
        height: auto;
    }

    .footer {
        padding: 10px; /* Mniejsze odstępy */
    }

    .footer-section {
        font-size: 12px; /* Mniejsze czcionki w stopce */
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    .icon-row {
        flex-direction: column; /* Ustawienie w kolumnie */
        gap: 20px; /* Odstęp między elementami */
        align-items: center; /* Wyśrodkowanie elementów */
    }

    .icon-box {
        width: 80%; /* Dopasowanie szerokości do kontenera */
    }

    .white-box {
        width: 90%; /* Dopasowanie szerokości białego pudełka */
        padding: 10px; /* Zmniejszenie odstępów */
    }

    .map-container {
        width: 100%; /* Mapka zajmuje pełną szerokość kontenera */
        max-width: 100%;
    }

@media (max-width: 380px) {
    .services-grid {
        display: flex;
        flex-direction: column; /* Zmień układ na kolumnowy */
        gap: 20px; /* Dodaj odstęp między elementami */
    }

    .service-item {
        display: flex;
        flex-direction: column; /* Zmień układ na kolumnowy */
        align-items: center; /* Wyśrodkuj elementy w pionie */
        text-align: center; /* Wyśrodkuj tekst */
    }

    .service-item img {
        margin-bottom: 10px; /* Dodaj odstęp poniżej obrazu */
    }

    .separator {
        display: none; /* Ukryj separator w układzie kolumnowym */
    }

    .service-text {
        text-align: center; /* Wyśrodkuj tekst */
    }
}