/* Moje style CSS */
/*import fontów z Google*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap');

/*KOLORY*/
:root{
    --kolor-ciemny: #1B065E;
    --kolor-akcenty: #FF47DA;
    --kolor-uzupełniający: #FCC8C2;
    --kolor-podstawowy: #FF87AB;
    --kolor-jasny: #F5ECCD;

    --ciemny-rozowy: #AB4F79;
    --jasny-rozowy: #DF5E9B;
    --najjasniejszy-rozowy: #E8D1D9;
    --ciemny-zielony: #87844F;
    --jasny-zielony: #ACA66C;
    --jasnyjasny: #F2EAEB;
    --bialyv: #F8F1F4;
    --czarny: #000000;

}
/* GLOBALNE SELEKTORY */
*{
    transition: 1s;/*animacja zmiany stylów*/
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;/*płynne przewijanie*/
}

body{
    font-family: "Lato", serif;
}

a{
    text-decoration: none;/*usuwa podkreślenia ze wszystkich hiperłączy w całym dokumencie*/
}

p{
    line-height: 140%; /*interlinia*/
    font-weight: 300;
}

img{
    max-width: 100%;/*responsywne obrazy*/
}

h1, h2, h4, h5, h6 {
    font-family: "Sansita", serif;
}

h1{
    font-weight: 800;
    font-style: italic;
}
h2{
    font-size: 70px;
    margin-bottom: 40px;
    font-weight: 600;
    font-style: italic;
}

h3{
    font-family: "Lato", serif;
    line-height: 140%; /*interlinia*/
    font-weight: 700;
    font-size: 20px;

}
h4{
    margin-bottom: 40px;
    font-weight: 600;
    font-style: italic;
}
h5{

}
h6{}

/* NAWIGACJA */
nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;/*przylepia nav do krawędzi okna przegl.*/
    width: 100%;
    z-index: 1;
    padding: 20px;
    gap: 7vh;
}

nav ol{
    /* background-color: orange; */
    max-width: 1200px;
    /* width: 100%; */
    display: flex;
    justify-content: space-evenly;
    background-color: var(--najjasniejszy-rozowy);
    border: 2px var(--najjasniejszy-rozowy);
    border-radius: 40px 40px;
    padding: 20px ;
    
}
nav ol li{
    /* background-color: green; */
}
nav ol li a{
    padding: 12px 30px;
    /* display: inline; utrudnia ustawianie i rozmiar */
    display: block;/*wpływają na otoczenia i można im ustawić rozmiar*/
    color: var(--czarny);
    /* background-color:orange; */
    white-space: nowrap;

}
nav ol li a:hover{
    color: var(--jasny-rozowy);
    font-weight: 900;
}

/* WSZYSTKIE SEKCJE */
section{
    min-height: 100vh;/*vh = viewport height = % wys. okna przegl.*/
    padding: 120px 20px 40px;
    /*FLEX CONTAINER*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /*domyślnie jest row - w wierszu*/
    scroll-margin-top: 0; /*odstęp od góry przy przewijaniu do sekcji - wysokość nav*/
}
.zawartosc{
    /* background-color: red; */
    max-width: 1400px;
    width: 100%;
    padding: 20px;
    /* FLEX ITEM - bo kontenre nadrzędny ma flex */
}
/* PREFIX class to . */

/* POSZCZEGÓLNE SEKCJE */
#sekcja1{
    background: url(../img/Sekcja\ 1.jpg) no-repeat
    center bottom / cover fixed;
}
#sekcja1 .zawartosc{
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;/*row/column = justify/align*/
    gap: 1vh;
}

#sekcja1 h1{
    color: var(--czarny);
    font-size: 120px;
}

#sekcja1 a:hover{}

#przerwa{ 
    height: 40px;
}

#podtytul{
    color: var(--czarny);
    font-size: 150%;
    font-weight: 300;
}

/*----------------------------SEKCJA 2 -------------------------*/

#sekcja2{
    background-color: var(--jasnyjasny);
}

#sekcja2 h2{
    color: var(--jasny-rozowy);
}

#przerwa2{
    height: 20px;
}

#opis1{
    text-align: center;
    font-size: 120%;
}

#opis1 span{
    color: var(--jasny-rozowy);
    font-weight: 900;
}

#opis2{
    text-align: center;
    font-size: 100%;
}

/*boxy*/ 

#sekcja2 .zawartosc{
    display: flex;
    flex-wrap: wrap; 
    gap: 30px;
    justify-content: center;
}

#sekcja2 article{
    flex: 1 1 400px;
    /* max-width: 430px; */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    background-color: var(--bialyv);
    padding: 20px;
    border-radius: 10px;
}

#sekcja2 figure{
    flex: 1 1 150px;
    /* background-color: blue; */
}
#sekcja2 article figure img{
    /* width: 219px; */
    height: 257px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 219px;
    display: block;
}

