@charset "utf-8";
/* import fontu z googla */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

/*
font-family: "Poppins", sans-serif;
font-family: "Dela Gothic One", sans-serif;
*/

/*SELEKTORY GLOBALNE*/
*{
	transition: 400ms;
	box-sizing: border-box;/* żeby paddingi nie zwiększały szer. boxu- kontrola nad responsywnością*/
}
html{
	font-family: "Poppins", sans-serif;
	font-size: 16px; /*domyślnie*/
	font-size: 10px; /*1rem=10px*/
	scroll-behavior: smooth;
}
body{
	font-size: 1.6rem;/*przywrócenie podstawowej wielkosći 16px za pomocą rem*/
}

/*wszytskie hiperłącza*/
a{
	text-decoration: none; /*brak podkreślonych łącz*/
}

/*wszytskie obrazki*/
img{
	max-width: 100%
}

/*WSZYTSKIE AKAPITY*/
p{
	line-height: 140%;
}

/***********************/
/* NAWIGACJA mobile*/
.burger{
	background-color: #1D44CB;
	color: #EEECE0;
	position: fixed;
	top: 2rem;
	right: 2rem;
	font-size: 3rem;
	padding: 0.5rem 0.65rem; /*aby uzyskać rozmiar 40x40*/
	display: none;
	cursor: pointer;
	z-index: 1;/*zmiana kolejnosći wartst/ z=głębia*/
}
.burger:hover{
	background-color: #EEECE0;
	color: #1D44CB;
}
.nakladka{
	background-color: rgba(29,68,203,.9);
	position: fixed;
	top: 0;/*żeby zwijał się do górnej krawędzi*/
	right: 0;/*żeby zwijała się do prawej krawędzi*/
	height: 100%;
	width: 0; /*ten parametr będzie zmieniany za pomocą funkcji w JavaScript*/
	overflow: hidden;/*żeby nie wystawała zawartość jak szer./wys/ równa 0 */
	z-index: 2; /*kolejność-ponad burgerem*/
	display: flex;
	justify-content: center;
	align-items: center;
/*	opacity: .9; żeby widzieć ikonę burger*/
}
.nakladka ol{
/*	background-color: red;*/
	width: 80%;
	text-align: center;
	
}
.nakladka ol li{}
.nakladka ol li a{
	color: #EEECE0;
/*	background-color: yellow;*/
	padding: 1.2rem;
	display: block; /*by wpływały na otoczenie rozmiarem*/
	margin-bottom: 3vh;
}
.nakladka ol li a:hover{
	background-color: #EEECE0;
	color: #1D44CB;
}

.zamknijX{
	background-color: #EEECE0;
	position: absolute; /*pozycja względem kontenera nadrz. "nakładka" */
	top: 2rem;
	right: 2rem;
	font-size: 3.5rem;
	padding: 0 1.22rem .5rem; /*aby uzyskać rozmiar 40x40*/
	cursor: pointer;
}
.zamknijX:hover{
	background: none;
	color: #EEECE0;
}

/* NAWIGACJA desktop*/
nav{
	background-color: #1D44CB;
	position: fixed; 
	width: 100%; /*przywracamy szerokośc domyślna, przez fixed się posuła*/
	display: flex;
	justify-content: center;
}
nav ol{
/*	background-color: greenyellow;*/
	max-width: 1400px;
	display: flex;
	justify-content: space-evenly;/*odstępy miedzy słowami w nav*/
	font-weight: 500;
}
nav ol li{}
nav ol li a{
/*	background-color: aqua;*/
	padding: 2rem 2vw;
	display: block;
	color: #EEECE0;
}
nav ol li a:hover{
	background-color: #EEECE0;
	color: #1D44CB;
}

/**********************/
/* WSZYSTKIE SEKCJE*/
section{
	min-height: 80vh;
	padding: 5vh 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.zawartosc{
/*	background-color: red;*/
	max-width: 1400px;/* nie widać przez flex*/
	width: 100%;
	display: flex;
	gap: 2rem;
}

/* POSZCZEGÓLNE SEKCJE*/
#pierwsza{
	background: url("../img/HOME_DESIGN.png");
	background-color: #EEECE0;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	width: 100%;
	min-height: 725px;
	height: 100vh;
}
#pierwsza .zawartosc{
	/*FLEX CONTAINER*/
	display: flex;
	flex-wrap: wrap;/*ścisle połączone z flex-basis podane dla flex itrm*/
	flex-direction: column;
	align-content: center;
	/*justify-content: flex-start;*/	
}
#pierwsza .zawartosc h1{
	color: #1D44CB;
	font-family: Dela Gothic One;
	/*padding: 0  0rem 10rem 3rem;*/
	/*padding: 2rem;*/
	margin-right: 25vw;
	line-height: 85%;
	font-size: clamp(9rem, 10vw, 21.4rem);
	padding-left: 3rem;
	padding-bottom: 9rem;
}

