@charset "utf-8";
/* import fontu z google */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
/*
font-family: "Hanken Grotesk", sans-serif;
*/

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

a{
	text-decoration: none;
}

p{
	font-family: "Poppins", sans-serif;
}

/* NAWIGACJA mobile*/
.burger{
	background-color: #413930;
	border-radius: 5px;
	color: #fff;
	position: fixed;
	right: 2rem;
	top: 2rem;
	font-size: 3rem;
	padding: .5rem .65rem;
	cursor: pointer;
	z-index: 1;/*ponad trescia sekcji*/
}

.nakladka{
	background-color: #F4E9CA;
	position: fixed;
	top: 0;
	right: 0;
	width: 0;/*parametr do zmiany skryptem*/
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;/*wyzej niz burger*/
}
.nakladka ol{
	width: 100%;
	text-align: center;
}

.nakladka ol li a{
	color: #413930;
	display: block;
	padding: 3vh 0;
	font-size:32px;
	margin-bottom: 2vh;
}

.zamknijX{
	position: absolute;
	top: 1.45rem;
	right: 1.6rem;
	font-size: 3.3rem;
	padding: 0 1.05rem .65rem;
	cursor: pointer;
	font-size: 45px;
}


/* NAWIGACJA desktop*/
nav{
	position: fixed;
	background-color: #382111;
	width: 100%;
	display: none;
	justify-content: center;
	align-items: center;
}

nav ol{
	width:100%;
	margin: 0 50px;
	padding: 27px 0 13px;
	display: flex;
	justify-content: center;
	gap: 170px;
	border-bottom: 1px solid #F6F6EC;
}

nav ol li a{
	color: #F6F6EC;
	padding: 10px 1rem 10px 1rem;
	display: block;
}

/* WSZYSTKIE SEKCJE */
section{
	overflow: hidden;
}

.zawartosc{
	max-width: 1400px;
	margin:0 auto;
	width: 100%;
}

#stopka{
	display:flex;
	justify-content: center;
	align-items: center;
}

/* POSZCZEGÓLNE SEKCJE */
#pierwsza{
	min-height: 100vh;/* vh = % wys. okna przegl.*/
	background-color: #382111;
	padding: 10rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

#pierwsza .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#pierwsza h1{
	font-size: 64px;
	text-transform: uppercase;
	color: #EFEDE0;
	line-height: 110%;
	max-width: 220px;
}

#pierwsza img{
	height:450px;
	width:max-content;
	position: relative;
	animation: upDown 3s infinite alternate ease-in-out;
}

@keyframes upDown {
    0% { top: -60px; }
    100% { top: 60px; }
  }

#druga{
	background-color: #F4E9CA;
}

#druga h3{
	color:#1B1B1E;
	margin: 52px 0 30px;
	font-size:32px;
}

#druga p{
	color:#000000;
	font-size:14px;
	line-height: 170%;
	padding-right:30px;
}

#druga .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 52px 0 122px 30px;
}

#druga img{
	width:100%;
}

#trzecia{
	background-color: #ffffff;
}

#trzecia h3{
	color:#1B1B1E;
	margin: 52px 0 30px;
	font-size:32px;
	max-width:300px;
	padding-left:30px;
}

#trzecia p{
	color:#000000;
	font-size:14px;
	line-height: 170%;
	padding-left:30px;
}

#trzecia .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 30px 62px 0px;
}

#trzecia img{
	width:100%;
}

#stopka{
	background-color: #222;
	color: #fff;
	min-height: 10vh;
}

#czwarta {
	background-color: #F4E9CA;
	padding:37px 30px 8px;
}

#czwarta h3{
	margin-bottom:54px;
	font-size:32px;
	line-height:110%;
	font-weight: 500;
}

#czwarta span{
	color:#A8A18B;
	font-weight:400;
}

#czwarta .przyklady{
	display:flex;
	column-gap: 95px;
	row-gap: 40px;
	flex-wrap: wrap;
	justify-content:center;
}

#czwarta .przyklad{
	text-align: center;
	margin-bottom:45px;
	max-width:400px;
}

#czwarta .przyklad img{
	width:100%;
	border-radius: 12px;
}

#czwarta .przyklad h5{
	margin: 29px 0 17px;
	line-height: 130%;
	font-size: 20px;
	font-weight: 500;
}

#czwarta .przyklad p{
	font-size: 14px;
	line-height: 170%;
}

#piata {
	background-color: #2E3444;
}

#piata h3{
	color:#1B1B1E;
	margin: 52px 0 30px;
	font-size:32px;
	color: #859BBB;
	max-width:300px;
}

#piata p{
	color:#EAEAEA;
	font-size:14px;
	line-height: 170%;
	padding-right:30px;
}

#piata .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 52px 0 122px 30px;
}

#piata img{
	width:100%;
}

@media all and (min-width:670px){
	#pierwsza .zawartosc{
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	#pierwsza img{
		width: 70%;
		height: auto;
	}
}

/* tablet */
@media all and (min-width:1050px){
	.burger{
		display: none;
	}

	#pierwsza h1{
		max-width: 400px;
		font-size:96px;
	}

	#druga .zawartosc{
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		padding: 80px 0px;
 	}

	#druga .zawartosc h3{
		margin-top:0px;
		margin-bottom:45px;
		width:30%;
	}

	#druga .zawartosc div{
		margin-left:100px;
		width:35%;
	}

	#druga .zawartosc img{
		width:50%;
		max-width: 1100px;
	}

	#trzecia .zawartosc{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 80px 0px;
 	}

	#trzecia .zawartosc h3{
		margin-top:0px;
		margin-bottom:45px;
		max-width: 600px;
	}

	#trzecia .zawartosc div{
		margin-right:100px;
		width:35%;
	}

	#trzecia .zawartosc img{
		width:50%;
		max-width: 1100px;
	}

	#trzecia .zawartosc p{
		max-width:500px;
	}

	#czwarta .przyklady{
		display:flex;
		flex-direction: row;
	}

	#czwarta {
		padding:120px 30px;
	}

	#czwarta h3{
		font-size:64px;
		margin-bottom:96px;
	}

	#czwarta .przyklad p{
		text-align: left;
		font-size:24px;
	}

	#czwarta .przyklad h5{
		font-size:32px;
	}

	#piata .zawartosc{
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		padding: 80px 0px;
 	}

	#piata .zawartosc h3{
		margin-top:0px;
		margin-bottom:45px;
		max-width: 600px;
	}

	#piata .zawartosc div{
		margin-left:100px;
		width:35%;
	}

	#piata .zawartosc img{
		width:50%;
		max-width: 1100px;
	}

	nav{
		display: block;
	}
	
	#pierwsza article{
		flex: 1 1 300px;/*na mobile 100% szer.*/
	}

}

/* desktop */
@media all and (min-width:1440px){
	#czwarta h5{
		text-align: left;
	}

	#druga .zawartosc h3{
		font-size: 64px;
	}

	#druga .zawartosc p{
		font-size: 14px;
	}

	#trzecia .zawartosc h3{
		font-size: 64px;
	}

	#trzecia .zawartosc p{
		font-size: 14px;
	}
	
	#czwarta .zawartosc p{
		font-size: 14px;}
	

	#piata .zawartosc h3{
		font-size: 64px;
	}

	#piata .zawartosc p{
		font-size: 14px;
	}
}