@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');


@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/*
font-family: "Hanken Grotesk", sans-serif;
*/


/* Różne grubości (wymaga załadowania odpowiednich wariantów fontu) 
font-family: "Montserrat Alternates", sans-serif;
font-weight: 100; /* Thin 
font-weight: 200; /* Extra Light 
font-weight: 300; /* Light 
font-weight: 400; /* Regular 
font-weight: 500; /* Medium 
font-weight: 600; /* Semi-Bold 
font-weight: 700; /* Bold 
font-weight: 800; /* Extra-Bold 
font-weight: 900; /* Black 

/* SELEKTORY GLOBALNE */
*{
	transition: 1s;
	box-sizing: border-box;/*żeby paddingi nie zwiększały szer. boxu - kontrola nad responsywnością*/
}
html{
	font-family: "Urbanist", regular;
	font-size: 16px;/*domyślnie*/
	font-size: 10px;/*1rem=10px*/
	scroll-behavior: smooth;
}
body{
	font-size: 1.6rem;
}

/*wszystkie hiperłącza*/
a{
	text-decoration: none;
}

/*wszystkie obrazki*/
img{
	max-width: 100%;
}

/*wszystkie akapity*/
p{
	line-height: 140%;
}


strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

u {
	font-style: oblique;
}

/********************/
/* NAWIGACJA mobile */
.burger{
	background-color: #222;
	color: #fff;
	position: fixed;
	top: 2rem;
	right: 2rem;
	font-size: 3rem;
	padding: .5rem .65rem;/*by uzyskać rozmiar 40x40px*/
	display: none;
	cursor: pointer;
	z-index: 3;/*kolejność - ponad elementami sekcji*/
}
.burger:hover{
	background-color: #eee;
	color: #222;
}

.nakladka{
	background-color: rgba(0,0,0,.9);
	position: fixed;
	top: 0;/*żeby zwijała 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ść gdy 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: 90%;
	text-align: center;
}
.nakladka ol li{}
.nakladka ol li a{
	color: #eee;
/*	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: #eee;
	color: #222;
}

.zamknijX{
	background-color: #eee;
	position: absolute;/*pozycja względem kontenera nadrz. "nakladka" */
	top: 2rem;
	right: 2rem;
	font-size: 3.5rem;
	padding: 0 1.022rem .5rem;/*by uzyskać rozmiar 40x40px*/
	cursor: pointer;
}
.zamknijX:hover{
	background: none;
	color: #fff;
}

/* NAWIGACJA desktop */
nav{
	font-family: Petrona, "serif";
	font-weight: 800;
	background-color: #FFFFFF;
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: center;
  	z-index: 10;
	box-shadow: 7px 10px 50px rgba(0, 0, 0, 0.2);
}
nav ol{
/*	background-color: greenyellow;*/
	max-width: 1400px;
	display: flex;
	justify-content: space-evenly;
}
nav ol li{}
nav ol li a{
/*	background-color: aqua;*/
	padding: 1rem 2vw;
	display: block;
	color: black;
}
nav ol li a:hover{
	background-color: #eee;
	color: #333;
	font-family: Urbanist;
	font-weight: 1000;
}

/********************/
/* WSZYSTKIE SEKCJE */
section{

	min-height: 80vh;
	padding: 5vh 2rem;
	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{
	
	padding-top: 100px;
}
#pierwsza .zawartosc{
	/*FLEX CONTAINER*/
/*
	flex-wrap: wrap;ściśle połączone z flex-basis podane dla flex item
	justify-content: center;
*/
	/*ponizej sa moje proby kodowania*/
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	text-align: center;
	justify-content: center;
	max-width: 40%;
	margin: 4rem;
}
#pierwsza article{
	/*FLEX ITEMS*/
	flex: 0 1 300px;/*połączone z flex-wrap dla flex container - definiuje ile jest w rzędzie*/
/*	background-color: yellow;*/
}
#pierwsza article img{
	max-width: 70%;
	margin: auto;
	margin-bottom: 4rem;
	margin-top: -7rem;
	align-items: center;
	display: block;/*żeby działało środkowanie margin auto*/
	
}





