@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Inter:wght@100..900&display=swap');

html {
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    html {
        font-size: 58%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    html {
        font-size: 53%;
    }
}

@media (max-width: 575px) {
    html {
        font-size: 2.3vw;
    }
}

body {
    font-family: "Hind", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    background: #fff;
    color: rgba(34, 72, 73, 0.90);
}

body.modal-open {
    padding-right: 0 !important;
}

a,
button {
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
}

a,
a:hover {
    text-decoration: none;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

p {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
}

label {
    margin-bottom: 0;
}




/*==== nev area start===== */

.plant-slider-area-start {
    min-height: 100vh;
}

.main-content {
    position: relative;
}

.main-content .owl-theme .custom-nav {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
}

.main-content .owl-theme .custom-nav .owl-prev,
.main-content .owl-theme .custom-nav .owl-next {
    position: absolute;
    color: inherit;
    background: none;
    border: none;
    z-index: 100;
}

.main-content .owl-theme .custom-nav .owl-prev i,
.main-content .owl-theme .custom-nav .owl-next i {
    font-size: 2rem;
    color: #3E5B44;
    width: 5rem;
    height: 5rem;
    background-color: #DBDCA5;
    border-radius: 8px;
    background: #DBDCA5;
    box-shadow: 0px 34px 10px 0px rgba(0, 0, 0, 0.00), 0px 22px 9px 0px rgba(0, 0, 0, 0.01), 0px 12px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 6px 0px rgba(0, 0, 0, 0.09), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
    text-align: center;
    line-height: 4.9rem;

}

.main-content .owl-theme .custom-nav .owl-prev {
    left: 0;
}

.main-content .owl-theme .custom-nav .owl-next {
    right: 0;
}

.owl-carousel .owl-item img {
    height: 100vh;
    /* height: 100%; */
    object-fit: cover;
    /* width: 100%; */
}


/* /plant-left-content */

.plant-left-content {
    padding: 4rem;
    background: linear-gradient(180deg, rgba(62, 91, 68, 0.00) 0%, rgba(62, 91, 68, 0.20) 100%), #DFE1A8;
    min-height: 100vh;
}


.header-icon {
    text-align: right;
}

.header-icon a:last-of-type {
    display: none;
}


.plant-left-content h2 {
    color: #224849;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.plant-left-content p {
    color: rgba(34, 72, 73, 0.90);
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 239px 67px rgba(0, 0, 0, 0.00), 0px 153px 61px rgba(0, 0, 0, 0.01), 0px 86px 52px rgba(0, 0, 0, 0.05), 0px 38px 38px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.10);
    font-family: Hind;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: -0.3px;
}



.question-content {
    margin-top: 70px;
}

.question-content h3 {
    color: #224849;
    text-shadow: 0px 132px 37px rgba(0, 0, 0, 0.00), 0px 84px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.05), 0px 21px 21px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.10);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    margin-bottom: 10px;
}

.question-content span {
    color: #3F5B44;
    text-shadow: 0px 239px 67px rgba(0, 0, 0, 0.00), 0px 153px 61px rgba(0, 0, 0, 0.01), 0px 86px 52px rgba(0, 0, 0, 0.05), 0px 38px 38px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.10);
    font-family: Hind;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

.question-content ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 40px;
    margin-bottom: 18px;
}

.question-content ul li::before {
    content: "";
    width: 25px;
    height: 25px;
    border-radius: 4px;
    background: #3E5B44;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;

}

.p-active::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    border-radius: 50%;
    top: 3px;

    background: #708B19 !important;

}

.p-active {
    color: #fff;
    cursor: pointer;
    font-weight: 700 !important;
}

.p-active a {
    color: #708B19 !important;
}

.question-content ul li a {
    color: #3E5B44;
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 239px 67px rgba(0, 0, 0, 0.00), 0px 153px 61px rgba(0, 0, 0, 0.01), 0px 86px 52px rgba(0, 0, 0, 0.05), 0px 38px 38px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.10);
    font-family: Hind;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 181%;
    /* 27.15px */
    letter-spacing: -0.3px;
}