#druga{
	background-color: #FFE981;
	display: flex;
	padding: 4rem 3rem 0rem 3rem;
}
#druga .zawartosc{
	/*background-color: purple;*/
	display: flex; 
	flex-wrap: wrap;
	flex-direction: column;
	/*align-items: center;*/
	justify-content: flex-start;
	max-width: 1000px;
	width: 100%;
	/*padding: 0rem 3rem 0rem 3rem;
	padding-bottom: 0rem;
	margin-top: 2.5rem;*/
	padding: 2rem 3rem 2rem 3rem;
}
#druga .produkty{
	/*background-color: darkgrey;*/
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/*gap: 3rem;*/
}
#druga .zawartosc h2{
	/*background-color: aqua;*/
	color: #1D44CB;
	font-family: Dela Gothic One;
	font-size: clamp(7rem, 10vw, 10rem);
}
#druga .zawartosc img{
	/*background-color: coral;*/
	width: 450px;
	height:450px;
	flex-shrink: 0;
	object-fit: cover; /* Przycina i skaluje obrazek, zachowując proporcje */
    object-position: center; /* Ustawia środek obrazu */
    display: block; /* Usuwa dodatkowe marginesy wokół img */
	margin-top: 2rem;
}

#trzecia{
	background-color: #FFE981;
	display: flex;
	padding: 4rem 3rem 0rem 3rem;
}
#trzecia .zawartosc{
	/*background-color: purple;*/
	display: flex; 
	flex-wrap: wrap;
	/*flex-direction: column;*/
	align-items: flex-start;
	/*justify-content: center;*/
	max-width: 1000px;
	width: 100%;
	/*padding: 3rem;
	padding-top: 5.5rem;
	padding-bottom: 5rem;*/
	padding: 2rem 3rem 5rem 3rem;
}
#trzecia .zawartosc h2{
	/*background-color: aqua;*/
	color: #1D44CB;
	font-family: Dela Gothic One;
	font-size: clamp(7rem, 10vw, 10rem);
}
#trzecia .krokiprzepis{
	/*background-color: darkgrey;*/
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 0.rem;
	margin-top: 4rem;
	margin-bottom: 1rem;
}
#trzecia .zawartosc p span{
	color: #1D44CB;
	font-family: Dela Gothic One;
	font-size: 4rem;
	padding-right: 0.3rem;
}
#trzecia .zawartosc p{
	color: #1D44CB;
	font-weight: 300;
	font-size: 2.1rem;
}
#trzecia .foto{
	/*background-color: chartreuse;*/
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 0.8rem;
}
#trzecia .foto img{
	/*background-color: coral;*/
	height:280px;
	width: 50%vw;
	flex-shrink: 0;
	object-fit: cover; /* Przycina i skaluje obrazek, zachowując proporcje */
    object-position: center; /* Ustawia środek obrazu */
    display: block; /* Usuwa dodatkowe marginesy wokół img */
	/*display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;*/
}

#proba{
	background-color: #1D44CB;
	display: flex;
	padding: 4rem 3rem 0rem 3rem;
}
#proba .zawartosc{
	/*background-color: red;*/
	display: flex; 
	flex-wrap: wrap;
	flex-direction: column;
	/*align-items: center;*/
	justify-content: flex-start;
	max-width: 1000px;
	width: 100%;
	padding: 2rem 3rem 7rem 3rem;
	/*padding-bottom: 7rem;
	padding-top: 5.5rem;*/
}
#proba .zawartosc h2{
	/*background-color: aqua;*/
	color: #EEECE0 ;
	font-family: Dela Gothic One;
	font-size: clamp(7rem, 10vw, 10rem);
}
#proba .zawartosc img{
	/*background-color: coral;*/
	width:250px;
	height:250px;
	flex-shrink: 1;
	object-fit: cover; /* Przycina i skaluje obrazek, zachowując proporcje */
    object-position: center; /* Ustawia środek obrazu */
    display: block; /* Usuwa dodatkowe marginesy wokół img */
	/*margin-top: 2rem;*/
	padding: 0rem;
	
}
#proba .makaronysek{
	/*background-color: cadetblue;*/
	/*background-color: darkgrey;*/
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 2rem;
	padding-bottom: 0rem;
	padding-top: 4rem;
}
#proba article{
	/*background-color: darkviolet;*/
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0rem;
	/*justify-content: center;*/
	flex: 0 0 250px;/*nie dopuszczamy rośniecia, nie dopuszczamy kurczenia się, szer. bazowa 250px*/
}
#proba article p{
	color: #EEECE0;
	font-family: Dela Gothic One;
	font-size: 2.8rem;
	text-transform: uppercase;
}
/* width */
#proba .makaronysek::-webkit-scrollbar {
  width: 0px;
}

