@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Waiting+for+the+Sunrise&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Waiting+for+the+Sunrise&display=swap');

:root {
    --color-green: #ACCE78;
    --color-bg: #144736;
    --color-bg-light: #E6F0D6;
    --color-pink: #E86798;
}

* {
    box-sizing: border-box;
    transition: 500ms;
}

html {
    scroll-behavior: smooth;
    font-family: "Open Sans", sans-serif;
}

h2 {
    font-family: Nunito, sans-serif;
    font-size: 200px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
}

h3 {
    font-family: Nunito, sans-serif;
    font-size: 40px;
    font-weight: lighter;
    font-style: normal;
    line-height: 100%;
    text-align: center;
}

h4 {
    font-family: "Waiting for the Sunrise", cursive;
    font-weight: lighter;
    line-height: normal;
}

a {
    text-decoration: none;
}

p {
    font-family: "Karla", sans-serif;
    font-size: 20px;
    font-weight: 350;
    font-style: normal;
    line-height: 140%;
}

body {
    font-family: "Karla", sans-serif;
    font-size: 20px;
    font-weight: 200;
    font-style: normal;
}

img {
    max-width: 100%;
}

header {
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 1;
}

footer {
    background-color: var(--color-bg);
}

nav {
    font-family: "Karla", sans-serif;
    font-weight: 400;
    font-size: 16px;
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

nav ol {
    padding: 10px;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 20px;
}

nav ol li {
    flex: 1;
}

nav ol li a {
    padding: 6px 1vw;
    display: block;
    text-align: center;
    color: var(--color-green);
    border-radius: 50px;
    line-height: 100%;
}

nav ol li a:hover {
    background-color: var(--color-bg-light);
    color: var(--color-bg);
}

nav ol #logo {
    display: flex;
    justify-content: center;
}


nav ol #logo img {
    height: 80px;
    width: auto;
}

section {
    padding: 20px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-margin-top: 56px;
}

/*class ma prefix*/
.zawartosc {
    max-width: 1400px;
    width: 100%;
    margin: 80px 0;
    text-align: center;
    /*FLEX ITEM*/
}

/*POSZCZEGÓLNE SEKCJE*/
/*id ma prefix '#' */
#sekcja1 {
    background-color: var(--color-bg);
    background-image: url(../img/gruszka_tlo.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

#sekcja1 a{
    color: #fff;
}

#sekcja1 a:hover{
    color: var(--color-pink);
}

#sekcja1 svg{
    stroke: white;
}

#sekcja1 a:hover svg{
    stroke: var(--color-pink);
}

#sekcja1 .zawartosc {
    /*background-color: violet;*/
    display: flex;
    flex-direction: column;
    /*zmenia justyfy z align*/
    justify-content: center;
    /*nie wyrównuje bo dotyczy wysokości*/
    align-items: center;
    /*dotyczy wyrównannia na szerokość*/
    gap: 4vh;
    /*odstępy w pionie = 4% wys. okna przegl.*/
    position: relative;
    margin-top: 200px;
}

#sekcja1 h2 {
    text-align: center;
    color: #fff9b7;
    font-size: clamp(2.5rem, 12vw, 200px);
}

#sekcja1 h4 {
    font-family: "Waiting for the Sunrise", cursive;
    font-size: clamp(1.5rem, 7vw, 96px);
    font-weight: 300;
    font-style: normal;
    color: var(--color-pink);
    position: absolute;
    top: -1.1em;
    left: 0.5em;
    transform: rotate(-10deg);
}

#sekcja1 button {
    font-family: "Karla", sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 110%;
    text-align: center;
    margin-top: 400px;
}

#sekcja1 button span {
    color: var(--color-akcent1);
}

button {
    padding: 10px 30px;
    background-color: var(--color-akcent1);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    width: 100%;
    display: inline-block;
    align-self: center;
}

button:hover {
    color: var(--color-bg);
}

/************/

#sekcja2 {
    background-color: var(--color-green);
    border-bottom-left-radius: 260px;
    border-bottom-right-radius: 260px;
}

#sekcja2 .zawartosc {
    display: flex;
    /*ustawi kolumny obok siebie*/
    gap: 20px;
    flex-wrap: wrap;
    /*pozwoli na zawilanie do nast. rzedu - moment zawijanie elementu zależy od FLEX dla ITEMS*/
    margin-top: 80px;
    justify-content: center;
}

