/* Wyśrodkowanie całej strony */
body {
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center;
}

/* Główny kontener ze zdjęciem – ustawiony na środku */
.hero {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 20px auto; /* "auto" po bokach idealnie centruje blok na ekranie */
}

/* Obrazek tła */
.hero-bg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Napisy nałożone bezpośrednio na środek zdjęcia */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Matematycznie centruje tekst na środku obrazka */
    background: rgba(0, 0, 0, 0.6); /* Półprzezroczyste ciemne tło, żeby napisy były czytelne */
    padding: 20px;
    border-radius: 8px;
    color: white;
    width: 80%;
}

.hero-content h1 { 
    font-size: 22px; 
    margin: 0 0 10px 0; 
}

.hero-content p { 
    font-size: 14px; 
    margin: 5px 0; 
}