/* Globalne stylizacje */
html,
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: white; /* Tło strony */
	background-size: cover; /* Dopasowanie obrazu do całego tła */
	background-position: center; /* Wycentrowanie obrazu */
	color: #ffffff; /* Zmieniono kolor na ciemnoszary */
	font-family: 'Montserrat', sans-serif; /* Czcionka Montserrat */
	background: linear-gradient(135deg, #2193b0, #6dd5ed);
	background-attachment: fixed; /* Sprawia, że tło jest "przyklejone" do ekranu */
}

main {
	flex-grow: 1; /* Główna treść zajmuje resztę dostępnej przestrzeni */
}

/* Stopka */
footer {
	/* background-color: #ffdab9; */
	text-align: center;
	padding: 10px;
	color: #ffffff;
	width: 100%;
	position: relative; /* Domyślna pozycja */
	bottom: 0;
	left: 0;
	flex-shrink: 0; /* Upewnia się, że stopka nie zostanie ściśnięta */
}

/* Pozostałe style */
p {
	color: #ffffff; /* Zmieniono kolor na ciemnoszary */
}

/* Efekt fadeIn */

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-in-element {
	opacity: 0;
	animation: fadeIn 2s ease-in forwards;
}

/* Pasek nawigacyjny */
.navbar {
	padding: 1rem;
	text-align: center;
}

.navbar ul {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	padding: 0;
}

/* Elementy nawigacyjne - margines i pozycjonowanie */
.navbar ul li {
	margin: 0 10px;
	display: inline-block;
	position: relative;
	z-index: 9999;
}

