* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	overflow: hidden;
	font-family: 'Source Sans 3', sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

.layout {
	background-image: linear-gradient(
		to left top,
		#62ffff,
		#00ebff,
		#00d5ff,
		#00bdff,
		#00a3ff,
		#6599ff,
		#958df7,
		#bb7fe8,
		#dd8dd9,
		#f0a0d0,
		#f8b7ce,
		#f9cfd5
	);
	display: block;
	width: 100vw;
	height: 100vh;
	position: fixed;
}

header {
	position: fixed; /* Stała pozycja napisu */
	top: 6%;
	transform: translate(16%, -50%);
	text-align: left;
	width: 80%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header #logo {
	/* visibility: hidden; */
}

.navigation .menu {
	list-style: none;
	display: flex;
}

.navigation li {
	padding: 10px 20px;
	cursor: pointer;
	visibility: hidden;
}
.navigation li:nth-child(6) {
	visibility: visible;
}
.navigation li a {
	font-size: 1.11111rem;
	font-weight: 400;
	color: #fff;
	transition: 1s ease;
	text-decoration: none;
}
.navigation li:hover {
	opacity: 0.7;
}

.lang {
	color: #fff;
	list-style: none;
	display: flex;
}

.lang li {
	padding: 10px;
	cursor: pointer;
}
.lang li:hover {
	opacity: 0.7;
}

.container {
	position: fixed; /* Stała pozycja napisu */
	top: 50%;
	left: 40%;
	transform: translate(-35%, -50%);
	text-align: left;
	width: 80%;
}

.section {
	height: 100vh; /* Każda sekcja ma pełną wysokość okna */
	width: 100vw;
}

.top-text {
	color: #fff;
	font-size: 2.7rem;
	line-height: 3rem;
}

.bottom-text {
	font-size: 6rem;
	line-height: 6.5rem;
}

h1 {
	font-size: 3rem;
	color: white;
	opacity: 1;
	line-height: 5rem;
	transform: translateY(0);
	transition: opacity 1s ease, transform 1s ease; /* Dodanie efektu przejścia dla przezroczystości i przesunięcia */
}

.scroll-down {
	position: fixed; /* Stała pozycja napisu */
	bottom: 5%;
	left: 50%;
	transform: translate(-35%, -50%);
	text-align: left;
	width: 2%;
	transition: opacity 0.4s ease;
	svg {
		fill: #fff;
		opacity: 0.7;
	}
}
.download-app {
	display: flex;
	line-height: 60px;
}
.download-app img {
	height: auto;
	margin-right: 10px;
}
/* Ukrycie tekstu z przesunięciem do góry */
.fade-out {
	opacity: 0;
	transform: translateY(-60px); /* Przesuwamy tekst o 40px do góry */
}

/* Pojawienie się tekstu z dołu */
.fade-in {
	opacity: 1;
	transform: translateY(-60px); /* Początkowa pozycja to 40px poniżej */
}

.fade-in-active {
	transform: translateY(0); /* Końcowa pozycja to na środku, wracając z dołu */
}

.arrow {
	stroke: white;
	margin-top: 20px;
}

#logo {
	cursor: pointer;
	/* text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; */
}

/* Animacja bounce */
@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}

/* Dodanie animacji bounce do strzałki */
.bounce {
	animation: bounce 3s infinite;
}

/* Media Queries dla mniejszych urządzeń */
@media (max-width: 768px) {
	h1 {
		font-size: 2rem;
	}

	.arrow {
		width: 30px;
		height: 30px;
	}
}
@media (max-width: 1300px) {
	.navigation li {
		padding: 10px;
	}
}

@media (max-width: 1100px) {
	.navigation li a {
		font-size: 1rem;
	}
}

/* Media Queries dla mniejszych urządzeń */
@media (max-width: 768px) {
	/* Dostosowanie rozmiarów tekstu dla mniejszych ekranów */
	.top-text {
		font-size: 2rem; /* Zmniejszenie tekstu dla mobile */
		line-height: 2.5rem; /* Dopasowanie interlinii */
		margin-bottom: 20px;
	}

	.bottom-text {
		font-size: 3.2rem; /* Zmniejszenie tekstu dla mobile */
		line-height: 3.7rem; /* Dopasowanie interlinii */
	}

	h1 {
		font-size: 2rem;
		line-height: 3rem;
	}

	.arrow {
		width: 30px;
		height: 30px;
	}

	.container {
		width: 90%; /* Zwiększenie szerokości dla mobile */
		left: 50%; /* Dostosowanie położenia */
		transform: translate(-50%, -50%); /* Wyśrodkowanie na mobile */
	}

	header {
		flex-direction: column;
		top: 13%;
		width: 100%;
		transform: translate(0%, -50%);
	}

	body.en-GB header {
		top: 0;
	}

	header .menu {
		flex-wrap: wrap;
		justify-content: center;
	}
}