.question-btn {
    text-align: center;
    margin-top: 50px;
}

.question-btn a {
    text-align: center;
    color: #EBECB0;
    text-shadow: 0px 132px 37px rgba(0, 0, 0, 0.00), 0px 84px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.05), 0px 21px 21px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.10);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
    display: inline-block;
    padding: 15px 79px;
    border-radius: 10px;
    background: #3E5B44;
    box-shadow: 0px 110px 31px 0px rgba(0, 0, 0, 0.00), 0px 70px 28px 0px rgba(0, 0, 0, 0.01), 0px 40px 24px 0px rgba(0, 0, 0, 0.05), 0px 18px 18px 0px rgba(0, 0, 0, 0.09), 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    transition: .3s;
}

.question-btn a:hover {
    background-color: #19241B;
}

.options {
    display: flex;
    flex-direction: column;
}

.options label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer; /* Dodajemy kursor wskazujący na możliwość kliknięcia */
}

.options input[type="radio"] {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #3E5B44;
    margin-right: 10px; /* Dystans między radiem a tekstem */
    cursor: pointer; /* Dodajemy kursor wskazujący na możliwość kliknięcia */
}

/* Ukrywamy domyślny wygląd radia */
.options input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #3E5B44;
}

.options input[type="radio"]:checked {
    background-color: #000;
    border-color: #000;
}

/* Style dla poprawnych i niepoprawnych odpowiedzi */
.correct {
    background-color: #708B19 !important;
    border-color: #708B19 !important;
}

.incorrect {
    background-color: #8B1919 !important;
    border-color: #8B1919 !important;
}

.correct + span, .incorrect + span {
    color: #fff;
}






/*=== bottom-flag-inner=== */

.bottom-flag-inner {
    background-color: #fff;
    padding: 25px 0;
}

.flag-wrapper {
    max-width: 100%;
    margin: auto;
}

.flag-wrapper ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.flag-wrapper ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.flag-wrapper ul li img {
    max-height: 50px;
    height: 100%;
    width: auto;
}


.flag-wrapper-text {
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 132px 37px rgba(0, 0, 0, 0.00), 0px 84px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.05), 0px 21px 21px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.10);
    font-family: Hind;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 15px;
    line-height: 110%;
    /* 19.8px */
    letter-spacing: -0.18px;
}


.container {
    max-width: 1190px !important;
}

.bottom-flag-inner {
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 999;
}




/* =================
    gratul-area
    ========== */

.gratul-area {
    background: linear-gradient(180deg, rgba(62, 91, 68, 0.00) 0%, rgba(62, 91, 68, 0.20) 100%), #DFE1A8;
    height: 100vh;
    background-image: url(img/bg-img.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}

.gratulacje-content h2 {
    color: #224849;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
    padding-top: 300px;
    margin-bottom: 10px;
}

.gratulacje-content p {
    color: #224849;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.gratulacje-content h3 {
    color: #224849;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 100px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
}


.gratul--all-inner {
    padding: 35px 0;
    border-radius: 20px 20px 0 0;
    background: #3E5B44;
    position: absolute;
    width: 100%;
    bottom: 120px;
}

.gratul-content p {
    color: #E8E9AE;
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 132px 37px rgba(0, 0, 0, 0.00), 0px 84px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.05), 0px 21px 21px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.10);
    font-family: Hind;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    /* 22px */
    letter-spacing: -0.2px;
}

.header-homes-icon {
    display: none;
}





/*===== PLANSZA STARTOWA page start ===== */



.start-area {
    background: linear-gradient(180deg, rgba(62, 91, 68, 0.00) 0%, rgba(62, 91, 68, 0.20) 100%), #DFE1A8;
    min-height: 100vh;
    padding: 120px 30px;
}


.start-content {}

.start-content h2 {
    color: #224849;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 100px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
    margin-bottom: 99px;
}

.start-content p {
    color: #224849;
    leading-trim: both;
    text-edge: cap;
    font-family: Hind;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.77px;
    margin-bottom: 40px;

}