/* Główne linki w menu */
.navbar ul li a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 10px 15px;
	border: 2px solid white;
	border-radius: 5px;
	background: linear-gradient(135deg, #fddb92 0%, #d1a54d 100%);
	width: 140px;
	display: inline-block;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover dla głównych linków */
.navbar ul li a:hover {
	background-color: white;
	color: #ffdab9;
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}

/* Hover dla linków w dropdown */
.navbar ul .dropdown li a:hover {
	background-color: white;
	color: #ffdab9;
}

/* Dropdown - zdefiniowane odstępy i pozycjonowanie */
.navbar ul .dropdown {
	display: none;
	position: absolute;
	top: 100%; /* Ustaw dropdown dokładnie pod przyciskiem */
	left: 50%; /* Przesuń dropdown do środka kontenera */
	transform: translateX(-50%); /* Wyrównaj dropdown względem środka */
	background: linear-gradient(135deg, #2193b0, #6dd5ed);
	padding: 10px 0;
	min-width: 180px;
	z-index: 999;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

/* Dodaj styl, aby dropdown był widoczny na hover lub po aktywacji */
.navbar ul li:hover .dropdown,
.navbar ul li:focus-within .dropdown {
	display: block;
}

/* Pokaż dropdown po najechaniu */
.navbar ul li:hover .dropdown {
	display: block;
}

/* Stylizacja głównych przycisków, aby dropdowny nie nachodziły */
.navbar ul li {
	display: inline-block;
	position: relative;
	margin: 0 15px;
	z-index: 9999;
}

/* Dropdown - przyciski takie same jak w navbar */
.navbar ul .dropdown li a {
	padding: 10px 15px;
	text-align: center;
	color: white;
	background-color: lightblue;
	border: 2px solid white;
	border-radius: 5px;
	display: block;
	transition: background-color 0.3s ease;
	width: 150px;
}

/* Zmniejszenie odstępów między elementami menu na dużych ekranach */
@media (min-width: 1200px) {
	.navbar ul {
		justify-content: center;
		gap: 10px;
	}

	.navbar ul li a {
		width: 130px;
		padding: 8px 12px;
	}
	.why-us-image {
		width: 180px; /* Zwiększenie wielkości logo */
	}
}

/* Ustawienia dla średnich ekranów */
@media (max-width: 1199px) and (min-width: 768px) {
	.navbar ul {
		gap: 5px;
	}

	.navbar ul li a {
		width: 140px;
		padding: 8px 10px;
	}
}

/* Responsive - Na mniejszych ekranach */
@media (max-width: 1024px) {
	.gallery-item {
		flex-basis: calc(50% - 20px); /* Przejście na 2 kolumny */
	}

	.text-mainpage {
		font-size: 1.2rem; /* Zmniejszenie rozmiaru tekstu */
	}

	.navbar ul li a {
		padding: 10px 15px; /* Zmniejszenie paddingu w menu nawigacji */
		font-size: 0.9rem; /* Zmniejszenie rozmiaru czcionki */
	}
}

/* Ukryj menu na urządzeniach mobilnych i pokaż hamburger menu */
@media (max-width: 768px) {
	.navbar ul {
		display: none; /* Ukryj całe menu */
		flex-direction: column;
		background-color: #2193b0;
		position: absolute;
		top: 60px;
		left: 10px;
		right: 10px;
		padding: 10px 0;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 1;
		border-radius: 8px;
	}

	.navbar ul.show {
		display: flex; /* Pokaż menu po kliknięciu */
	}

	.navbar ul li {
		width: 100%;
		margin: 5px 0;
	}

	.navbar ul li a {
		padding: 10px 12px; /* Zmniejsz wysokość przycisków */
		display: block;
		text-align: center;
		width: auto; /* Ustal auto dla szerokości */
		max-width: 90%; /* Ogranicz szerokość do 90% ekranu */
		margin: 0 auto; /* Wycentruj przyciski */
		color: white;
		background: linear-gradient(135deg, #fddb92 0%, #d1a54d 100%);
		border-radius: 5px;
		font-size: 14px; /* Zmniejsz czcionkę, aby lepiej dopasować */
	}

	.dropdown {
		position: static;
		width: 100%;
		margin-top: 5px;
		display: none; /* Ukryj dropdown na starcie */
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.dropdown li {
		margin-bottom: 10px; /* Dodaj margines dla lepszej separacji */
	}

	.dropdown li a {
		padding: 8px 10px;
		font-size: 13px; /* Zmniejsz czcionkę dla elementów dropdown */
		max-width: 90%; /* Ogranicz szerokość dropdownu */
		margin: 0 auto; /* Wycentruj dropdown */
	}

	.accordion-item.active .dropdown {
		display: block;
		z-index: 1; /* Ustaw wyższy priorytet */
		position: relative;
		max-height: 500px; /* Ustaw na wystarczającą wysokość, aby zmieścić całą zawartość */
	}

	.hamburger-menu {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 30px;
		height: 30px;
		cursor: pointer;
		position: absolute;
		top: 15px;
		left: 15px;
		z-index: 10000;
	}

	.hamburger-menu span {
		display: block;
		width: 100%;
		height: 3px;
		background-color: white;
		transition: all 0.3s ease;
	}

	/* Animacja hamburger menu po kliknięciu */
	.hamburger-menu.active span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.hamburger-menu.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger-menu.active span:nth-child(3) {
		transform: rotate(-45deg) translate(5px, -5px);
	}

	.why-us {
		padding: 15px; /* Mniejszy padding na mobile */
		font-size: 18px; /* Zmniejszony rozmiar czcionki dla tekstu */
	}

	.why-us-content h2 {
		font-size: 1.6rem;
		padding: 5px;
	}

	.why-us-image {
		width: 70px; /* Jeszcze mniejszy rozmiar na bardzo małych ekranach */
		margin: 5px 0;
	}

	.why-us-content {
		flex-direction: column; /* Ustaw logo i nagłówek w pionie na mniejszych ekranach */
	}

	.why-us-image-left,
	.why-us-image-right {
		width: 80px; /* Zmniejsz logo na mniejszych ekranach */
	}

	.why-us-content h2 {
		font-size: 1.6rem; /* Zmniejsz rozmiar tekstu na mniejszych ekranach */
		margin: 10px 0; /* Usuń boczne marginesy */
	}

	.gallery {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px; /* Zmniejszone odstępy między miniaturami */
		padding: 10px;
	}

	.gallery-item {
		width: 30%; /* Stała szerokość miniatury (trzy miniatury w rzędzie) */
		height: 90px; /* Stała wysokość miniatury */
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		transition: transform 0.3s ease;
	}

	.gallery-item img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* Dopasowanie obrazka do kontenera */
		border-radius: 8px;
	}

	.gallery-item:hover {
		transform: scale(1.05);
	}

	.text-mainpage {
		font-size: 1rem;
		padding: 10px; /* Większe odstępy wewnętrzne */
		text-align: center;
	}

	.large-section {
		padding: 20px; /* Zmniejszenie paddingu sekcji */
	}

	/* Zmniejszenie paddingu i marginesów w głównych sekcjach */
	.why-us,
	.text-container-mainpage,
	.container {
		padding: 5px; /* Mniejszy padding dla sekcji */
		margin: 10px 5px;
	}

	/* Boxy - zmniejszenie rozmiaru i marginesów */
	.box {
		padding: 10px;
		margin: 5px 0;
		font-size: 14px;
	}

	.text-container-mainpage {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	/* Nagłówek w sekcji .why-us */
	.why-us h2 {
		font-size: 1.4rem;
		padding: 0;
	}

	.ztl-widget-circle {
		margin: 0 auto; /* Wyśrodkowanie samych ikon */
	}

	.ztl-widget-circle-title {
		font-size: 12px;
	}

	.text-mainpage p {
		font-size: 13px;
		line-height: 1.3;
		margin: 5px 0;
	}

	/* Nawigacja - wyrównanie i poprawki w dropdown */
	.navbar ul li {
		margin: 5px 0;
	}

	.dropdown {
		position: absolute;
		width: 100%;
		margin-top: 5px;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; /* Wyśrodkowanie w pionie, jeśli zajdzie potrzeba */
		text-align: center;
		width: 100%; /* Upewnienie się, że kontener zajmuje całą szerokość */
	}

	/* Wyśrodkowanie każdego elementu .item wewnątrz kontenera */
	.item {
		display: flex;
		flex-direction: column;
		align-items: center; /* Wyśrodkowanie wewnątrz kontenera */
		justify-content: center;
		margin: 15px 0; /* Odstęp między ikonami */
		text-align: center;
	}

	.ztl-widget-circle {
		margin: 0 auto; /* Wyśrodkowanie samych ikon */
	}

	footer {
		font-size: 12px;
		padding: 10px;
	}

	/* Ustawienia kontenera */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
	}

	/* Wyśrodkowanie elementów */
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%; /* Upewnienie się, że element zajmuje pełną szerokość kontenera */
		margin: 15px 0; /* Odstęp między ikonami */
		text-align: center;
	}

	/* Stylizacja samej ikony, aby była wyśrodkowana */
	.ztl-widget-circle {
		display: flex;
		justify-content: center; /* Wyśrodkowanie ikony w poziomie */
		align-items: center; /* Wyśrodkowanie ikony w pionie */
		width: 80px; /* Dopasuj rozmiar do potrzeb */
		height: 80px;
		margin: 0 auto; /* Wyśrodkowanie ikony */
		border-radius: 50%;
	}

	/* Stylizacja tytułu pod ikoną */
	.ztl-widget-circle-title {
		font-size: 14px;
		text-align: center;
		margin-top: 5px;
	}

	.iframe-container {
		padding: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iframe-container iframe {
		width: 100%; /* Ustaw pełną szerokość na mobilnych */
		height: 500px; /* Dopasowana wysokość na mobilnych */
		display: block;
		margin: 0;
		border: none;
	}
}

@media (max-width: 480px) {
	.gallery-item {
		flex-basis: 100%; /* Przejście na 1 kolumnę */
	}

	.navbar ul {
		flex-direction: column;
		padding: 0;
	}

	.navbar ul li {
		margin: 5px 0;
	}

	.main-text {
		font-size: 20px;
		padding: 10px;
	}

	.text-container {
		padding: 10px;
		font-size: 14px;
	}

	.box {
		padding: 10px;
		font-size: 13px;
		box-shadow: none; /* Usunięcie cieni na mniejszych ekranach */
	}

	.logo-container img {
		width: 80px; /* Zmniejsz logo dla telefonów */
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	.ztl-widget-circle {
		width: 80px;
		height: 80px;
	}

	.ztl-widget-circle img {
		max-width: 70%;
	}

	.ztl-widget-circle-title {
		font-size: 14px;
	}

	footer {
		font-size: 12px; /* Zmniejszenie czcionki w stopce */
	}
	.why-us-image {
		width: 100px; /* Jeszcze mniejsza szerokość logo */
	}

	.why-us {
		padding: 10px;
	}

	.why-us-image {
		width: 80px; /* Jeszcze mniejsze obrazki na bardzo małych ekranach */
	}

	.why-us h2 {
		font-size: 1.2rem;
	}
	iframe {
		width: 100%; /* Pełna szerokość na bardzo małych ekranach */
		height: 500px; /* Mniejsza wysokość na telefonach */
	}
}

/* Formularz kontaktowy */
form {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #333333;
	border-radius: 8px;
}

form label {
	display: block;
	margin-bottom: 8px;
	color: #ffffff;
}

form input,
form textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: none;
	border-radius: 5px;
}

form button {
	background-color: #0066b2;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

form button:hover {
	background-color: #004080;
}

.why-us {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	margin: 20px auto;
	padding: 20px;
	text-align: center;
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	background: linear-gradient(135deg, #fddb92 0%, #d1a54d 100%);
	font-weight: bold;
	font-size: 20px;
	border: 2px solid white;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efekt hover */
.why-us:hover {
	transform: scale(1.05); /* Powiększenie sekcji */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Mocniejszy cień */
	background: linear-gradient(135deg, #d1a54d 0%, #fddb92 100%); /* Zmiana gradientu na hover */
}

.why-us-content {
	display: flex;
	justify-content: space-between; /* Rozkłada logo po lewej i prawej stronie, a tekst wyśrodkowany */
	align-items: center;
	flex-wrap: wrap; /* Pozwól elementom przejść do nowej linii na mniejszych ekranach */
	gap: 10px; /* Odstęp między elementami */
	text-align: center;
}

/* Stylizacja dla logo */
.why-us-image-left,
.why-us-image-right {
	width: 100px; /* Ustalona szerokość logo, dostosuj według potrzeb */
	height: auto; /* Zachowaj proporcje */
}

/* Stylizacja dla nagłówka, aby wyróżniał się między logo */
.why-us-content h2 {
	flex: 1; /* Umożliwia nagłówkowi zajęcie pełnej szerokości między logo */
	font-size: 1.8rem; /* Dostosuj wielkość tekstu */
	margin: 0 20px; /* Dodaj marginesy wokół tekstu */
}

.container {
	display: flex;
	justify-content: center; /* Równomierne rozłożenie ikon */
	align-items: flex-start; /* Upewnia się, że wszystkie elementy zaczynają się od góry */
	margin: 50px 0;
}

.item {
	display: flex;
	flex-direction: column; /* Układa elementy w pionie */
	justify-content: center; /* Wyśrodkowuje tekst w pionie względem obrazka */
	align-items: center; /* Wyśrodkowuje tekst względem obrazka poziomo */
	margin: 0 10px;
	text-align: center;
}

.ztl-widget-circle {
	width: 100px;
	height: 100px;
	background-color: #91d18b; /* Przykład zmiany koloru */
	border-radius: 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-bottom: 10px; /* Dodaje przestrzeń pomiędzy obrazkiem a tytułem */
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Dodaj animacje */
}

.ztl-widget-circle:hover {
	transform: scale(1.2); /* Powiększenie ikony */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Cień dla większej głębi */
}

.ztl-widget-circle img {
	max-width: 80%;
	max-height: 80%;
	object-fit: cover;
}

.ztl-widget-circle-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; /* Bold */
	font-style: italic; /* Italic (kursywa) */
	color: #f28b82; /* Dopasowany kolor */
}

.ztl-widget-circle-description {
	font-size: 0.9em;
	color: #555;
	margin-top: 10px;
	line-height: 1.4;
}

.circle-1 {
	background-color: #f28b82; /* Czerwony pastelowy */
}

.circle-1-title {
	color: #f28b82; /* Dopasowanie koloru tekstu */
}

.circle-2 {
	background-color: #fbbc04; /* Żółty pastelowy */
}

.circle-2-title {
	color: #fbbc04;
}

.circle-3 {
	background-color: #34a853; /* Zielony pastelowy */
}

.circle-3-title {
	color: #34a853;
}

.circle-4 {
	background-color: #4285f4; /* Niebieski pastelowy */
}

.circle-4-title {
	color: #4285f4;
}

/* Stylizacja logo */
.logo img {
	width: 150px; /* Zmniejsz szerokość logo do 100px */
	height: auto; /* Automatycznie dostosowuje wysokość, zachowując proporcje */
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
}

.text-container-mainpage {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 40px 0;
}

.box {
	flex: 1;
	padding: 20px;
	background: linear-gradient(135deg, #fddb92 0%, #d1a54d 100%); /* Gradient w odcieniach żółtego */
	border-radius: 15px;
	border: 2px solid white; /* Białe obramowanie */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	color: white; /* Kolor tekstu zmieniony na biały */
	font-weight: bold; /* Ustawienie tekstu na bold */
	text-align: center;
	font-size: 18px; /* Możesz dostosować rozmiar tekstu */
}

.box p {
	font-size: 16px;
	line-height: 1.6;
	color: white; /* Kolor tekstu zmieniony na biały */
}

.box:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	background: linear-gradient(135deg, #fddb92 0%, #d1a54d 100%); /* Gradient w odcieniach żółtego */
}

.text-container-mainpage p {
	font-size: 18px; /* Rozmiar tekstu */
	line-height: 1.5; /* Zwiększenie odstępu między liniami */
	font-weight: bold;
}

.text-mainpage {
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	margin: 20px;
	line-height: 1.2;
	color: #ffffff; /* Kolor tekstu zmieniony na biały */
}

.main-text {
	background: linear-gradient(45deg, white, #0056b3);
	-webkit-background-clip: text;
	color: transparent;
	font-weight: bold;
	font-size: 30px;
	text-transform: uppercase;
	text-align: center;
}

/* Stylizacja dla elementów w galerii */
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px; /* Odstępy między zdjęciami */
}

.gallery-item {
	flex: 1 1 calc(25% - 10px); /* Ustal szerokość na 1/4 dostępnej przestrzeni z odstępem */
	max-width: 300px; /* Maksymalna szerokość każdej miniatury */
	max-height: 180px; /* Maksymalna wysokość miniatury */
	overflow: hidden;
	border-radius: 10px; /* Zaokrąglenie rogów */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Cień dla głębi */
}

.gallery-item img {
	width: 100%; /* Dopasowanie szerokości obrazu do kontenera */
	height: auto; /* Zachowanie proporcji obrazu */
	object-fit: cover; /* Przycięcie obrazu bez zniekształceń */
	transition: transform 0.3s ease; /* Efekt hover */
}

/* Efekt powiększenia na hover */
.gallery-item:hover img {
	transform: scale(1.05); /* Powiększenie obrazu przy najechaniu */
}

/* Dostosowanie fontów w sekcjach głównych */
.text-mainpage,
.main-text {
	text-align: center;
	font-size: 1.2rem;
	padding: 20px;
}

.large-section {
	padding: 30px; /* Zmniejszenie paddingu dla mniejszych ekranów */
}

/* Elementy, które pojawiają się podczas przewijania */
.scroll-animate {
	opacity: 0;
	transform: translateY(20px); /* Opcjonalne przesunięcie na początku */
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.active {
	opacity: 1;
	transform: translateY(0); /* Element wraca do normalnej pozycji */
}

.logo-warszawa-image-container {
	display: flex;
	justify-content: center; /* Wyśrodkowanie obrazu poziomo */
	align-items: center; /* Wyśrodkowanie pionowe, jeśli potrzeba */
	width: 100%; /* Kontener zajmuje całą szerokość rodzica */
}

.logo-warszawa-image {
	width: 250px; /* Ustal szerokość obrazu */
	height: auto;
	border-radius: 10px; /* Zaokrąglone rogi */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Delikatny cień */
}

.food-image-container {
	max-width: 100%; /* Kontener obrazu nie przekroczy szerokości rodzica */
	text-align: center; /* Wyśrodkowanie obrazu w kontenerze */
}

.food {
	width: 60%; /* Obraz dopasowuje się do szerokości kontenera */
	height: auto; /* Wysokość automatycznie dostosowuje się, aby zachować proporcje */
	border-radius: 10px; /* Opcjonalnie zaokrąglenie rogów */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Dodanie cienia */
}

.text-container {
	background-color: rgba(70, 130, 180, 0.5); /* Półprzezroczysty jasnoniebieski kolor */
	padding: 20px;
	border-radius: 10px;
	color: white;
	border: 2px solid #ffffff; /* Biała ramka */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Cień tekstu */
	text-align: center; /* Wyśrodkowanie tekstu */

	max-width: 1200px; /* Maksymalna szerokość kontenera */
	margin: 0 auto; /* Wyśrodkowanie na stronie */
}

.text-container p {
	font-size: 18px; /* Większa czcionka */
	line-height: 1.6; /* Większy odstęp między liniami */
	margin-bottom: 15px; /* Większy odstęp między akapitami */
}

.table-container {
	background-color: rgba(70, 130, 180, 0.5); /* Półprzezroczysty jasnoniebieski kolor */
	padding: 20px;
	border-radius: 10px;
	color: white; /* Biały tekst */
	border: 2px solid #ffffff; /* Biała ramka */
	max-width: 800px;
	margin: 0 auto;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Cień tekstu */
}

.table-container p {
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 20px;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	border: 1px solid #ffffff; /* Białe obramowanie */
	padding: 10px;
	text-align: left;
	vertical-align: top;
	color: white; /* Biały tekst */
}

th {
	background-color: rgba(255, 255, 255, 0.2); /* Półprzezroczysty biały dla nagłówków */
	font-weight: bold;
}

td {
	background-color: rgba(255, 255, 255, 0.1); /* Półprzezroczyste tło dla komórek */
}

td:first-child {
	width: 20%; /* Szerokość kolumny z godziną */
}

/* Stylizacja folderów */
.folders-container {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

.folder-icon {
	text-align: center;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.folder-icon:hover {
	transform: scale(1.1);
}

.folder-image {
	font-size: 50px;
	margin-bottom: 10px;
}

/* Stylizacja galerii */
.gallery-view {
	text-align: center;
}

/* Pełnoekranowy widok */
#fullscreen-view {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#fullscreen-view img {
	max-width: 90%;
	max-height: 90%;
}

#close-btn {
	position: absolute;
	top: 20px;
	right: 30px;
	color: white;
	font-size: 24px;
	cursor: pointer;
}

/* Ukrycie paska nawigacyjnego w trybie pełnoekranowym */
.fullscreen-active .navbar {
	display: none;
}

/* Stylizacja przycisku Powrót */
button {
	background: linear-gradient(135deg, #fddb92 0%, #d1a54d 100%); /* Gradient w odcieniach żółtego */
	color: white;
	padding: 10px 20px;
	font-size: 18px;
	font-weight: bold;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	margin: 20px 0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
	transform: scale(1.1); /* Powiększenie przycisku przy najechaniu */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Cień dla lepszej widoczności */
}

#prev-arrow,
#next-arrow {
	position: absolute;
	top: 50%;
	font-size: 36px;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px;
	cursor: pointer;
	user-select: none;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: background-color 0.3s;
}

#prev-arrow:hover,
#next-arrow:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

#prev-arrow {
	left: 20px;
}

#next-arrow {
	right: 20px;
}

/* Kontener dla formularza kontaktowego */
.form-container {
	margin-top: 20px;
	padding: 20px;
	background: #444;
	border-radius: 10px;
	background: linear-gradient(135deg, #fddb92 0%, #d1a54d 100%); /* Gradient w odcieniach żółtego */
	width: 100%;
	max-width: 500px; /* Maksymalna szerokość formularza */
	margin: 0 auto; /* Wypośrodkowanie kontenera */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Nagłówek kontaktowy */
.contact-header {
	text-align: center;
	color: #ffffff;
	margin-bottom: 20px;
}

.contact-header h2 {
	font-size: 24px;
	color: #ffffff;
}

.contact-header a {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.3s ease;
}

.contact-header a:hover {
	color: #cccccc;
}

/* Mapa Google */
.map-container {
	width: 100%;
	max-width: 500px; /* Maksymalna szerokość mapy */
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	margin: 0 auto; /* Wypośrodkowanie mapy */
}

/* Wyłączenie zaznaczania tekstu */
body {
	-webkit-user-select: none; /* Chrome, Safari, Opera */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Standard */
}

/* Wyłączenie przeciągania obrazów */
img {
	-webkit-user-drag: none; /* Chrome, Safari, Opera */
	user-drag: none;
}

/*tabela Wydarzenia */
.news-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

.news-table th,
.news-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}

.news-table th {
	background-color: #f2f2f2;
	font-weight: bold;
}

.menu-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

.menu-table th,
.menu-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}

.menu-table th {
	background-color: #f2f2f2;
	font-weight: bold;
}

.download-link {
	display: inline-flex; /* Aby wyświetlić ikonę i tekst w linii */
	align-items: center; /* Wyrównaj ikonę i tekst do środka */
	padding: 10px 20px;
	background-color: #3498db;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	margin-top: 10px;
	transition: background-color 0.3s ease;
}

.download-link:hover {
	background-color: #2980b9;
}

.document-icon {
	margin-right: 8px; /* Odstęp między ikoną a tekstem */
	vertical-align: middle; /* Wyrównanie ikony do środka */
	color: #fff; /* Kolor ikony */
}

/* Style dla iframe - ogólne (desktop) */
.iframe-container iframe {
	width: 90%; /* Szerokość dla desktopu */
	height: 600px; /* Wysokość dla desktopu */
	display: block; /* Zapewnia blokowy układ */
	margin: 0 auto; /* Wyśrodkowanie */
}

/* Dodatkowe style dla kontenera iframe na desktopie */
.iframe-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 10;
}
a.email-link {
	word-wrap: break-word;
	word-break: break-all;
	text-align: center;
	display: block;
	max-width: 100%;
}