#sekcja2 h3 {}

#sekcja2 p {
    text-align: center;
    padding-bottom: 30px;
}

#sekcja2 article {
    max-width: 50%;
    /*szerokość bazowa 300px - oznacza że ITEMS nie mogą być miejsze niż 300px więc wrapem zostaną zrzucone do nast. wiersza*/
    position: relative;
    /*żeby zawarte w nim obiekty na positon: absolute ustawiały się względem tego elementu*/
}

#sekcja2 article img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#sekcja2 article h4 {
    position: absolute;
    /*żeby ustawiać w dowolnym miejscu*/
}

/**********/

.slodka {
    color: #fff;
    font-size: clamp(1.5rem, 7vw, 96px);
    transform: rotate(-16deg);
    top: 15%;
    left: -30%;
}

.delikatna {
    color: #E86798;
    font-size: clamp(1.2rem, 4vw, 56px);
    transform: rotate(30deg);
    left: -30%;
    bottom: 0;
}

.slodka {
    color: #fff;
    font-size: clamp(1.5rem, 7vw, 96px);
    transform: rotate(-16deg);
    top: 15%;
    left: -30%;
}

.delikatna {
    color: #E86798;
    font-size: clamp(1.2rem, 4vw, 56px);
    transform: rotate(30deg);
    left: -30%;
    bottom: 0;
    top: 70%;
}

.zdrowa {
    color: #2F4D00;
    font-size: clamp(1.2rem, 4vw, 56px);
    transform: rotate(20deg);
    right: 12%;
    bottom: 65%;
}

.miekka {
    color: #E86798;
    font-size: clamp(1.5rem, 7vw, 96px);
    transform: rotate(-16deg);
    right: -40%;
    bottom: 45%;
}

.swieza {
    color: #fff;
    font-size: clamp(1.1rem, 3vw, 50px);
    transform: rotate(8deg);
    right: -20%;
    bottom: 0;
}

#sekcja3 {
    padding: 80px;
    /* background-color: red; */
}

#sekcja3 .zawartosc {
    /* background-color: blue; */
    /* padding: 10px; */
}

#sekcja3 p {
    text-align: center;
    padding-bottom: 120px;
}

#sekcja3 article {
    /* background-color: green; */
    display: flex;
    flex-direction: column;
    gap: 30vh;
    padding: 40px;
}

#sekcja3 article div {
    padding: 50px 80px 20px 80px;
    height: 264px;
    border-radius: 100px;
    position: relative;
}

#sekcja3 img {
    position: absolute;
    max-width: 20%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
}

.right {
    right: 10%;
}

.left {
    left: 10%;
}

#sekcja3 h2 {
    width: 100%;
    text-align: center;
    /* background-color: orange; */
    position: absolute;
    bottom: -30%;
    left: 0;
    font-size: clamp(20px, 10vw, 200px);
}

#sekcja3 h5 {
    color: #000;
    text-align: left;
    max-width: 50%;
    position: absolute;
    line-height: 140%;
}

#sekcja3 #zaznaczenie1 {
    color: #A5750F;
}

#sekcja3 #zaznaczenie2 {
    color: #8EB452;
}

#sekcja3 #zaznaczenie3 {
    color: #E86798;
}

#sekcja3 #zaznaczenie4 {
    color: #EC8B2A;
}

.konferencja {
    background-color: #FFF9B7;
    color: #DBCB19;
}

.paryzanka {
    background-color: #E7F1D7;
    color: #8EB452;
}

.lukasowka {
    background-color: #FDDCE9;
    color: #F888B3;
}

.bera-biala {
    background-color: #F7F0E1;
    color: #EC8B2A;
}

/************/

#sekcja4 {
    margin-top: 80px;
    background-color: #E6F0D6;
}

#sekcja4 .zawartosc {
    /*odwrotna kolejność w kolumnie po zawijaniu*/
}

#sekcja4 h3 {
    margin-bottom: 20px;
}

#sekcja4 h6 {
    color: #8EB452;
    font-family: Nunito;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    font-size: clamp(1.2rem, 4vw, 32px);
}

