/* Resetowanie domyślnych stylów przeglądarki */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    
    /* === DODAJ TĘ LINIĘ === */
    font-family: 'Montserrat', sans-serif; /* <-- Użyj Montserrat, a jeśli się nie załaduje, dowolnej bezszeryfowej */
    
    color: white; 
    overflow: hidden; 
}

/* Kontener na tło */
.background-slider {
    position: fixed; /* Tło jest stałe, nawet przy przewijaniu */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Tło jest na spodzie */
}

/* Pojedynczy slajd (zdjęcie) w tle */
.background-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Skalowanie zdjęcia, by pokryło cały ekran */
    background-size: cover;
    /* Centrowanie zdjęcia */
    background-position: center center;
    /* Zapobiega powtarzaniu tła */
    background-repeat: no-repeat;
    
    /* Klucz do efektu FADE */
    opacity: 0; /* Domyślnie niewidoczne */
    transition: opacity 1.5s ease-in-out; /* Animacja przenikania (1.5 sekundy) */
    
    z-index: 1;
}

/* Slajd, który jest aktualnie widoczny */
.background-slider .slide.active {
    opacity: 1; /* Widoczny */
    z-index: 2; /* Na wierzchu innych slajdów */
}

/* Warstwa z treścią na wierzchu */
.content-overlay {
    position: relative; /* Używamy 'relative', by być nad tłem */
    z-index: 10; /* Zawsze na wierzchu (wyższy niż z-index slajdów) */
    width: 100%;
    height: 100%;
    
    /* Centrowanie treści w pionie i poziomie */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Półprzezroczysta czarna warstwa dla lepszej czytelności tekstu */
    background-color: rgba(0, 0, 0, 0.4);
}

/* Wewnętrzny kontener dla treści, by nie rozciągała się na całą stronę */
.content-inner {
    padding: 20px;
    max-width: 700px;
}

/* Styl dla logo */
.logo {
    max-width: 600px; /* Ustaw maksymalną szerokość logo */
    height: auto;
    margin-bottom: 25px;
}

/* Styl dla opisu */
.description {
    font-size: 1.4rem; /* <-- NOWA WIĘKSZA WARTOŚĆ */
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); 
    font-weight: 300; 
}

/* Styl dla danych kontaktowych */
.contact-info {
    font-size: 1.1rem; 
    font-weight: 700; /* <-- Ustawia czcionkę na pogrubioną (bold) */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
.contact-info p {
    margin: 8px 0; /* Mały odstęp między liniami kontaktu */
}

/* Styl dla zabezpieczonego linku e-mail */
.contact-info a {
    color: inherit; /* Dziedziczy biały kolor po rodzicu (.contact-info) */
    text-decoration: underline; /* Podkreślenie, by wciąż wyglądał jak link */
    font-weight: inherit; /* Dziedziczy grubość czcionki */
}

/* Opcjonalnie: zmiana koloru po najechaniu */
.contact-info a:hover {
    color: #ddd; /* Lekko jaśniejszy kolor przy najechaniu */
    text-decoration: none; /* Ukryj podkreślenie */
}