#pierwsza article:first-of-type img {
	max-width: 70%;
	margin: auto;
	margin-bottom: 4rem;
	margin-top: -7rem;
	align-items: center;
	display: block;
	animation: spinPause 3s ease-in-out infinite;
	transform-origin: center;
}

/* Animacja z pauzą i ponownym obrotem */
@keyframes spinPause {
	0% {
		transform: rotate(0deg);
	}
	40% {
		transform: rotate(360deg);
	}
	70% {
		transform: rotate(360deg); /* zatrzymanie na chwilę */
	}
	100% {
		transform: rotate(360deg); /* koniec cyklu bez dodatkowego obrotu */
	}
}



#pierwsza article h1{
	font-family: Petrona, "serif";
	font-weight: 150;
    font-size: 7rem;
    margin: 0 0 1rem 0;
	color: black;
	justify-content: center;
	text-align: center;
}


#pierwsza article h2{
	font-family: Petrona, "serif";
    font-size: 4rem;
    font-weight: bold;
	font-style: italic;
    margin: 0 0 1rem 0;
	color: black;
	justify-content: center;
	text-align: center;
}
#pierwsza article p{
	margin: 0 0 2rem 0;
	
}

#pierwsza article a{
}



.guzik {
/*    display: inline-block;*/
	font-family: "Urbanist", sans-serif;
	border: solid;
	border-color: black;
	border-width: thin;
    color: black;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
	border-radius: 2rem;
    transition: 0.3s;
/*
	justify-content: center;
	text-align: center;
*/
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	justify-content: center;


	

}

.guzik:hover {
    background-color: #C2A1E1; /* Ciemniejszy zielony po najechaniu */
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4) inset;
}



.guzik-linia-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0rem;
	margin-top: 2rem;
}

.guzik-linia-wrapper .line {
	width: 28vh;
	height: 1px;
	background-color: black;

}



@keyframes pulseUpDown {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px); /* wysokość ruchu w górę */
	}
}

.arrow-icon {
	gap: 2rem;
	max-width: 3vh;
	margin-left: 2rem;
	margin-right: 2rem;
	animation: pulseUpDown 1.5s ease-in-out infinite;
}





#druga {
    background-image: url("../img/cofee_img.png");
    background-color: black;
    display: flex; 
    justify-content: flex-start;
    align-items: center; 
    padding: 3rem 4.5rem 7rem 0;
    gap: 10px;
    flex-wrap: wrap;
	

    /* Dodajemy responsywność dla obrazu tła */
    background-size: cover; /* Dopasowuje obrazek do rozmiaru sekcji */
    background-position: center center; /* Ustawia obrazek na środku */
    background-attachment: fixed; /* Zapewnia efekt przewijania tła */
    min-height: 100vh; /* Ustalamy pełną wysokość sekcji */
	align-items: center;
}

#druga .zawartosc {
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: right;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
    font-size: 1rem;
    gap: 1rem; /* zmniejszony odstęp z 2rem na 1rem */
}

/* Kolumna tekstowa */
#druga .kolumna.tekst {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    max-width: 50%;
    padding: 2rem;
    color: #EAE1D2;
}


#druga .kolumna.tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* domyślnie tekst do lewej */
}

#druga .kolumna.tekst article:last-of-type {
    align-self: flex-end; /* wyrównaj ten artykuł do prawej */
}


/* Styl artykułów */
#druga article {
	
    text-align: left;
/*	max-height: 600px;*/

}

/* Nagłówki h2 */
#druga article h2 {
	font-family: Petrona, "serif";
    font-size: 5rem;
    font-weight: 200;
	font-style: italic;
    margin: 0 0 1rem 0;
	color: white;
	text-align: center;

}


/* Paragrafy */
#druga article p {
	font-family: "Urbanist", sans-serif;    font-weight: regular;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#druga article svg {
/*	background-color: aqua;*/

	align-items: left;
/*	tutaj trzeba bedzie wrocic i ustawic do prawej*/
}



