body,
html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.logo img {
	position: fixed;
	top: 10px;
	left: 10px;
	height: 60px; /* Dostosuj zgodnie z rzeczywistym rozmiarem logo */
	transition: opacity 0.5s ease-in-out; /* Płynna zmiana przeźroczystości */
}
.logo img.fade-out {
	opacity: 0; /* Ukrywa obrazek */
}

.logo img.fade-in {
	opacity: 1; /* Pokazuje obrazek */
}
/* Dodanie nowoczesnych czcionek i stylów dla tekstu */
body,
button,
input,
textarea {
	font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
}

p,
li,
a,
input,
textarea {
	font-weight: 400;
	line-height: 2.5cap;
}

h1 {
	font-size: 2.25rem; /* 36px */
}

h2 {
	font-size: 1.5rem; /* 24px */
}

p,
li,
a,
input,
textarea {
	font-size: 1rem; /* 16px */
}
p.review {
	display: flex;
	align-items: center; /* Wyrównanie ikony i tekstu w pionie */
	justify-content: center;
	gap: 10px; /* Dodanie odstępu między ikoną a tekstem */
	font-weight: bold; /* Dla wyróżnienia tekstu, opcjonalnie */
}
.fas {
	color: #007bff; /* Przykładowy kolor ikony, dostosuj do swojego projektu */
}
/* Styl dla głównego kontenera zawartości */
main {
	margin-top: 60px;
	padding: 0;
	max-width: 1200px; /* Maksymalna szerokość kontenera */
	width: 100%;
}

/* Stylizacja przycisku w sekcji hero */
#hero button,
#services button,
#contact button {
	font-size: 1rem;
	font-weight: 600;
	padding: 12px 36px;
	background-color: #007bff;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
	display: inline-block;
	text-decoration: none;
	text-align: center;
}

#hero button:hover,
#services button:hover,
#contact button:hover,
.mobile-cta:hover {
	background-color: #0056b3;
}

header {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 1000;
}

.mobile-cta {
	display: none; /* Domyślnie ukryty */
	padding: 5px 20px;
	text-decoration: none;
	position: fixed;
	left: 80px;
	top: 20px;
	z-index: 100;
	background-color: #007bff;
	color: #ffffff;
	border: #e1eaff 3px solid;
	border-radius: 6px;
	cursor: pointer;
}

@media (max-width: 768px) {
	.mobile-cta {
		display: none; /* Ukryty, ale będzie pokazywany przez JavaScript gdy #hero nie będzie widoczne */
	}
}

nav ul {
	list-style-type: none;
	padding: 10px 0 0 0;
	display: flex;
	justify-content: center;
	align-content: center;
}

nav ul li a {
	display: block;
	padding: 5px 20px;
	margin: 0 10px;
	color: rgb(0, 0, 0);
	text-decoration: none;
	font-weight: 600;
	background-color: #f4f4f4;
	border-radius: 20px;
}
nav ul li a:hover {
	background-color: #e7eeff;
}

#hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10vh 40px 20px 40px;

	background-image:
		radial-gradient(
			circle 20vh at left top,
			#d2d2d2 33.33%,
			transparent 33.33%
		),
		/* Czerwony pasek */
			radial-gradient(
				circle 60vh at left top,
				#e0e0e0 33.33%,
				transparent 33.33%
			),
		/* Zielony pasek */
			radial-gradient(
				circle 120vh at left top,
				#eeeeee 33.33%,
				transparent 33.33%
			); /* Niebieski pasek */
	background-position:
		0 0,
		/* Pozycja dla czerwonego paska */ 0 0,
		/* Pozycja dla zielonego paska */ 0 0; /* Pozycja dla niebieskiego paska */
	background-size:
		100% 33.33%,
		/* Rozmiar dla czerwonego paska */ 100% 66.66%,
		/* Rozmiar dla zielonego paska */ 100% 100%; /* Rozmiar dla niebieskiego paska */
	background-repeat: no-repeat; /* Nie powtarzaj tła */
}