#sekcja4 h5 {
    color: #8EB452;
    font-family: Nunito;
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;
    margin: 4px 0px 16px 0;
    text-align: left;
    font-size: clamp(1.2rem, 4vw, 56px);
}



#sekcja4 ol {
    list-style-type: decimal;
    line-height: 1.4;
    padding-left: 16px;
}

#sekcja4 article {
    position: relative;
}
#sekcja4 article div{
    background-color: rgba(255,255,255,.5);
    padding: 1rem;
    border-radius: 30px;
    max-width: 300px;
}
#sekcja4 article div:hover{
    z-index: 2;
    background-color: #fff;
}

#sekcja4 p {
    text-align: left;
    max-width: 580px;
    margin: auto;
    font-size: clamp(1.2rem, 4vw, 10px);
    color: #ccc;
    display: none;
}
#sekcja4 article div:hover p{
    color: #000;
    display: block;
}

#woda {
    left: 57%;
    top: -8%;
}

#witamina-c {
    right: 0;
    top: 31%;
}
#witamina-c h5, #witamina-c h6 {
    color: #EC8B2A;
}

#potas {
    top: 87%;
    right: 1%;
}
#potas h5, #potas h6 {
    color:#66A5E4;
}

#antyoksydanty {
    bottom: -26%;
    right: 32%;
}
#antyoksydanty h5, #antyoksydanty h6 {
    color:#F15E54;
}

#witamina-k {
    left: 10%;
    top: 87%;
}
#witamina-k h5, #witamina-k h6 {
    color: #DBCB19;
}

#blonik {
    left: 7%;
    top: 24%;
}
#blonik h5, #blonik h6 {
    color: #F888B3;
}

#sekcja4 article img {
    display: block;
    max-width: 70%;
    height: auto;
    margin: 125px auto 435px auto;
}

#sekcja4 .infobox {
    position: absolute;
}

/************/

#sekcja5 {
    background-color: var(--color-akcent2);
    border: 2px;
    flex-wrap: wrap;
}

#sekcja5 img {
    max-height: auto;
    /* max-width: 40%; */
    border-radius: 50%;
    display: block;
    flex: 1 1 300px;
    margin: auto;
}
#sekcja5 article {
    flex: 1 1 300px;
}

#sekcja5 h3 {
    margin-bottom: 30px;
}

#sekcja5 h5 {
    color: #ACCE78;
    font-family: Nunito;
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;
    margin-bottom: 20px;
}

#sekcja5 p {
    margin-bottom: 52px;
}

#sekcja5 .container-image-left {
    display: flex;
    flex-wrap: wrap;
    gap: 140px;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
}

#sekcja5 .container-image-right {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    gap: 140px;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
}

/************/

#stopka {
    background-color: var(--color-bg);
    min-height: 20vh;
    flex-direction: column;
    border-radius: 260px 260px 0 0;
}

#stopka .zawartosc {
    display: flex;
    justify-content: center;
    padding: 30px;
    gap: 40px;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0;

}

#stopka article {
    flex: 1 1 200px;
    background-color: #212722;
    padding: 20px 30px;

}

#stopka a {
    line-height: 1.9;
    font-size: small;
}

#stopka p {
    color: rgba(172, 206, 120, 0.40);
}

#stopka article main {
    line-height: 2;
}

#stopka article main label {
    width: 60px;
    display: inline-block;
}

#stopka article main input {
    display: inline-block;
    width: 100%;
}

#zgody label {
    margin: 2rem 0;
    font-size: smaller;
}

#stopka footer {
    border: 0;
    padding: 20px 0px;
    font-size: 14px;
    font-weight: bold;
}

#stopka footer input {
    background-color: var(--color-akcent1);
    color: #fff;
    border: none;
    padding: 10px 30px;
    font-weight: bold;
}

#stopka footer input:hover {
    background-color: var(--color-akcent2);
    border: none;
    color: #000;
    font-weight: bold;
}

#stopka hr {
    height: 1px;
    width: 100%;
    border-radius: 100px;
    margin: 0;
    border: 1px solid rgba(172, 206, 120, 0.30);
}

#stopka #content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#stopka #icons {
    display: flex;
    gap: 20px;
}

#stopka p{
    font-size: 12px;
}