/* ================================= */
/* GLOBAL */
/* ================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', sans-serif;
    line-height: 1.6;
    color: #652638;
    background-color: #ffffff;
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4, h5, h6,
p, a, li, input, textarea, button {
    font-family: 'Manrope', sans-serif;
}

section{
    overflow: hidden;
}

.container {
    width: 90%;           /* zawartość zajmuje 90% szerokości ekranu */
    max-width: 1200px;    /* maksymalna szerokość na dużych ekranach */
    margin: 0 auto;       /* centrowanie poziome */
    padding-left: 0;      /* opcjonalnie: dodatkowe paddingi */
    padding-right: 0;
}

/* ================================= */
/* NAWIGACJA */
/* ================================= */

nav {
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 10px 50px;
    display: flex;
    justify-content: flex-end;
}

nav ol {
    display: flex;
    list-style: none;
    gap: 2vw;
}

nav a {
    display: block;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    color: #652638;
    text-transform: lowercase;
    font-size: 0.9rem;
    transition: 0.3s;
    white-space: nowrap;
    
}

nav a:hover {
    font-weight: bold;
    background-color: #652638;
    color: #ffffff;
}

/* ================================= */
/* SEKCJA 1 */
/* ================================= */
main{
    overflow: hidden;
}

#sekcja1 {
    height: 100vh;
    background: #FFF4DF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logo-wrapper {
    /* background-color: red; */
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 40px;
}

/* JEDYNY INNY FONT */
.main-logo-text {
    /* background-color: yellow; */
    font-family: 'Mea Culpa', cursive;
    font-size: clamp(20px, 20vw, 300px);
    color: #652638;
    position: relative !important;
}

.small-title {
    position: absolute;
    /* background-color: blue; */
    font-size: 30px;
    color: #652638;
    /* margin-left: auto; */
    /* margin-right: 25vw; */
    text-align: left;
}

.description-text {
    /* background-color: green; */
    font-size: 14px;
    color: #333;
    max-width: 400px;
    margin-top: -10px;
    margin-left: auto;
    text-align: left;
    line-height: 1.5;
}

.latajacy-kwiatek {
    position: absolute;
    height: 200vh;
    width: 100vw;
    background: url(../img/kwiat_lewy.png) no-repeat left top;
    background-size: 60%;
    z-index: 1;
    top: 0;
}

/* ================================= */
/* SEKCJA 2 */
/* ================================= */

#sekcja2 {
    padding: 120px 0;
    background: linear-gradient(to bottom, #FFF4DF, #FFFFFF);
}

#sekcja2 h2 {
    font-size: 30px;
    margin-bottom: 40px;
    font-weight: 700;
}

#sekcja2 .zawartosc {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
}

#sekcja2 article {
    flex: 0 1 230px;
    padding: 10px;
    border-radius: 20px;
}

#sekcja2 article img {
    border-radius: 20px;
    margin-bottom: 15px;
}

#sekcja2 h3 {
    font-weight: 700;
    color: #600036;
    font-size: 19px;
}

#sekcja2 article p {
    font-size: 16px;
    color: #292929;
    padding: 0 0px;
    margin: 0;
}

/* ================================= */
/* INFO BAR */
/* ================================= */

.info-bar {
    background-color: #600036;
    border-radius: 10px;
    padding: 10px 50px;
    margin: 40px auto;
    max-width: 1150px;
    width: 90%;
}

.info-bar-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-icon {
    font-size: 50px;
    color: #fff;
}

.info-text h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
}

.info-text p {
    font-size: 14px;
    color: #fff;
    line-height: 1.4;
}

/* ================================= */
/* SEKCJA 3 – UPRAWA */
/* ================================= */

#sekcja3 {
    padding: 120px 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.uprawa-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}

.uprawa-text h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.uprawa-text h3 {
    font-weight: 700;
    color: #600036;
    font-size: 19px;
}