.hero-content {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.hero-text {
	display: grid; /* Ustawia kontener na grid */
	flex: 1;
	justify-items: center;
	align-items: center;
	text-align: center;
}

.hero-text h1 {
	margin: 0 0 5px 0;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.5cap;
	letter-spacing: -0.01cap;
}

.hero-text p {
	margin: 10px 0 40px 0;
}

.hero-image img {
	border-radius: 20px;
	max-width: 100%;
	max-height: 450px;
	object-fit: cover;
}

.stars {
	display: block;
}

/* Responsywność */
@media (max-width: 768px) {
	.hero-content {
		flex-direction: column;
	}

	#hero {
		padding: 4vh 40px 0 40px;
	}

	.hero-text {
		text-align: center;
		order: 2;
	}
	.hero-text h1 {
		font-size: 2rem;
	}

	.hero-image {
		width: 100%; /* Zmniejszenie szerokości zdjęcia */
		margin-left: auto; /* Pozycjonowanie zdjęcia bardziej po prawej */
	}

	.hero-image img {
		border-radius: 20px;
	}
	.services-flex-container {
		padding: 0 20px;
		flex-direction: column;
	}
}

section {
	margin: 20px 0 40px 0;
	padding: 20px 40px;
}

button,
.cta-button {
	background-color: blue;
	color: white;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
}

/* Dodane style dla menu hamburgerowego */
.hamburger {
	display: none;
	font-size: 30px;
	user-select: none;
}

/* Ukrywanie menu i pokazywanie przycisku hamburger w widoku mobilnym */
@media (max-width: 768px) {
	nav ul {
		position: fixed;
		top: 0;
		right: 0;
		border-top-left-radius: 20px;
		width: 70%;
		height: 100vh;
		justify-content: flex-start;
		padding: 10px 0 20px 20px;
		background-color: #333;
		flex-direction: column;
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
		z-index: 1000;
	}

	nav ul li a {
		padding: 20px;
		width: 80%;
		color: #fff;
		background-color: transparent;
	}
	nav ul li a:hover {
		background-color: #000;
	}

	.hamburger {
		display: block;
		position: absolute;
		top: 15px;
		right: 15px;
		cursor: pointer;
		z-index: 1101;
	}

	/* Dodanie stylów dla aktywnego menu */
	.nav-active {
		transform: translateX(0);
	}
}

/* services */

#services {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}

.services-flex-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.mask-image {
	width: 100%;
	height: 100%; /* Dodaj wysokość, aby kontrolować obszar, w którym maska jest stosowana */
	object-fit: cover; /* Możesz dostosować, aby obraz dobrze pasował do kontenera */
	-webkit-mask-image: url('assets/idea.svg');
	mask-image: url('assets/idea.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center; /* Centrowanie maski w WebKit */
	mask-position: center; /* Centrowanie maski */
}

.service-details {
	flex-basis: 100%;
}

.service-details ul {
	margin-bottom: 2em;
	list-style-type: none;
	padding: 10px 0;
}

.service-details li {
	position: relative; /* Pozwala na pozycjonowanie pseudoelementów względem tego elementu */
	margin-bottom: 10px;
	font-weight: bold; /* Pogrubienie tekstu */
	padding-left: 20px; /* Dodaje miejsce na kropkę */
}

.service-details li::before {
	content: '•'; /* Kropka oznaczająca punkt listy */
	position: absolute;
	left: 0; /* Umieszcza kropkę na początku linii */
	top: 5px; /* Wyrównuje kropkę do górnej krawędzi tekstu */
	color: #333; /* Kolor kropki; dostosuj do swoich potrzeb */
	font-size: 20px; /* Rozmiar kropki; dostosuj do swoich potrzeb */
	line-height: 1; /* Dostosowuje wysokość linii kropki do tekstu */
}

.service-description {
	display: block;
	font-weight: normal;
	color: #666;
}

/* end services */

.gallery-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.gallery-container img {
	margin: 10px;
	width: calc(33% - 20px);
	height: auto;
}

@media (max-width: 768px) {
	.gallery-container img {
		width: calc(50% - 20px);
	}
}
#testimonials {
	background-color: #ffd700;
	border-radius: 10px;
}
.testimonial-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px; /* Odstępy między elementami */
	justify-content: center; /* Wyśrodkowanie elementów, gdy nie zajmują całej szerokości */
}

.testimonial-container div {
	flex: 1 1 200px; /* Baza dla flex itemów, z minimalną szerokością 200px */
	max-width: calc(
		25% - 20px
	); /* Maksymalna szerokość dla 4 kolumn, uwzględniając gap */
	background-color: #ffffff; /* Tło dla lepszej widoczności */
	padding: 20px; /* Odstęp wewnętrzny */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Cieniowanie dla lepszego efektu wizualnego */
	border-radius: 10px; /* Lekko zaokrąglone rogi */
}