.startowa-btn {
    margin-top: 100px;
    margin-bottom: 50px;
}


.startowa-btn ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
   
}

.startowa-btn ul li {}

.startowa-btn ul li a {
    border-radius: 10px;
    background: #3E5B44;
    box-shadow: 0px 110px 31px 0px rgba(0, 0, 0, 0.00), 0px 70px 28px 0px rgba(0, 0, 0, 0.01), 0px 40px 24px 0px rgba(0, 0, 0, 0.05), 0px 18px 18px 0px rgba(0, 0, 0, 0.09), 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    width: 352px;
    height: 71px;
    padding: 9px 49px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #EBECB0;
    text-shadow: 0px 132px 37px rgba(0, 0, 0, 0.00), 0px 84px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.05), 0px 21px 21px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.10);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
}



.startowa-btn ul li a:hover {
    background-color: #19241B;
}


/*  =====Ścieżka Roślin==== */



.mapa-roslin-area {
    background: linear-gradient(180deg, rgba(62, 91, 68, 0.00) 0%, rgba(62, 91, 68, 0.20) 100%), #DFE1A8;

    min-height: 100vh;
}

.header {
    padding: 50px 60px;
}

.header ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header ul li {
    color: #224849;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.77px;
    margin-bottom: 100px;
}

.time-line-wrapper {
    max-width: 900px;
    margin: auto;
    margin-top: -100px;
}


/* time-line-inner */

.time-line-inner ul {
    display: flex;
    position: relative;
}

.time-m-img {
    position: absolute;
    left: 0px;
    right: 0px;
    text-align: center;
    margin: auto;
    top: 103px;
}

.tim-left-1 {
    margin-left: 150px;
    margin-top: 170px;
}

.time-rt {
    width: 50%;
    display: flex;
    justify-content: end;
}

.tt-right {
    margin-right: 150px;
}

.time-line-inner ul li p {
    color: #3D5B5A;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.77px;
    text-transform: capitalize;
    text-wrap: wrap;
    word-wrap: break-word;
    word-break: break-all !important;
}

.time-line-inner ul li span {
    color: #3D5B5A;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: capitalize;
    display: block;
    margin-bottom: 22px;
    text-wrap: wrap;
    word-wrap: break-word;
    word-break: break-all;
}

.time-images {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

.time-images img {
    border-radius: 50%;
    z-index: 9999;
    position: relative;
}


/* =========== */

.lt-st img {
    position: absolute;
    bottom: 50px;
    right: -100px;
}

.rt-st img {
    position: absolute;
    bottom: 88px;
    left: -100px;
}


/* ==================== */


.time-log-ul {
    margin-top: -510px;
}

.time-log-ul--2 {
    margin-top: -197px;
}


/* ========== */

.time-m-img--2 {
    position: absolute;
    left: 0px;
    right: 0px;
    text-align: center;
    margin: auto;
    top: 103px;
}

.tim-left-1--2 {
    margin-left: 0px;
    margin-top: 170px;
}


.time-rt--2 {
    width: 50%;
    display: flex;
    justify-content: end;
}

.tt-right--2 {
    margin-right: 0px;
}

.time-line-inner--2 ul li p {
    color: #3D5B5A;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.77px;
    text-transform: capitalize;

}

.time-line-inner--2 ul li span {
    color: #3D5B5A;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: capitalize;
    display: block;
    margin-bottom: 22px;

}

.time-images--2 {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

.time-images--2 img {
    border-radius: 50%;
    z-index: 9999;
    position: relative;
}




/* =========== */

.lt-st--2 img {
    position: absolute;
    bottom: 50px;
    left: 115px;

}

.rt-st--2 img {
    position: absolute;
    bottom: 88px;
    right: 105px;

}


.map-btm-flag {
    position: inherit;
    bottom: 0px;
}

main {
    overflow: hidden;
}

.blank-time-line {
    height: 200px;
}


.st-st___ img {
    position: absolute;
    bottom: 88px;
    left: -128px;
    width: 149px;
}


.time-m-img-last {
    position: absolute;
    left: 40px;
    right: 0px;
    text-align: center;
    margin: auto;
    top: 113px;
}

.gratul-btn {
    float: right;
    padding-right: 30px;
    margin-top: 50px;
}


.gratul-btn a {
    border-radius: 10px;
    background: #3E5B44;
    box-shadow: 0px 110px 31px 0px rgba(0, 0, 0, 0.00), 0px 70px 28px 0px rgba(0, 0, 0, 0.01), 0px 40px 24px 0px rgba(0, 0, 0, 0.05), 0px 18px 18px 0px rgba(0, 0, 0, 0.09), 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    width: 352px;
    height: 71px;
    padding: 9px 49px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #EBECB0;
    text-shadow: 0px 132px 37px rgba(0, 0, 0, 0.00), 0px 84px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.05), 0px 21px 21px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.10);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
}