#druga article img{
	max-width: 70%;
	margin: auto;
	align-items: right;
	display: block;/*żeby działało środkowanie margin auto*/
	
}



/* Hover efekt dla bloków */
#druga .blok{
    padding: 0.7rem 0.7rem 0.7rem 0.7rem;
    border-radius: 2rem;
}

#druga .blok:hover{
    background-color: #252525; 
    transform: scale(1.02); /* Subtelne powiększenie tekstu */
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    border-radius: 1rem;
    justify-content: center;
}

/* Kolumna obrazkowa */
#druga .kolumna.obrazek {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%;
    padding: 15rem;
}

#druga .kolumna.obrazek img {
    width: 100%;
    max-width: 400px;
    height: auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
	
}

#druga .kolumna.obrazek img:hover {
    transform: scale(1.1);
    outline: 20px solid white; /* Obramowanie NA ZEWNĄTRZ obrazka */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}


#druga .wrapper {
    display: flex;
    justify-content: center; /* Centrowanie poziome */
    align-items: center;     /* Centrowanie pionowe */
    width: 100%;
    height: 100vh;           /* Pełna wysokość widoku */
}







#trzecia {
/*	max-width: 1500px;*/
	background-color: white;	
	color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
	font-family: "Urbanist", sans-serif;    
	padding: 2rem 0 2rem 0;
}

#trzecia .zawartosc {
	font-family: "Urbanist", sans-serif;    
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Odstęp między kolumnami */
	line-height: 1.6;
}

#trzecia .zawartosc article {
	flex: 0 1 400px;
	background-color: white;	
    color: black;
	border-radius: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	width: 17.5rem; /* Szerokość każdej kolumny */
	text-align: left;
	margin-bottom: 5rem;
}



/*
#trzecia .zawartosc article:hover {
  border: 1px solid black;
  padding: 0rem 0 2rem 0;
  transform: scale(1.1);
	
}
*/



#trzecia .zawartosc article h2{
	color: #000;
	font-family: Petrona;
	font-size: 2rem;
	font-style: normal;
	font-weight: 200;
	line-height: normal;
	text-align: center;
	margin-top: -7rem;
	margin-bottom: 3rem;
}



#trzecia .N1 {
	font-family: Petrona, "serif";
    font-size: 5rem;
	font-weight: 200;	
	font-style: italic;
    margin: 7rem 0 3rem 0;
	color: black;
	justify-content: center;
	text-align: center;
	margin-bottom: 2rem;

}






#trzecia a {
    color: white;
    text-decoration: none; /* Usuwa podkreślenie, opcjonalnie */
	padding-bottom: 5rem;

}

#trzecia a:hover {
	color: cornflowerblue;
    text-decoration: underline; /* Dodaje podkreślenie po najechaniu myszką */
		padding:  0rem 0 1rem 0;
}

#trzecia ol{}

#trzecia ol a{
	padding: 20px 0 0 0;
	text-decoration: none;
	display: flex;
    flex-direction: column;
	
}

#trzecia article img {
    width: 120%;
    border-radius: 10px;
    margin-bottom: 2rem;
	margin-top: 5rem;

}


#trzecia article img :hover{
	background-color: red;
	transform: scale(1.5);
	transform: rotate(180deg)
}




#trzecia .akcept {
font-size:90%;
}

	

#trzecia .zawartosc article:nth-child(2) ol li {
    margin: 0; /* Usuwa domyślne marginesy elementów listy */
}


/* Powiększenie dla obrazków SVG przy najechaniu */
#trzecia article img {
    transition: transform 0.3s ease; /* Płynna animacja */
}

#trzecia article img:hover {
    transform: scale(1.4); /* Powiększenie do 140% */
}

/* Animacja dla krótkiego tekstu pod obrazkiem */
#trzecia article h2 {
    opacity: 0; /* Ukrycie tekstu na początku */
    transform: translateY(10px); /* Przesunięcie w dół */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animacja dla opacity i transform */
}

