/* Główna sekcja */
main {
    display: flex;
    flex-direction: column; /* Układ pionowy dla głównej sekcji */
    align-items: center; /* Wyśrodkowanie */
    gap: 40px; /* Odstęp między sekcjami */
    padding: 40px 20px;
}


/* Godziny otwarcia */
.hours-card, .contact-info {
    background: #f0f0f0; /* Tło */
    border-radius: 10px; /* Zaokrąglenie rogów */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Cień */
    padding: 30px; /* Wypełnienie */
    text-align: center; /* Wyrównanie tekstu */
    max-width: 400px; /* Maksymalna szerokość */
    width: 100%; /* Szerokość w 100% dla elastyczności */
}

/* Godziny otwarcia nagłówki */
.hours-card h3, .contact-info h2 {
    font-size: 1.5em; /* Dopasowanie rozmiaru czcionki */
    color: #333; /* Kolor tekstu */
    margin-bottom: 20px; /* Margines na dole */
}

/* Kontener dla godzin otwarcia i kontaktu */
.info-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    width: 100%;
    max-width: 1200px;
}

/* Godziny otwarcia paragrafy */
.hours-card p, .contact-item .label, .contact-item .value {
    font-size: 1.1em; /* Rozmiar czcionki */
    margin-bottom: 5px; /* Margines na dole */
}

/* Godziny otwarcia wyróżnione */
.hours-card .open-hours {
    font-weight: bold; /* Pogrubienie godzin otwarcia */
}

/* Przedmioty w sekcji informacji kontaktowych */
.contact-item {
    display: flex; /* Flexbox dla poziomego układu */
    justify-content: space-between; /* Rozmieszczenie etykiety i wartości */
    margin-bottom: 10px; /* Mniejszy margines na dole */
    width: 100%; /* Cała szerokość dostępna dla każdego elementu */
}

.contact-item .label {
    font-weight: bold; /* Pogrubienie etykiety */
    color: #333; /* Kolor etykiety */
    font-size: 1.1em; /* Dopasowanie rozmiaru czcionki dla etykiety */
    width: 35%; /* Ustalamy szerokość etykiety */
}

.contact-item .value {
    color: #555; /* Kolor wartości */
    font-size: 1.1em; /* Dopasowanie rozmiaru czcionki dla wartości */
    width: 60%; /* Szerokość wartości */
}

.map {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin-top: -15px; /* Podnosi mapę bliżej sekcji powyżej */
}
/* Stylizacja nagłówka mapy */
.map h2 {
    font-size: 2em; /* Rozmiar czcionki */
    margin-bottom: 20px; /* Dolny margines */
    color: white; /* Kolor tekstu - biały */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), -2px -2px 4px rgba(0, 0, 0, 0.7); /* Cień */
}
/* Stylizacja iframe mapy */
.map iframe {
    border: 0; /* Usunięcie obramowania */
    border-radius: 10px; /* Zaokrąglenie rogów */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Cień wokół mapy */
}
/* Media queries dla mniejszych ekranów */
@media (max-width: 768px) {
    /* Mniejszy padding i zmiana układu kontaktów */
    .hours-card, .contact-info {
        padding: 30px;
    }

    /* Kolumnowy układ dla kontaktów */
    .contact-item {
        flex-direction: column;
        align-items: flex-start; /* Wyrównanie do lewej */
    }

    .contact-item .label, .contact-item .value {
        width: 100%; /* Pełna szerokość */
        text-align: left; /* Tekst wyrównany do lewej */
        margin-bottom: 5px; /* Dodatkowy odstęp */
    }
}

@media (max-width: 480px) {
    /* Jeszcze mniejszy padding i czcionki */
    .hours-card, .contact-info {
        padding: 20px;
    }

    .hours-card h3, .contact-info h2 {
        font-size: 1.3em;
    }

    .hours-card p, .contact-item .label, .contact-item .value {
        font-size: 1em; /* Mniejszy tekst */
    }
}

/* Stopka */
footer {
    background-color: #333; /* Kolor tła stopki */
    color: #fff; /* Kolor tekstu */
    text-align: center; /* Wyrównanie tekstu do środka */
    padding: 20px 0; /* Padding na górze i na dole */
    width: 100%; /* Szerokość na 100% */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Cień na górnej krawędzi */
    display: flex; /* Flexbox dla stopki */
    justify-content: center; /* Wyśrodkowanie zawartości */
    align-items: center; /* Wyśrodkowanie w pionie */
    position: fixed; /* Ustawienie stopki na stałe na dole */
    bottom: 0; /* Ustawienie na dole strony */
    z-index: 1000; /* Wyższy z-index */
}