@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=Alfa+Slab+One&family=Anton&family=Archivo+Black&family=Bungee&family=Gloria+Hallelujah&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Megrim&family=Parkinsans:wght@300..800&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Titan+One&family=Ultra&display=swap" rel="stylesheet');



/* SELEKTORY GLOBALNE */
*{
	transition: 1s;
	box-sizing: border-box;/*żeby paddingi nie zwiększały szer. boxu - kontrola nad responsywnością*/
}
html{
	font-family: Libre Franklin, regular;
	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: #a08c7c;
	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: antiquewhite;
/*	background-color: yellow;*/
	padding: 1.2rem;
	display: block;/*by wpływały na otoczenie rozmiarem*/
	margin-bottom: 3vh;
	font-family: Libre Franklin, "serif"
}
.nakladka ol li a:hover{
	background-color: antiquewhite;
	color: #a08c7c;
	font-family: Libre Franklin, "serif"
}

.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: Libre Franklin, "serif";
	font-weight: 800;
	background-color: #331400;
	position: fixed;
	width: 100%;
	opacity: 50%;
	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: antiquewhite;
}
nav ol li a:hover{
	background-color: antiquewhite;
	color: #331400;
	font-family: Libre Franklin;
	font-weight: 1000;
}

/********************/
/* WSZYSTKIE SEKCJE */
section{
	min-height: 100vh;
	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{
	background-image: url("../img/chmury2.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	gap: 0rem;
	padding: 0;
	min-height: 0;
	height: 883px;
	overflow-x: hidden;
}
#pierwsza img{
/*	background-color: red;*/
/*	position: absolute;*/
	max-width: none;
}
#pierwsza img:hover{
	transition: transform 0.3s ease;
	animation: shake 0.5s;
}
@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0, -5px); }
  50% { transform: translate(0, 5px); }
  75% { transform: translate(0, -5px); }
  100% { transform: translate(0, 0); }
}
#druga{
	background-image: linear-gradient(#040301, #241504);
}
#druga .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: 80%;
	margin: 4rem;
}
#druga article{
	/*FLEX ITEMS */
	flex: 0 1 300px;/*połączone z flex-wrap dla flex container - definiuje ile jest w rzędzie*/
/*	background-color: yellow; */
}
#druga 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*/ */
	
}
#druga article h1{
	font-family: Philosopher , "serif";
	font-weight: 150;
    font-size: 11rem;
    margin: 0 0 1rem 0;
	color: #AD8071;
	justify-content: center;
	text-align: center;
}
#druga article h2{
	font-family: Libre Franklin, "serif";
    font-size: 4rem;
	font-style: italic;
    margin: 0 0 1rem 0;
	color: #FFF8E9;
	justify-content: center;
	text-align: center;
}
#druga article p{
	margin: 0 0 2rem 0;
	
}

#trzecia{
    position: relative;
    padding: 6rem 0;
    background-image: url("../img/Leonardo_Phoenix_10_Create_a_funky_pastel_logo_for_a_bInterior_0.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
    background-color: #000000;
/*    overflow: hidden;*/
    background-repeat: no-repeat;
    min-height: 30vh;
	max-height: 80vh;
}
#trzecia .zawartosc{
	display: inline-flex;
/*    margin-top: 10rem;*/
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#trzecia .pierwsza-kolumna{
    max-width:50%;
    padding: 4rem 0;
	flex: 1 1 300px;
	transform: translateY(-15vh);

}
#trzecia .pierwsza-kolumna img:hover{
	filter: drop-shadow(0px 0px 32.6px rgba(205, 166, 40, 0.65));
  	transform: scale(1.1);
}
#trzecia .kontener{
    justify-content:center;
    align-items: center;
    display: flex;
}
#trzecia img{
	max-width: 100%;
}
#trzecia p{
    font-size: 1.25rem;
    line-height: 1.5rem;
    padding: 2.438rem 0 0 0;
}
#trzecia .druga-kolumna{
    max-width:40%;
}
#trzecia article h2{
	font-family: Libre Franklin, "serif";
    font-size: 5rem;
    margin: 0 0 1rem 0;
	color: #FFF8E9;
	justify-content: center;
	text-align: center;
}
#trzecia article p{
	font-family: Libre Franklin, "serif";
    font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
    margin: 0 0 1rem 0;
	color: #FFF8E9;
	justify-content: center;
	text-align: center;
}