.calendar-box img {
    width: 300px;
    border-radius: 15px;
}

.uprawa-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 120px;
    flex-wrap: wrap;
}

.uprawa-row.reverse {
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
.image-box {
    flex: 1 1 300px;
}
.image-box img {
    max-width: 100%;
    border-radius: 20px;
}

.text-box {
    flex: 1 1 300px;
    max-width: 500px;
}

.text-box h3 {
    font-weight: 700;
    color: #600036;
    font-size: 19px;
}

/* ===================== */
/* SEKCJA 5 – SZKODNIKI (dopasowanie do Uprawy) */
/* ===================== */
#sekcja5 {
    padding: 120px 0;
    position: relative;
    /* background: linear-gradient(to bottom, #FFF4DF, #FFFFFF); */
}
.jaskier-prawy {
    position: absolute;
    right: 0;
    top: -50%;
    height: 200%;
    z-index: 1;
    opacity: 0.8; /* opcjonalnie, aby nie dominował nad treścią */
}
#sekcja5 .zawartosc {
    display: flex;
    gap: 80px;               /* taki sam odstęp jak w uprawa-row */
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
}

#sekcja5 article {
    flex: 1 1 300px;         /* pozwala elementom się kurczyć i zwijać */
    max-width: 500px;        /* taki sam max-width jak w text-box / image-box */
    padding: 10px;
    border-radius: 20px;
}

h2 {
    font-size: 32px;        /* taki sam jak w uprawa-top h2 */
    font-weight: 700;       /* opcjonalnie: jeśli chcesz pogrubiony */
    color: #600036;         /* dopasowany do sekcji 3 */
    margin-bottom: 40px;    /* taki sam odstęp pod nagłówkiem */
    text-align: left;     /* wyśrodkowany, tak jak w sekcji 3 */
}

#sekcja5 article h3 {
    font-weight: 700;
    color: #600036;          /* taki sam kolor jak w sekcji 3 */
    font-size: 19px;
    margin-bottom: 15px;     /* taki sam odstęp pod nagłówkiem */
}

#sekcja5 article p {
    font-size: 16px;          /* taki sam rozmiar jak w sekcji 3 */
    color: #292929;           /* taki sam kolor jak w sekcji 3 */
    line-height: 1.5;         /* taki sam jak w sekcji 3 */
    margin: 0;
    padding: 0;
}


/* ================================= */
/* STOPKA */
/* ================================= */

footer {
    background: #FFF4DF;
    padding: 100px 10% 40px 10%;
}

.footer-grid {
    max-width: 1200px;
    width: 100%;
    /* background-color: red; */
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.footer-box {
    /* background-color: blue; */
    flex: 1 1 150px;
    padding: 30px;
    border-radius: 20px;
    /* min-height: 250px; */
}

.form-box,
.newsletter-box {
    background: #600036;
    color: white;
    padding: 15px 20px;  /* mniejszy box */
    /* max-width: 300px;    ograniczona szerokość */
    margin-bottom: 0;    /* usuń duży margines dolny */
    justify-self: start; /* przesuwa box do lewej strony swojej kolumny */
    margin-left: -100px;
}
.newsletter-box{
    border-radius: 20px;
    flex: 2 1 300px;
}
.input-field,
.textarea-field {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    border: none;
}

.btn-submit,
.btn-ok {
    background: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    color: #600036;
    cursor: pointer;
}

.btn-ok:hover {
    background-color: #aa4c67;
    color: #ffffff;
}

h6 {
    text-align: center;
    padding: 20px;
    color: #4A4A4A;
    font-size: 14px;
    text-align: left;
    
}

.main-logo2-text {
    font-family: 'Mea Culpa', cursive;
    font-size: 20vw;     /* rozmiar litery */
    color: #652638;
    line-height: 1;      /* żeby nie odstawała od boxa */
    margin: -50px;
   
}

.copyright{
    padding: 10vh 0;
}