#trzecia article:hover h2 {
    opacity: 1; /* Pokazanie tekstu */
    transform: translateY(0); /* Powrót do pierwotnej pozycji */
}


/*

#obrazek{
	background: url("../img/img3.jpg") no-repeat center fixed;
	background-size: cover;
}
*/




#czwarta {
  background-color: black;
  padding: 5vh 0;
  position: relative;
  overflow: hidden;
	z-index: 1;

}

#czwarta .zawartosc {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 0 4rem;
}

#czwarta h3 {
  font-family: "Urbanist", sans-serif;
  font-weight: 200;
  font-style: italic;
  font-size: clamp(2rem, 3vw, 4rem);
  line-height: normal;
  max-width: 60rem;
  z-index: 0;
}

/* Obrazki po bokach */
#czwarta .lace {
  position: absolute;
  top: 50%;
  width: 350px;
  max-width: 30vw;
  transform: translateY(-50%);
  opacity: 0.8;
  z-index: 0;
  pointer-events: auto;
  transition: transform 0.5s ease;
}

#czwarta .lace.left {
  left: -20rem;
}

#czwarta .lace.right {
  right: -20rem;
}

/* Efekt hover */
#czwarta .lace:hover {
  transform: translateY(-50%) rotate(180deg) scale(1.1);
}








#piata {
/*	max-width: 1500px;*/
	background-color: white;	
	color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
	font-family: "Urbanist", sans-serif;    
	padding: 2rem 0 2rem 0;
}

#piata .zawartosc {
    font-family: "Urbanist", sans-serif;    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    line-height: 1.6;
}

#piata .zawartosc article {
    flex: 1; /* Zmieniamy na flex: 1 aby kolumny równo się rozkładały */
    min-width: 300px; /* Minimalna szerokość kolumny */
    max-width: 350px; /* Maksymalna szerokość kolumny */
    background-color: white;    
    color: black;
    border-radius: 1rem;
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    box-sizing: border-box;
}



#piata .zawartosc article:hover {
  border: 1px solid black;
  padding: 0rem 0 2rem 0;
  transform: scale(1.1);
	
}



#piata .zawartosc article h2{
    color: black;
    font-weight: 500;
	font-size: 2rem;
	padding:  1rem 0 1rem 0;
	justify-content: center;
	text-align: center;	
	font-weight: 600;
}



#piata .N1 {
	font-family: Petrona, "serif";
    font-size: 5rem;
    font-weight: 200;
	font-style: italic;
    margin: 0 0 1rem 0;
	color: black;
	justify-content: center;
	text-align: center;
	margin-bottom: 2rem;

}






#piata a {
    color: white;
    text-decoration: none; /* Usuwa podkreślenie, opcjonalnie */
	padding-bottom: 5rem;

}

#piata a:hover {
	color: cornflowerblue;
    text-decoration: underline; /* Dodaje podkreślenie po najechaniu myszką */
		padding:  0rem 0 1rem 0;
}

#piata ol{}

#piata ol a{
	padding: 20px 0 0 0;
	text-decoration: none;
	display: flex;
    flex-direction: column;
	
}

#piata article img {
    width: 20%;
    border-radius: 10px;
    margin-bottom: 2rem;
	margin-top: 5rem;

}


#piata article img {
    width: 70%;
    border-radius: 10px;
    margin-bottom: 2rem;
    margin-top: 5rem;
    transition: transform 2s ease; /* dodane: płynność transformacji */
}

#piata article img:hover {
    transform: rotate(360deg); /* obrót po najechaniu */
}


#piata input.pole {
  background: rgba(255, 255, 255, 0.2);
  max-width: 90%;
  text-decoration: none;
	margin: 8px 0;
	box-sizing: border-box;
	border: 2px solid #3B2052;
  color:ghostwhite;
  border-radius: 0.5rem;
  padding: 0.7rem;
}



#piata .zawartosc article:nth-child(2) ol {
/*	background-color: pink;*/
    display: flex;
    gap: 20px; /* Odstęp między ikonami */
    list-style-type: none; /* Usuwa wypunktowanie listy */
    padding: 0;
}




