@charset "utf-8";
/* import fontu z google */
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=Caveat:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
/*font-family: "Hanken Grotesk", sans-serif;
*/

/* SELEKTORY GLOBALNE */
*{
	transition: 1s;
	box-sizing: border-box; /*żeby paddingi nie zwiększały szerokości boxów*/
}
html{
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 10px;/* 1rem = 10px */
	scroll-behavior: smooth;
}
body{
	font-size: 1.6rem;
}

a{
	text-decoration: none;
}

img{
	max-width: 100%;
}

p{
	line-height: 140%;
}

/* Nawigacja mobile*/
.burger{
	background: #FFFFFF;
	color: black;
	position: fixed;
	right: 2rem;
	top: 2rem;
	font-size: 3rem;
	padding: .5rem .65rem;
	cursor: pointer;
	z-index: 1; /*ponad sekcją treści*/
	display: none;
}
.burger:hover{
	background-color: #eee;
	color: #000;
}
.nakladka{
	background-color: #111;
	position: fixed;
	top: 0;
	right: 0;
	width: 0%; /*parametrs do zmiany skrypta*/
	height: 100%;
	overflow: hidden; /*ukrywa to co wystaje poza box*/
	display: flex;
	justify-content: center;
	align-items:center;
	z-index: 2; /*wyżej niż burger*/
	opacity: .9; /*zmniejsza widoczność boksu i zawartości*/
}
.nakladka ol{
	/*background-color: red;*/
	width: 100%;
	text-align: center;
}
.nakladka ol li{}
.nakladka ol li a{
/*	background-color: yellow;*/
	display: block;
	padding: 3vh 0;
	margin-bottom: 2vh;
	text-transform: uppercase;
	color: white;
}
.nakladka ol li a:hover{
	background-color: #eee;
	color: #111;
}

.zamknijX{
	background-color: #eee;
	position: absolute; /*pozycja względem boksu nadrzędnego*/
	top: 2rem;
	right: 2rem;
	font-size: 3.3rem;
	padding: 0 1.05rem .65rem;
	cursor: pointer;
}
.zamknijX:hover{
	background-color: #222;
	color: #eee;
}


/* NAWIGACJA descope*/
nav{
	background-color: #FFFFFF;
	background-size: 130%;
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
nav ol{
	display: flex;
	gap: 1vw;
}
nav ol li{}
nav ol li a{
	color: #fff;
	background-color: black;
	padding: 1rem 2vw;
	display: block;/*żeby hiperłącza rozciągały box w którym się znajdują*/
}
nav ol li a:hover{
	background-color: #eee;
	color: #222;
}

/* WSZYSTKIE SEKCJE */
section{
	min-height: 90vh;/* vh = % wys. okna przegl.*/
	padding: 10rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zawartosc{
	/*background-color: red;*/
	max-width: 1400px;
	width: 100%;
}

/* POSZCZEGÓLNE SEKCJE */
#pierwsza{
	/*background-color: brown;*/
}
#pierwsza .zawartosc{
	max-width: 1420px;
    margin: 0 auto;
}
#pierwsza article{
	display: flex;
	flex-direction: row; /* Układ w wierszu */
    align-items: flex-start; /* Wyrównanie pionowe */
	/*flex-wrap: wrap;/*ściśle powiązane z "flex:" dla items*/
	justify-content: center;
	gap: 2rem;
	/*background-color: red;*/
}
#pierwsza article img{
	max-width: 40vw;  /*Ustawienie maksymalnej szerokości obrazu */
    height: auto;
	margin: 5rem 4rem;
	object-fit: cover;
	
}
#pierwsza article h1{
	font-family: "Caesar Dressing", system-ui;
	color: #B0F0BC;
	font-size: 10vw;
	font-weight: 800;
	margin: 3rem 0;
	scale: auto;
}

#pierwsza article h2 {
    display: flex;
    flex-direction: column; /* Układ w kolumnie */
    /*align-items: center;  Wyśrodkowanie liter */
    font-family: "Caesar Dressing", system-ui;
    font-size: 8vw; /* Dostosowanie wielkości */
    font-weight: 800;
    margin: 4rem 0;
    gap: 0.5rem; /* Odstępy między literami */
}
#pierwsza img:hover {
	transform: scale(1.1);
}


#druga{
	background-color: #fff;
}
#druga .zawartosc {
    display: block;
    max-width: 1420px;
    margin: 0 auto;
	}

		/* Styl boksów */
		.boks {
			display: flex; 
			flex-wrap: wrap;
			margin-bottom: 30px;
			/*background-color: aquamarine;*/
			}

/* Styl obrazka w boksie */
.boks-obrazek {
	flex: 1 1 300px;
	padding: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	}

		.boks-obrazek img {
			/*width: 100%;
			height: 100%;*/
			object-fit: cover;
			}

/* Styl tekstu w boksie */
.boks-tekst {
	flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    padding: 20px; 
    flex-grow: 1;
	gap: 2rem;
	/*background-color: pink;*/
	}

		.boks-tekst h2 {
			font-size: 4rem;
			font-family: "Caesar Dressing", system-ui;
			color: #B0F0BC;			
			margin-bottom: 10px;
			/*background-color: yellow;*/
			}

.boks-tekst p {
    /* background-color: aqua;*/
	max-width: 650px;
	font-size: 18px;
    line-height: 1.6;
	font-family: "Quicksand";
	/*background-color: orange;*/
	}
#druga h2:hover {
	transform: scale(1.1);
}

