/* Stylizacja body - tło, czcionka i marginesy */
body {
    font-family: Arial, sans-serif; /* Ustala czcionkę */
    margin: 0; /* Usuwa marginesy */
    padding: 0; /* Usuwa wypełnienie */
    box-sizing: border-box; /* Uwzględnia obramowania w wymiarach */
    background-size: cover; /* Dopasowuje tło do rozmiaru */
    background-image: url('tlo.jpg'); /* Ustala tło */
}

/* Nagłówek - kolory, pozycjonowanie i cienie */
header {
    color: #ffffff; /* Ustala kolor tekstu */
    text-align: left; /* Wyrównanie tekstu do lewej */
    padding: 20px 20px; /* Wewnętrzne marginesy */
    position: relative; /* Pozycjonowanie elementu */
    overflow: hidden; /* Ukrywa elementy wychodzące poza */
    background: #ffffff;  /* Tło nagłówka */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Cień pod nagłówkiem */
}

/* Kontener nagłówka - układ elementów */
.header-container {
    display: flex; /* Flexbox dla układu */
    justify-content: center; /* Wyrównanie do środka */
    align-items: center; /* Wyrównanie pionowe */
}

/* Logo - marginesy */
.logo {
    margin-right: 20px; /* Prawy margines dla logo */
}

/* Ogólne style nawigacji */
nav {
    display: flex; /* Flexbox dla nawigacji */
    align-items: center; /* Wyrównanie pionowe */
    justify-content: space-around; /* Równomierne rozmieszczenie */
    flex-wrap: wrap; /* Przejście w kolumnę, jeśli zabraknie miejsca */
}

/* Style linków w nawigacji */
nav a {
    color: #000000;
    text-decoration: none;
    padding: 10px 20px;
    margin: 5px;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
}

/* Podkreślenie w linkach */
nav a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -3px;
    left: 0;
    background-color: #525050;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

nav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
}

nav a:hover {
    color: #f72727;
}

/* Media queries dla mniejszych ekranów */
@media (max-width: 768px) {
    nav {
        flex-direction: column; /* Zmiana układu na kolumnowy */
        align-items: flex-start; /* Wyrównanie do lewej */
    }
    
    nav a {
        width: 100%; /* Linki na pełną szerokość */
        padding: 10px 0;
        text-align: left; /* Wyrównanie tekstu do lewej */
        margin: 0; /* Brak marginesów między linkami */
    }
}

/* Styl dla bardzo małych ekranów */
@media (max-width: 480px) {
    nav a {
        font-size: 0.9em; /* Zmniejszenie czcionki */
    }
}
/* Karta - stylizacja ogólna */
.card {
    background-color: #fff; /* Tło karty */
    border-radius: 10px; /* Zaokrąglenie rogów */
    overflow: hidden; /* Ukrywanie zawartości wychodzącej poza obszar */
    margin: 20px; /* Marginesy wokół karty */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animacje */
    display: inline-block; /* Wyświetlanie w linii */
    width: 250px; /* Szerokość karty */
    vertical-align: top; /* Wyrównanie do góry */
}

/* Efekt podniesienia karty po najechaniu */
.card:hover {
    transform: translateY(-10px); /* Przesunięcie w górę */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Cień po najechaniu */
}

/* Obrazek w karcie - rozmiar */
.card img {
    width: 100%; /* Szerokość obrazu */
    height: auto; /* Automatyczna wysokość */
}

/* Zawartość karty - tekst */
.card-content {
    padding: 20px; /* Wewnętrzne marginesy */
    text-align: center; /* Wyrównanie tekstu do środka */
}

/* Tytuł w karcie - stylizacja */
.card-content h2 {
    font-size: 1.5em; /* Rozmiar czcionki */
    margin: 0 0 10px; /* Marginesy */
    color: #333; /* Kolor tekstu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Cień tekstu */
}

/* Opis w karcie - stylizacja */
.card-content p {
    color: #000000; /* Kolor tekstu */
    font-size: 1em; /* Rozmiar czcionki */
    margin: 0; /* Brak marginesów */
}

/* Kontener kart - układ */
.content-container {
    display: flex; /* Flexbox dla kart */
    flex-wrap: wrap; /* Zawijanie kart */
    justify-content: center; /* Wyrównanie do środka */
    padding: 40px 20px; /* Wewnętrzne marginesy */
    background-color: #f4f4f4; /* Tło kontenera */
    margin-top: 50px; /* Odstęp od góry */
}

/* Opis pod kartami - stylizacja */
.description {
    font-size: 16px; /* Rozmiar czcionki */
    color: #555; /* Kolor tekstu */
    text-align: center; /* Wyrównanie tekstu do środka */
    margin-top: 20px; /* Odstęp od poprzednich elementów */
    font-weight: bold; /* Pogrubienie tekstu */
}

/* Efekty dla karty kontaktowej - animacja */
.contact-card:hover {
    transform: scale(1.05); /* Powiększenie karty */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Cień po najechaniu */
}

/* Stopka - stylizacja */
footer {
    background-color: #333333; /* Tło stopki */
    color: #ffffff; /* Kolor tekstu */
    text-align: center; /* Wyrównanie tekstu do środka */
    padding: 20px 0; /* Wewnętrzne marginesy */
    width: 100%; /* Szerokość stopki */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Cień nad stopką */
    display: flex; /* Flexbox */
    flex-direction: column; /* Układ pionowy */
    justify-content: center; /* Wyrównanie do środka */
    align-items: center; /* Wyrównanie do środka */
    position: fixed; /* Pozycja stała */
    bottom: 0; /* Na dole strony */
    z-index: 1000; /* Najwyższy poziom nakładania */
}