/* Track */
#proba .makaronysek::-webkit-scrollbar-track {
  background: #f1f1f1;
	margin: 35vw;
	border-radius: 20px;
	background-color: #EEECE0;
}

/* Handle */
#proba .makaronysek::-webkit-scrollbar-thumb {
  background: #888;
	background-color: #D6B316;
	border-radius: 20px;
}

/* Handle on hover */
#proba .makaronysek::-webkit-scrollbar-thumb:hover {
  background: #555;
  background-color: #FFE981;
}

/*#stopka{
	background-color: #222;
	color: #fff;
	min-height: 10vh;
}*/

#stopka{
	min-height: 10vh;
	padding: 4rem 3rem 2rem 3rem;
	background: url("../img/gif makaron na widelcu6.gif");
	color: #EEECE0;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	width: 100%;
}
#stopka .zawartosc{
	display: flex;
	flex-direction: column;
	text-align: center;
	max-width: 1400px;/* nie widać przez flex*/
	width: 100%;
	/*background: url("../img/gif makaron na widelcu.gif");*/
}
#stopka h2 {
	text-align: center;
	/*background-color: aqua;*/
	color: #1D44CB;
	font-family: Dela Gothic One;
	font-size: clamp(7rem, 10vw, 10rem);
}
#stopka h3 {
	text-align: center;
	color: #1D44CB;
	font-weight: 300;
	font-size: 3rem;
	margin-bottom: 3rem;
	margin-top:2.1rem;
}
#stopka form {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
 	align-items: center;
}
#stopka .input-form {
	background-color: #FFE981;
	/*width: 30vw;*/
	/*width: 100%;*/
 	padding: 1.5rem;
 	margin-bottom: 3rem;
 	text-align: center;
 	outline: none;
	border: 0px;
	font-family: Poppins;
	font-weight: 300;
	font-size: 2.2rem; 
	color: #1D44CB;
      /*font-size: clamp(2rem, 2vw, 2.2rem);*/
	max-width: 600px;
}

#stopka .footer-botton {
	background-color: #1D44CB;
	/*width: 10vw;*/
	max-width: 600px;
 	padding: 1.5rem;
 	margin-bottom: rem;
 	text-align: center;
 	outline: none;
	border: 0px;
	font-family: Poppins;
	font-weight: 300;
	font-size: 2.2rem; 
	color: #EEECE0;
	transition: background-color 0.5s ease, color 0.5s ease;
}
#stopka .footer-botton:hover {
	background-color: #D6B316;
}
#stopka .icons-media {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	margin-top: 3rem;
	margin-bottom: 3rem
}
#stopka .icons-media .icons {
	color: #1D44CB;
	font-size: 4rem;
	margin:2rem;
	text-decoration: none;
	transition: all 0.35s;
}
#stopka .icons:hover,
.icons:focus {
	color: #D6B316;
	filter: none;
	transform: scale(1.2, 1.2);
 	transition: all 0.35s;
}

#stopka .copy{
	color: #1D44CB;
}
/******************************/
/**************RWD*************/
@media all and (max-width:600px){
	.burger{
		display: block;
	}
	nav{
		display: none; /*Nawigacja desktopowa znika*/
	}
	section{
		min-height: 100vh;
	}
	#pierwsza{
	/*	min-height: 40vh;*/
		flex: 1 1 300px;
		/*height: 100vh*/;
		min-height: 600px;
	}
	#druga{
		padding: 5vh 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	#trzecia{
		padding: 0vh 0 0 0;
		
	}
	#trzecia .zawartosc{
		padding: 0rem 3rem 3rem 3rem;
	}
	#trzecia .krokiprzepis{
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 1rem;
	}
	#trzecia .krokiprzepis{
		margin-bottom: -1rem;
	}
	#proba{
		padding: 5vh 0;
		padding-top: 0;
	}
	#proba .makaronysek{
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow: scroll;
		padding-left: 2rem;
		padding-bottom: 4rem;
		display: flex;
		flex-direction: row;
	}
	#proba .zawartosc{
		flex-wrap: nowrap;
		justify-content: flex-start;
		/*overflow: scroll;*/
	/*	padding-left: 3rem;
		padding-bottom: 4rem;*/
		padding: 0vh 5vh ;
	}
	#proba article{
		flex: 0 0 250px;
	}
	#proba .zawartosc h2{
	/*background-color: aqua;*/
	color: #EEECE0 ;
	font-family: Dela Gothic One;
	font-size: clamp(5.5rem, 10vw, 10rem);
}
	#stopka{
		padding: 5vh 0;
		
	}

}/*koniec stylów do 0px szerokości 600px*/