#sekcja2 article .text{
    /* background-color: green; */
    flex: 1 1 200px;
    min-height: 0;
}
#sekcja2 article p{
    margin:0;
    text-align: left;
}
#sekcja2 article p span{
    font-weight: 700;
    margin:0 0 10px;
}


/*----------------------------SEKCJA 3 -------------------------*/


#sekcja3{
    background-color: var(--jasnyjasny);
    /* padding: 20px 0; */
}

#sekcja3 h2{
    text-align: center;
    color: var(--jasny-rozowy);
}

#sekcja3 .zawartoscsekcja3{
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
}

#sekcja3 .zielonetlo{
    background-color: var(--jasny-zielony);
    display: flex;
    gap: 30px;
    padding: 30px;
    border-radius: 10px;
    align-items: center;
}

#sekcja3 .zielonetlo img{
    width: 45%;
    max-width: 520px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

#sekcja3 .pielegnacja{
    color: var(--bialyv);
    flex: 1;
}

#sekcja3 .pielegnacja p{
     margin:0;
}

#sekcja3 .pielegnacja p span{
    font-weight: 700;
    font-size: ;
    margin:0 0 10px;
}

/* SADZENIE */

#sekcja3 .rozowybox{
    background-color: var(--najjasniejszy-rozowy);
    display: flex;
    gap: 30px;
    padding: 30px;
    border-radius: 10px;
    align-items: center;
}

#sekcja3 .rozowybox img{
    width: 45%;
    max-width: 520px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

#sekcja3 .sadzenietext{
    /* flex: 1; */
    min-height: 0;
}

#sekcja3 .sadzenietext p{
    margin:0;
}

#sekcja3 .sadzenietext p span{
    font-weight: 700;
    margin:0 0 10px;
}

#sekcja3 .sadzenietext ol{
    margin:0;
    font-weight: 300;
    line-height: 140%; /*interlinia*/

}

/*----------------------------SEKCJA 4 CIEKAWOSTKA  -------------------------*/



#sekcja4{
    background: url(../img/ciekawoska.png) no-repeat center bottom / cover fixed; 
    padding: 40px 0;
}
#sekcja4 h1{
    /* text-align: center; */
    opacity: 70%;
    color: var(--bialyv);
    font-size: 120px;
}

#sekcja4 .zawartosc{
    display: flex;
    flex-wrap: wrap; 
    gap: 30px;
    justify-content: center;
}

#sekcja4 .tresc{
    background-color: var(--bialyv);
    opacity: 70%;
    gap: 30px;
    padding: 30px;
    border-radius: 10px;
    max-width: 800px;
}

#sekcja4 .tresc p{
    color: var(--ciemny-rozowy);
    text-align: center;
    font-size: 120%;
}

/*----------------------------SEKCJA 5 -------------------------*/

#sekcja5{
    background-color: var(--najjasniejszy-rozowy);
    padding: 40px 20px;

}
#sekcja5 .zawartosc{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
#sekcja5 h4{
    color: var(--najjasniejszy-rozowy);
    font-size: 30px;
}

#sekcja5 article{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

#sekcja5 .danekontaktowe{
    flex: 0 1 300px;
    background-color: var(--jasnyjasny);
    padding: 20px;
    border-radius: 10px;
}

#sekcja5 .danekontaktowe img{
    width: 30px;
    height: 30px;
}

#sekcja5 .danekontaktowe p{
    flex: 1;
    min-height: 0;
}

#sekcja5 .socialmedia{
    flex: 0 1 300px;
    background-color: var(--jasnyjasny);
    padding: 20px;
    border-radius: 10px;
}

#sekcja5 .socialmedia img{
    width: 30px;
    height: 30px;
}

#sekcja5 .socialmedia p{
    flex: 1;
    min-height: 0;
}

#sekcja5 .newsletter{
    flex: 0 1 300px;
    background-color: var(--jasnyjasny);
    padding: 20px;
    border-radius: 10px;
}

#sekcja5 .newsletter img{
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 120px;
}

#sekcja5 .newsletter p{
}

#sekcja5 .newsletter input[type=email]{
    padding: 8px;
    border-radius: 10px;
    border: none;
}

#sekcja5 .newsletter input[type=submit]{
    padding: 8px;
  margin-top: 10px;
  border-radius: 10px;
  cursor: pointer;
  background-color:var(--najjasniejszy-rozowy);
  border: none;
}

#sekcja5 .newsletter input[type=submit] :hover{
    color: var(--jasny-rozowy);
    font-weight: 900;
}

#sekcja5 .copyright {
    margin-top: 100px;
    font-size: 14px;
    color:var(--ciemny-rozowy);
    text-align: center;
}