/* Styl dla modal */
.modal-overlay {
    display: none; /* Ukrywamy modal domyślnie */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #A4B978 100%);
    padding: 20px;
    text-align: center;
    max-width: 800px;
    padding: 30px;
    border-bottom: none;
}

.modal-content p {
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 19.8px */
    letter-spacing: -0.18px;
    margin-bottom: 20px;
    font-size: 3rem;
}

.modal-buttons {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-top: 20px;
}

.modal-buttons button {
    border-radius: 10px;
    background: #3E5B44;
    box-shadow: 0px 110px 31px 0px rgba(0, 0, 0, 0.00), 0px 70px 28px 0px rgba(0, 0, 0, 0.01), 0px 40px 24px 0px rgba(0, 0, 0, 0.05), 0px 18px 18px 0px rgba(0, 0, 0, 0.09), 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    width: 206px;
    height: 60px;
    padding: 9px 49px;
    justify-content: center;
    align-items: center;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 3rem;
}

.roscinno-btn {
    text-align: center;
    color: #EBECB0;
    text-shadow: 0px 132px 37px rgba(0, 0, 0, 0.00), 0px 84px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.05), 0px 21px 21px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.10);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.77px;
    text-transform: uppercase;
    display: inline-block;
    padding: 15px 79px;
    border-radius: 10px;
    background: #3E5B44;
    box-shadow: 0px 110px 31px 0px rgba(0, 0, 0, 0.00), 0px 70px 28px 0px rgba(0, 0, 0, 0.01), 0px 40px 24px 0px rgba(0, 0, 0, 0.05), 0px 18px 18px 0px rgba(0, 0, 0, 0.09), 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    transition: .3s;
    margin: auto;
}
.roscinno-btn:hover {
    color: #EBECB0;
    background-color: #19241B;
}

#quizJoinModal .modal-content {
    margin: auto;
}
#quizJoinModal h3 {
    font-size: calc(1.7rem + 0.6vw);
}
body.modal-open {
    overflow: hidden; /* Wyłączamy przewijanie, gdy modal jest otwarty */
}

.tt-right-short-text {
    position: absolute;
    margin-top: 150px;
    max-width: 280px;
    text-align: left;
}

@media (min-width: 768px){
    .tt-right-short-text {
        min-width: 280px;
    }

    
}

.tim-left-n-1 {
    margin-right: 150px;
    margin-top: 240px;
}

.tim-right-n-1 {
    margin-top: -50px;
}

.tim-left-n-1 .tt-right-short-text-left {
    margin-left: -150px;
    max-width: 280px;
    text-align: right;
    margin-top: -10px;
}

.tim-left-1--2 .tt-right-short-text-left {
    margin-left: 0px;
    max-width: 280px;
    text-align: right;
    margin-top: -10px;
}

li.tim-left-1--2 {
    margin-top: 240px;
}

li.time-rt--2 {
    margin-top: -55px;
}

ul.time-log-ul--2 {
    margin-top: -260px;
} 

.last-rt-st img {
    bottom: 88px;
    left: -125px; 
}

.tim-right-n-last {
    margin-top: 50px;
}