/* Media queries dla różnych rozmiarów ekranów */
@media (max-width: 1024px) {
	/* Dla tabletów i mniejszych laptopów */
	.testimonial-container div {
		max-width: calc(50% - 20px); /* Dwa elementy na szerokość */
	}
}

@media (max-width: 768px) {
	/* Dla urządzeń mobilnych */
	.testimonial-container div {
		max-width: 100%; /* Jeden element na szerokość */
	}
}

/* Stylizacja scrollbara */
::-webkit-scrollbar {
	width: 6px; /* Zmniejszona szerokość paska przewijania */
}

::-webkit-scrollbar-track {
	background: transparent; /* Całkowicie przezroczyste tło toru paska przewijania */
}

::-webkit-scrollbar-thumb {
	background-color: darkgrey; /* Kolor kciuka paska przewijania */
	border-radius: 3px; /* Lekko zaokrąglone krawędzie kciuka */
	border: 2px solid transparent; /* Przezroczysta granica, aby utrzymać kciuk oddzielony od treści */
}

::-webkit-scrollbar-thumb:hover {
	background-color: #696969; /* Ciemniejszy kolor kciuka przy najechaniu */
}

#gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(calc(25% - 10px), 1fr));
}

/* Dla tabletów i mniejszych urządzeń, zmniejszamy liczbę kolumn do 3 */
@media (max-width: 970px) {
	#gallery {
		grid-template-columns: repeat(
			auto-fill,
			minmax(calc(33.33% - 10px), 1fr)
		);
	}
}

/* Dla telefonów, zmniejszamy liczbę kolumn do 2 */
@media (max-width: 640px) {
	#gallery {
		grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr));
	}
}

#gallery img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.2s;
}

#gallery img:hover {
	transform: scale(1.05);
}

.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.8);
	align-items: center;
	justify-content: center;
}

.modal-content {
	max-width: 100%;
	max-height: 80vh;
	margin: auto;
	display: block;
	width: auto;
	height: auto;
}

.close,
.next,
.prev {
	color: #aaa;
	position: absolute;
	top: 50%;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	transform: translateY(-50%);
}

.close {
	top: 10px;
	right: 25px;
	transform: translateY(0%);
	z-index: 1000;
}

.prev {
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 70%;
}

.next {
	right: 0;
	display: flex; /* Użyjemy flexboxa do centrowania */
	align-items: center; /* Centrowanie w pionie */
	justify-content: center; /* Centrowanie w poziomie */
	width: 80px;
	height: 70%;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* faq */
#faq {
	margin: 80px auto;
	background-color: #e9f4ff;
	border-radius: 10px;
	max-width: max-content;
}
#faq h2,
#services h2 {
	text-align: center;
}

.faq-container {
	max-width: 600px;
	margin: 0 auto; /* Centruje blok, gdy okno jest szersze niż max-width */
	padding: 20px 0;
	display: block;
}
.faq-item {
	display: block;
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 20px;
	border: #dbecff 1px solid;
}

.faq-answer {
	display: none;
	padding: 10px 20px 20px 20px;
}

.faq-question {
	cursor: pointer;
	padding: 20px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.faq-question i {
	color: #95c8ff; /* Przykładowy niebieski kolor */
}

.faq-question:hover {
	color: #0056b3;
}

/* end faq */

/* contact */

#contact {
	max-width: 500px;
	margin: 0 auto; /* Centruje blok, gdy okno jest szersze niż max-width */
	padding: 20px 0;
	display: block;
	text-align: center;
}
.copy-text {
	cursor: pointer;
	color: blue;
	text-decoration: underline;
}
/* end contact */

/* footer */

footer {
	padding: 20px 40px;
	font-size: 12px !important; /* Mniejsza wielkość czcionki */
}

.footer-container {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 20px auto;
	padding: 0;
}

.footer-column {
	flex: 1;
	gap: 40px;
	min-width: 150px;
	text-align: left;
}

.footer-column p,
.footer-column a {
	margin: 5px 5px;
}

.footer-column a {
	text-decoration: none;
	color: #007bff; /* Kolor linków */
}

@media (max-width: 768px) {
	.footer-column {
		flex-basis: 100%; /* Każda kolumna zajmuje całą szerokość na mniejszych ekranach */
		margin-bottom: 20px;
	}
}

/* end footer */