#trzecia{
	/*background-color: red;*/
}
#trzecia .zawartosc{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

#czwarta{
	background-color: #fff;
	display: block;
	align-items: center;
	
}
#czwarta .zawartosc{
	display:flex;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
	margin: auto;
	/*background-color: yellow;*/
}

#czwarta img{
	max-width: 25vw;
	/*max-height: 20rem;*/
	transform: scale(auto);
}

#czwarta article{
	flex: 0 1 250px;
	text-align: center;
	/*background-color: pink;*/
}

#czwarta h1{
	font-family: "Caesar Dressing", system-ui;
	color: #B0F0BC;
	font-size: 7rem;
	font-weight: 800;
	margin: 2rem 0 6rem;
	text-align: center;
	/*background-color: orange;*/
}

#czwarta h2{
	font-size: 3rem;
	font-weight: 500;
	margin: 1rem 0;
	/*background-color: blue;*/
	font-family: "Quicksand";
}
#czwarta img:hover {
	transform: scale(1.1);
}

#piata{
	background: #fff;
}

#piata article{
	display: flex;
	flex-direction: row; /* Układ w wierszu */
    align-items: center; /* Wyrównanie pionowe */
	/*flex-wrap: wrap;/*ściśle powiązane z "flex:" dla items*/
	justify-content: center;
	gap: 2rem;
	font-family: "Quicksand";
	/*background: purple;*/
}
#piata p{
	/*background: green;*/
	align-items: center;
	padding: 4rem;
}
#piata img{
max-width: 40vw;  /*Ustawienie maksymalnej szerokości obrazu */
    height: auto;
}

#stopka {
	/*max-height: 800px;*/
	padding: 100px 0;
	background-color: #000;
	display: block;
	flex-direction: row;
	justify-content: center;
	gap: 30px;
	text-align: center;
}
#stopka .zawartosc{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: auto;
}
#stopka .footer-box {
	flex: center;
	justify-content: center;
	padding-top: 30px;
	display: block;
	/*background-color: #333333;*/
	width: 250px;
	height: 250px;
	/*background-color: black;*/
} 

	#stopka .footer-box {
		margin: auto;
	}

#stopka .footer-box h2 {
	text-transform: uppercase;
	font-family: "Quicksand";
	margin-bottom: 24px;
	font-size: 18px;
	color: #fff;
	/*background-color: brown;*/
}
#stopka .okej {
	margin: 20rem;
	color: #fff;
	/*background-color: chartreuse;*/
}

#stopka .footer-box p {
	margin-bottom: 24px;
	color: #FFFFFF;
	font-family: "Quicksand";
	/*background-color: purple;*/
}
.footer-box p:hover {
	transform: scale(1.5);
}

.newsletter-input {
    width: 100%;
    max-width: 300px;
    padding: 10px 15px;
    margin: 10px 0;
    border: 2px solid #ccc;
    border-radius: 20px;
    font-size: 16px;
    font-family: "Quicksand";
	/*background-color: aquamarine;*/
}


.newsletter-button {
    padding: 10px 20px;
    background-color: #fff; 
    color: #000;
    border-radius: 20px;
    font-size: 16px;
    font-family: "Quicksand";
	/*background: red;*/
}

.newsletter-button:hover {
    background-color: #B0F0BC;
    transform: scale(1.15);
}



/*************************************/
/***************R*W*D*****************/
/* od największej szer. do najmniejszej szer.*/
@media all and (max-width:600px){
	.burger{
		display: block;
	}
	
	nav{
		display: none;
	}
	
	/*section{
		min-height: 100vh;
	}
	
	#pierwsza article{
		flex: 1 1 300px;/*na mobile 100% szer.
	}

	#druga{
		padding: 0;
	}
	#druga .zawartosc{
		gap: 6rem;
		padding: 4rem;
		flex-wrap: nowrap;
		overflow: scroll;
		justify-content: flex-start;
	}
	#druga article{
		flex: 0 0 250px;
	}*/
	#pierwsza article {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	#pierwsza article h1 {
		font-size: 10rem;
	}

	#pierwsza article h2 {
		font-size: 8rem;
	}

	#pierwsza article img {
		width: 90%;
		margin: 2rem 0;
	}

	/* Boksy – układ pionowy */
	.boks {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.boks-obrazek, .boks-tekst {
		width: 100%;
		padding: 1rem;
	}

	.boks-obrazek img {
		width: 80%;
	}

	.boks-tekst p {
		font-size: 1.5rem;
		padding: 0 1rem;
	}

	
	#czwarta{
		padding: 0;
	}
	#czwarta .zawartosc{
		gap: 6rem;
		padding: 4rem;
		flex-wrap: nowrap;
		overflow: scroll;
		justify-content: flex-start;
	}
	#czwarta article{
		flex: 0 0 250px;
		width: 90%;
	}
	

	#czwarta img {
		width: 100%;
		max-width: 350px;
	}

	#czwarta h1 {
		font-size: 4rem;
	}

	#czwarta h2 {
		font-size: 2.5rem;
	}

	/* #piata */
	#piata article {
		flex-direction: column;
		text-align: center;
	}

	#piata article img {
		width: 90%;
	}

	/* Stopka */
	floter .zawartosc {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-box {
		width: 100%;
		margin-bottom: 2rem;
	}

	.newsletter-input, .newsletter-button {
		width: 100%;
		margin-top: 1rem;
	}
}
/*KONIEC SZER. 600px*/
/**K*O*N*I*E*C*****R*W*D**************/