#piata .akcept {
font-size:90%;
}

	

#piata .zawartosc article:nth-child(2) ol li {
    margin: 0; /* Usuwa domyślne marginesy elementów listy */
}











#blabla{
	background: url("../img/img4.jpg") no-repeat center fixed;
	background-size: cover;
}


#stopka{
	background-color: black;
	padding-top: 100px;
}
#stopka .zawartosc{
	padding: 0 1rem;    
	margin-bottom: 1rem; /* Zmniejsz margines dolny */

	/*FLEX CONTAINER*/
/*
	flex-wrap: wrap;ściśle połączone z flex-basis podane dla flex item
	justify-content: center;
*/
	/*ponizej sa moje proby kodowania*/
	color: white;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	max-width: 1400px;
	margin: 4rem;
}
#stopka article{
	/*FLEX ITEMS*/
	flex: 0 1 400px;/*połączone z flex-wrap dla flex container - definiuje ile jest w rzędzie*/
/*	background-color: yellow;*/
	color: white;
	max-width: 800px;
}
#stopka article img{
	max-width: 70%;
	margin: auto;
	display: block;/*żeby działało środkowanie margin auto*/
	margin-bottom: 5rem;
}


#stopka article:first-of-type img {
	max-width: 70%;
	margin: auto;
	margin-bottom: 4rem;
	margin-top: -7rem;
	align-items: center;
	display: block;
	animation: spin 30s linear infinite;
	transform-origin: center;
}

/* Kluczowa animacja */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


#stopka article h1{
	font-family: "Urbanist", sans-serif;
	color: white;
	font-weight: 800;
    font-size: 5rem;
    margin: 0 0 2rem 0;
	justify-content: center;
	text-align: center;
}


#stopka article h2{
	font-family: Petrona, "serif";
	color: white;
    font-size: 4rem;
    font-weight: 200;
	font-style: italic;
    margin: 0 0 2rem 0;

	justify-content: center;
	text-align: center;
}
#stopka article p{
	margin: 0 0 2rem 0;
	text-align: center;
	
}

#stopka article a{
}

#stopka .zawartosc ol {
    display: flex;
    gap: 15px; /* Mniejszy odstęp między ikonami */
	margin-bottom: -100rem;
}

#stopka .zawartosc ol li {
/*	background-color: pink;*/
	margin-top: 2rem;
/*	margin-bottom: 10rem;*/
    display: inline;
    justify-content: left;
}





.email-submit-form {
	font-family: "Urbanist", sans-serif;
  position: relative;
  width: 280px;
  margin: 20px 0;
}

.email-input {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid #555;
  border-radius: 25px;
  font-size: 16px;
  box-sizing: border-box;
}

.submit-btn {
  position: absolute;
/*  bottom: px;  częściowe nakładanie */
	margin-right: -2rem;
  right: 10px;
  padding: 15px 40px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
	background-color: #626262;

}

.submit-btn:hover {
  background-color: #0056b3;
	background-color: #9B64B1; /* Ciemniejszy zielony po najechaniu */
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4) inset;
}






.guzik {
/*    display: inline-block;*/

	border: solid;
	border-color: black;
	border-width: thin;
    color: black;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
	border-radius: 2rem;
    transition: 0.3s;
/*
	justify-content: center;
	text-align: center;
*/
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	justify-content: center;


	

}

.guzik:hover {
    background-color: #C2A1E1; /* Ciemniejszy zielony po najechaniu */
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4) inset;
}




