/* Moje style Css */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

/* kolory*/
:root{
    --kolor-podstawowy: #482D58;
    --kolor-akcent: #FFF5D8;
    --kolor-ciemny: #907DB8;
    --kolor-jasny:#EBDDFA;
}
/* Globalne selektory */
*{
    transition: 1s; /*animacja zmiany stylu*/
}
html{
    scroll-behavior: smooth;
}
body{
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings: "wdth" 100;
   font-family: "Limelight", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a{
    text-decoration: none;

}
p{
    font-family: "Playfair", serif;
    color: var(--kolor-jasny);
}
img{
    max-width: 100%;
}
h1, h2, h3, h4, h5, h6, .nav-logo, nav ol li a {
    font-family: "Limelight", sans-serif;
}
h1{color: var(--kolor-akcent);}
h2{color: var(--kolor-jasny);font-size:medium ;}
h3{font-size: large;}

/* Nawigacja */

nav{
    background-color: var(--kolor-podstawowy);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: fixed;
    width: 100%;
    z-index: 1;
}
.nav-logo {
    display: flex;
    align-items: center;
}
.nav-logo img {
    height: 40px;   
    width: auto;
    margin-right: 15px; 
}
nav ol{
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-width: 1000px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
nav ol li a{
   color: var(--kolor-jasny);
    padding: 10px 20px; 
    display: block;
    text-decoration: none; 
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
nav ol li a:hover{
    background-color: var(--kolor-jasny); 
    color: var(--kolor-podstawowy);
    border-radius: 20px;
}

/* Wszystkie Sekcje */
section{
    background-color: var(--kolor-podstawowy);
    min-height: 90vh;
    padding:40px 20px;
    /* flex conrainer */
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    scroll-margin-top: 56px;
}

/* Poszczeglne sekcje */
#sekcja1 {
    background-color: var(--kolor-podstawowy);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin: 0;
}
.zawartosc {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#logo-circle {
    width: 200px; 
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#sekcja1 .img-left img {
    width: 500px;
    height: auto;
}
#sekcja1 .img-right img {
    width: 600px;
    height: auto;
}

#sekcja2 {
    background: url(../img/tlo1.png);
    background-color: var(--kolor-podstawowy);
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 50px 0;
}

#sekcja2 .zawartosc {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

#sekcja2 article {
    flex: 1 1 400px; 
    padding: 0;
    border-radius: 0;
}

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

#sekcja2 article p {
    color: var(--kolor-jasny);
    font-size: 20px;
    padding: 0; 
    text-align: center;
}
.word-purple{
    color:#7F4DA5;
    font-family: "Limelight";
}
.word-blue{
    color:#B5ACFF;
    font-family: "Limelight";
}
.word-white{
    color:var(--kolor-akcent);
    font-family: "Limelight";
}
.word-yellow{
    color: #F2DB75;
    font-family: "Limelight";
}
.word-black{
    color: #3F1C23;
    font-family: "Limelight";
}
.Iris {
    font-family: "Limelight";
    font-size: 1.2em;
}
#sekcja3 {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sekcja3 .zawartosc {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
}

#sekcja3 article {
    flex: 0 1 350px; 
    padding: 20px;
    text-align: center;
}

#sekcja3 img:hover {
    transform: translateY(-15px); 
}

#sekcja3 article img {
    width: 100%;
    object-fit: cover; /* Zdjęcie wypełnia kafel bez rozciągania */
    border-radius: 30px; /* Zaokrąglenie samego zdjęcia */
    margin-bottom: 20px;
}
#sekcja4{
    background: url(../img/tlo2.png);
    background-color: var(--kolor-podstawowy);
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 50px 0;
}
#sekcja4 article {
    flex: 1 1 400px; 
    padding: 0;
    border-radius: 0;
}
#sekcja4 article img {
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
}
#sekcja4 article p {
    color: var(--kolor-akcent);
    font-size: 20px;
    padding: 0; 
    text-align: center;
}
#sekcja5{
    padding: 50px 5%;
    display: flex; 
    gap: 40px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
}
#sekcja5 .title {
    flex: 0 0 60%; 
    display: flex;
    flex-direction: column;
}
.title {
    flex: 2; 
}
#sekcja5 .care {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
#sekcja5 h2 {
    font-size: 36px;
    margin-bottom: 60px;
    padding-left: 20px;
}
.care {
    display: flex;
    gap: 40px;
}
.columna1, .columna2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
#sekcja5 article {
    text-align: center;
}

#sekcja5 span {
    display: block;
    font-family: "Limelight";
    font-size: 24px;
    margin-bottom: 10px;
}

.Watering { color: #9D96E7;}
.Winter-protection { color: #EBDDFA; }
.Fertilizing { color: #D88725; }
.Division { color: #F6E175; }
.Pruning { color: #F56648; }
.Deadheading { color: #B6C356; }

#sekcja5 p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 320px;
}
.img-big {
    flex: 0 0 35%;
    display: flex;
    justify-content: flex-end;
}

.img-big {
    flex: 1.2;
    display: flex;
    justify-content: center;
}
.img-big img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
}
/* Stopka */
#stopka { 
    background-color: var(--kolor-podstawowy);
    color: var(--kolor-uzupełniający);
    padding: 60px 5% 0;
    min-height: 20vh;
    position: relative;
    overflow: hidden;
}
#stopka .stopka {
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}
.img-stopka {
    position: absolute;
    left: -20px;
    bottom: 0;
    line-height: 0;
    z-index: 1;
}
.img-stopka img {
    height: 400px;
    width: auto;
    display: block;
    transform: scale(1.1);
    transform-origin: bottom left;
}
.newsletter {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
    padding-bottom: 60px;
    position: relative;
    z-index: 2;
}
#stopka h3 {
    color: var(--kolor-jasny);
    margin-bottom: 20px;
}
.ikony {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.ikony a {
    transition: transform 0.3s ease;
    display: inline-block;
}
.ikony a:hover {
    transform: scale(1.15);
}
.ikony img {
    width: 40px;
}

.newsletter-ramka p {
    font-size: 14px;
    margin-top: 15px;
    opacity: 0.8;
}

.newsletter-formulka {
    display: flex;
    background-color: white;
    border-radius: 50px;
    padding: 5px;
    width: 100%;
}

.newsletter-formulka input[type=email] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 20px;
    outline: none;
    color:var(--kolor-ciemny);
}

.newsletter-formulka button {
    background-color: var(--kolor-akcent); 
    color:var(--kolor-ciemny);
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.newsletter-formulka button img {
    width: 15px;
    transition: transform 0.3s ease;
}

.newsletter-formulka button:hover img {
    transform: translateX(5px); 
}

.stopka-bottom {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.footer-logo {
    max-width: 80px;
}

#stopka h6 {
    color:var(--kolor-jasny);
    opacity: 0.9;
    font-size: 14px;
    font-weight: 300;
    margin-top: 20px;
}