#czwarta {
		overflow-x: hidden;
		padding-top: 1rem;
        padding-bottom: 0;
		line-height: 2.7rem;
	 	background-image: url("../img/Leonardo_Phoenix_10_Dramatic_brown_and_golden_clouds_in_the_sk_3 (1).jpg");
	 	background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}
#czwarta .zawartosc{
        align-items: center;
        align-content: center;
	 	justify-content:center;
		display: flex;
    }
#czwarta .zawartosc img:hover{
/*		background: url(<path-to-image>) lightgray 0% / cover no-repeat;*/
/*		box-shadow: 0px 0px 26.3px 23px rgba(254, 92, 4, 0.25), 0px 0px 36.8px 25px rgba(238, 216, 46, 0.48);*/
	transition: transform 0.3s ease; 
	transform: scale(1.25);
}
#czwarta article{
		padding: 3rem;
		line-height: 2.7rem;
        max-width: 50%;
	}
#czwarta article h4{
		padding-top: 2rem;
		padding-bottom: 1rem;
		text-align: center;
		font-size: 4rem;
		font-family: Libre Franklin, "serif";
		color: #FFF8E9;
    }
#czwarta h4{
		font-size: 2.488rem;
    }
#czwarta .kontener{
        margin: 5rem 0 0 0;
    }
#czwarta img{
        width: 200%;
    }

#stopka{
	background-color:#9A7556;
	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 img:hover{
	transition: transform 0.5s ease;
	transform: rotate(360deg);
}
#stopka article h1{
	font-family: Philosopher, 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 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: 400px;
  margin: 20px 0;
}

.email-input {
  width: 100%;
  padding: 12px 20px;
  border: 2.5px solid #874E22;
  border-radius: 5px;
  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;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
	background-color: #874E22;

}

.submit-btn:hover {
  background-color: #0056b3;
	background-color: #6195F0; /* 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:1000px){
	#druga article h1{
		font-size: 8rem;
	} 
	#druga article h2{
		font-size: 3rem;
	} 
}
@media all and (max-width:760px){
	 .zawartosc {
        flex-direction: column!important;
        align-items: center;
        padding: 0 1rem;
        width: 100%;
    }
}
@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: 10vh;
        padding: 5vh 1rem;
    }
   

    /* Sekcja pierwsza */
    #pierwsza {
		height: 200px;
		background-size: contain;
		background-repeat: repeat;
		background-position: top;
    }
	#pierwsza img {
		height: 100%;
		width: 100%;
		object-fit: cover;
    }
	
    /* Sekcja druga - najważniejsze poprawki */
    #druga {
        background-image: linear-gradient(#040301, #241504);
        padding: 2vh 1rem;
        height: auto;
		max-height: 70%;
    }
    #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 h1 {
        font-size: 5rem;
        text-align: center;
		padding: 2rem 0 2rem 0;
	}
    #druga article h2 {
        font-size: 2rem;
        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{
		background-image: url("../img/Leonardo_Phoenix_10_Create_a_funky_pastel_logo_for_a_bInterior_0.jpg");
		background-size: cover;
		padding: 3rem 0 1rem 0;
		max-height: 50%;
	}
    #trzecia .zawartosc{
/*        display: flex;*/
        justify-content: center;
/*        align-items: center;*/
		gap: 0;
    }
	#trzecia article{
		display: block;
	}
    #trzecia article h2{
        text-align: center;
		font-size: 4rem;
	}
	#trzecia article p{
		line-height: 2.6rem;
		padding-bottom: 1rem;
        text-align: center;
    }
    #trzecia .pierwsza-kolumna{
		margin: 0 1rem;
        max-width: 90%;
		flex: 1 1 auto;
		padding: 0;
	}
    #trzecia .druga-kolumna{
        max-width: 90%;
		flex: 1 1 auto;
	}
	
	#czwarta {
		padding: 1rem;
		line-height: 2.7rem;
		
	}
	#czwarta article{
		padding: 1rem;
		line-height: 2rem;
		max-width: 80%;
    }
    #czwarta article h4{
		font-size: 3rem;
	}
    /* 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*/