/*******************************/
/**************RWD**************/
@media all and (max-width:600px){
    /* Globalne style dla mobile */
    html {
        font-size: 14px;
    }
    
    .burger {
        display: block;
    }
    
    nav {
        display: none; /* nawigacja desktopowa znika */
    }
    
    section {
        min-height: 100vh;
        padding: 5vh 1rem;
    }
    
    .zawartosc {
        flex-direction: column;
        align-items: center;
        padding: 0 1rem;
        width: 100%;
    }

    /* Sekcja pierwsza */
    #pierwsza {
        padding-top: 80px;
    }
    
    #pierwsza .zawartosc {
        max-width: 90%;
        margin: 1rem 0;
    }
    
    #pierwsza article h1 {
        font-size: 3.5rem;
    }
    
    #pierwsza article h2 {
        font-size: 2rem;
    }
    
    .guzik-linia-wrapper {
    display: flex;
    align-items: center;  /* wyśrodkowanie pionowe elementów w linii */
    justify-content: center;
    gap: 0.5rem;
  }
  
  .guzik-linia-wrapper .arrow-icon {
    max-width: 3rem; /* dopasuj rozmiar */
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    vertical-align: middle;
  }
    
    .guzik-linia-wrapper .line {
        display: none; /* ukrywamy linie na mobile */
    }
    
    .guzik {
        margin: 0 1rem;
    }

    /* Sekcja druga - najważniejsze poprawki */
    #druga {
        background-image: none;
        background-color: #000;
        padding: 5vh 1rem;
        height: auto;
        min-height: 100vh;
    }

    #druga .wrapper {
        height: auto;
    }

    #druga .zawartosc {
        flex-direction: column;
/*        gap: 2rem;*/
        padding: 0;
        overflow: visible;
    }
	
	#druga article svg{
		display: none;
	}

    #druga .kolumna.tekst,
    #druga .kolumna.obrazek {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }

    #druga article h2 {
        font-size: 2.5rem;
        text-align: center;
		padding: 2rem 0 2rem 0;
    }

    #druga .blok {
        padding: 1rem;
        margin-bottom: 2rem;
    }

    #druga .kolumna.obrazek img {
		max-width: 70%; /* lub dokładnie 70%, ale bez powiększania */
		height: auto;
		border: none !important; /* usuwa ramkę, jeśli gdzieś była */
		transform: none !important; /* jeśli był scaling lub inne transformacje */
		box-shadow: none !important; /* usuwa cień */
	}
	
	

    /* Sekcja trzecia */
    #trzecia .zawartosc {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    #trzecia .N1 {
        font-size: 2.5rem;
        margin: 2rem 0;
    }
    
    #trzecia .zawartosc article {
        width: 90%;
        margin-bottom: 2rem;
    }

    #trzecia article img {
        width: 100%;
        margin-top: 2rem;
    }

    /* Sekcja czwarta */
    #czwarta .zawartosc {
        padding: 2rem;
    }
    
    #czwarta h3 {
        font-size: 1.6rem;
        padding: 0 1rem;
    }
    
	#czwarta .lace {
		display: block !important;
		position: absolute;
		top: 50%;
		opacity: 0.5;
		width: 150px; /* mniejsze niż desktop */
		max-width: 30vw;
		transform: translateY(-50%);
		transition: transform 0.5s ease;
		z-index: 0;
	  }

	  #czwarta .lace.left {
		left: 0.5rem; /* bardziej przy krawędzi */
	  }

	  #czwarta .lace.right {
		right: 0.5rem;
	  }
	
	
	
	
    
    /* Sekcja piąta */
#piata .zawartosc {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    #piata .zawartosc article {
        width: 90%;
        max-width: 100%;
        flex: 0 0 auto;  
    }
    
    #piata article:hover {
        transform: none;
        padding: 1rem;   
    }
    
    #piata .N1 {
        font-size: 2.5rem;
        margin: 2rem 0;
    }

    /* Stopka */
    #stopka {
        padding-top: 50px;
    }
    
    #stopka .zawartosc {
        padding: 0 1rem;
    }
    
    #stopka article h1 {
        font-size: 2.5rem;
    }
    
    #stopka article h2 {
        font-size: 2rem;
    }

    #stopka .zawart-content ol {
        margin-bottom: 2rem;
    }

    /* Formularz email */
    .email-submit-form {
        width: 100%;
        max-width: 300px;
    }

/*
    .submit-btn {
        position: relative;
        right: auto;
        margin: 1rem auto 0;
        display: block;
    }
*/



/*koniec stylów od 0px do szer. 600px*/



}