/* Ograniczenie szerokości całej strony */
/*.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
} */

/* RESPONSYWNOŚĆ - zmniejszamy tekst na mniejszych ekranach */

@media (max-width: 768px) {
	.hero-text {
		position: static;
		padding: 20px;
		text-align: center;
	}
	
	.hero-text h1 {
		font-size: 2rem;
	}
}

/* Początek górnego menu  na czarnym tle*/
.top-nav {
	background-color: #000; /* wstawia czarne tło do górnego menu */
	padding: 1px 20px; /* ustawia tekst od góry 1px, od lewej strony 20px */
	/* górne menu przyklejone na górze podczas scrollowania */
	position: sticky: 
	top: 0;
	z-index: 1000;
	border-radius: 12px;
}

.top-nav ul {
	list-style: none; /* wyśrodkował tekst od góry i od dołu */
	display: flex; /* ustawił tekst obok siebie (O nas Kontakt) */
	justify-content: flex-end; /* ustawił tekst po prawej stronie ekranu */
	align-items: center;
	margin: 20; /* zmniejszył szerokość czarnego tła maksymalnie na szerokość czcionki napisów */
	padding: 0;
	gap: 30px; /* zrobił odstęp po 20px od prawej strony */
}

.top-nav a {
	color: white; /* zmienił kolor czcionki z niebieskiego na biały */
	text-decoration: none; /* usuwa podkreślenie tekstu */
	font-weight: bold; /* pogrubił tekst */
	transition: color 0.3s ease;
}

.top-nav a:hover {
	color: red; /* po najechaniu myszką na tekst zmienia kolor na czerwony */
}

/* Ikona Facebooka / Styl ikony SVG */

.fb-icon {
	transition: fill 0.3s ease;
	vertical-align: middle;
}

section {
	padding: 80px 20px; /* rozdzielił sekcje jedną od drugiej */
	margin-top: 30px   /* rozdzielił sekcje o nas i kontakt */
	border-radius: 12px;  /* zaokrąglił narożniki w sekcjach */
}

.about-section {
	background-color: #1a1a1a; /* wstawił czarne tło w sekcji o nas*/
	color: #fff;  /* zmienił kolor czcionki na biały      */
	text-align: center; /* wstawił text na środku*/
}

section h2 {
	font-size: 2rem;  /* zwiększył czcionkę O nas*/
	margin-bottom: 
}

.hero-section {
	font-family: Arial, sans-serif;
	max-width: 1200px;
	margin: 50px auto; /* przesunął tekst o 50px w prawo */
	padding: 20px;  /* przesunął tekst o 20px w dół */
	font-size: 2rem; /* zwiększa rozmiar czcionki */
	line-height: 0.5; /* zwiększenie odstępu między liniami */
	
}

.hero-content {
	display: flex; 
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.hero-text {
	flex: 1;
	min-width: 280px;
}

.hero-image {
	flex: 10;
	min-width: 280px;
}

.hero-image img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	
}

.fade-in {
	opacity: 0; /* usunięcie tekstu - nie widać go */
	animation: fadeIn 2s forwards; /*   */
}
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

.fade-in-1 {
	animation-delay: 1s;
}

.fade-in-2 {
	animation-delay: 2s;
}