/** ------------- SEKCJE STRONY GŁÓWNEJ ------------ */

/* ------------- SEKCJA INTRO --------------- */

.intro-card-container {
    position: relative;
    width: 100%;
    height: 300px;
    max-width: 500px;
    margin-bottom: 60px;
}
.intro-card {
    position: absolute;
    width: 220px;
    height: 300px;
    /* box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5); */
    overflow: hidden;
    left: 50%;
    top: 50%;
    transform: translateY(-20px);
    margin-left: -110px; 
    margin-top: -150px; 
    z-index: 1;
    transform-origin: bottom center;     
}
.intro-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.intro-card:nth-child(1) {
    transform: rotate(-20deg) translateX(-60px) translateY(30px);
}
.intro-card:nth-child(2) {
    z-index: 3;
}
.intro-card:nth-child(3) {
    transform: rotate(20deg) translateX(60px) translateY(30px);
}
.intro #to-animate.animate.second, #to-animate.animate.second * {
    animation-delay: 500ms;
}
.intro #to-animate.animate.third, #to-animate.animate.third * {
    animation-delay: 1200ms;
}

@media screen and (max-width: 499px) {
    .intro-card-container {
        max-width: 100%;
        height: 240px;
    }
    .intro-card {
        width: 140px;
        height: 200px;
        margin-left: -70px;
        margin-top: -100px;
    }
    .intro-card:nth-child(1) {
        transform: rotate(-20deg) translateX(-45px) translateY(20px);
    }
    .intro-card:nth-child(3) {
        transform: rotate(20deg) translateX(45px) translateY(20px);
    }
}
@media screen and (min-width: 500px) and (max-width: 799px) {
    .intro-card-container {
        max-width: 400px;
        margin: auto;
        margin-bottom: 110px;
    }
    .intro .two-flex {
        max-width: 400px;
        margin: auto;
    }
}
@media screen and (min-width: 800px) and (max-width: 1099px) {
    .intro-card-container {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        height: 260px;
    }
    .intro-card {
        width: 160px;
        height: 220px;
        margin-left: -80px;
        margin-top: -110px;
    }
    .intro-card:nth-child(1) {
        transform: rotate(-18deg) translateX(-60px) translateY(25px);
    }
    .intro-card:nth-child(3) {
        transform: rotate(18deg) translateX(60px) translateY(25px);
    }
}

/* ------------- SEKCJA O NAS --------------- */

section.about {
    background-color: var(--light-grey);
    padding-bottom: 0;
}
.about .wrapper {
    position: relative;
    z-index: 2;
}
section.about .flex  {
    gap: var(--xs-spacing);
}
.about > .flex {
    gap: var(--s-spacing);
}
section.about p {
    max-width: 400px;
}
.about h4 {
    margin-bottom: 1.75rem;
}

@media screen and (max-width: 799px) {
    section.about > .flex {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--m-spacing);
    }
    section.about > .flex  {
        align-items: center;
    }
    .about > .flex {
        gap: var(--m-spacing);
        flex-direction: column;
    }
} 
@media screen and (min-width: 1200px) {
    section.about > .flex  {
        gap: var(--l-spacing);
    }
}

/* ------------- SEKCJA OFERTA -------------- */

section.oferta {
    background-color: var(--light-grey);
}
.oferta h4  {
    padding-top: var(--s-spacing);
    padding-bottom: var(--s-spacing);
    text-align: center;
    background-color: var(--light-grey);
    position: relative;
    z-index: 3;
}
.oferta a h4:hover, .oferta a h4:active, .oferta a h4:focus {
    text-decoration: underline;
}
.oferta .grid {
    row-gap: 0;
}
.oferta .grid .cell {
    gap: 0;
}
.oferta .grid img {
    position: relative;
    z-index: 1;
}
.oferta .separator-img {
    width: 12rem;
    padding: 0 var(--s-spacing);
}
@media screen and (max-width: 799px) {
    .oferta .separator-img {
        height: 8rem;
        max-height: 50vw;
        /* width: calc(100vw - var(--l-spacing) * 2); */
        margin: 0 auto;
    }
    .oferta .separator-img img {
        height: calc(100vw - var(--l-spacing) * 2);
        max-height: 300px !important;
        transform: rotate(90deg) scaleX(-100%);
        transform-origin: 50% 50%;
        width: auto;
        animation-name: none;
    }
} 

@media screen and (min-width: 800px) {
    .oferta .separator-img {
        padding: 0 var(--m-spacing);
    }
}
@media screen and (min-width: 1000px) {
    .oferta .wrapper, .about .wrapper {
        max-width: 900px !important;
        margin: 0 auto !important;
    }
}

/* -------------- DOSTAWA, ABONAMENTY I OPRAWA FLORYSTYCZNA ---------------- */

.oferta-reszta {
    padding-top: 0;
    padding-bottom: 0;
}
.oferta-reszta .wrapper {
    max-width: none;
    margin: 0 var(--l-spacing);
        gap: var(--m-spacing);
}
.oferta-reszta > * {
    padding-top: var(--xl-spacing);
    padding-bottom: var(--xl-spacing);
}
.oferta-reszta p:not(:first-child) {
    margin-top: var(--xs-spacing);
}
.oferta-reszta #dostawa {
    background-color: var(--light-grey);
}
.oferta-reszta h4 {
    margin-bottom: 0;
}
.oferta-reszta h3 {
    margin: var(--s-spacing) 0;
}
.oferta-reszta .flex-col .flex {
    margin-top: var(--s-spacing);
    flex-wrap: wrap;
}
.oferta-reszta .flex-col {
    max-width: 600px;
}
.oferta-reszta .flex-col .flex button {
    margin-top: 0;
}
.oferta-reszta .flex-col .flex h4 {
    font-size: 1rem;
}
.oferta-reszta .two-flex {
        justify-content: center;
    }

@media screen and (max-width: 699px) {
        .oferta-reszta .wrapper {
        margin: 0 var(--m-spacing);
    }
}
@media screen and (max-width: 799px) {
    #oprawa .two-flex {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}
@media screen and (min-width: 800px) and (max-width: 1365px) {
    .oferta-reszta .img-col {
        overflow: hidden;
    }
    .oferta-reszta .img-col img {
        width: auto;
        object-fit: cover;
        object-position: bottom bottom;
    }
    .oferta-reszta .two-flex {
        align-items: center;
        max-height: 600px;
    }
}

/* ------------- SEKCJA REALIZACJE -------------- */

section.realizacje {
    padding-top: 0;
    background-color: var(--light-grey);
}
section.realizacje > .flex > .container {
    padding: 0;
}
section.realizacje > .flex {
    justify-content: center;
}
/* karuzela sekcji realizacje */
#realizacje-carousel .slide {
    width: 200px;
    padding-right: 1.3rem;
}
#realizacje-carousel .cell > picture, #realizacje-carousel .cell > picture img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.realizacje-slider {
    transition: transform ease-out 500ms;    
    gap: 0;
}
section.realizacje button.flex {
    justify-content: space-between;
}
section.realizacje .grid {
    grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 900px) and (max-width: 1365px) {
    #realizacje-carousel .slide {
        width: 250px;
        padding-right: 1.8rem;
    }
    section.realizacje .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (min-width: 1366px) {
    #realizacje-carousel .slide {
        width: 300px;
        padding-right: 2rem;
    }
    section.realizacje .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ------------- SEKCJA DLACZEGO MY -------------- */


@media screen and (max-width: 359px) {
    section.why-us {
        display: none;
    }
}

@media screen and (min-width: 360px) {
    section.why-us {
        background-color: var(--medium);
    }
    section.why-us h2 {
        color: #fff;
        margin-bottom: var(--l-spacing);
    }
    section.why-us h4 {
        font-weight: 600;
    }
    .why-us .flex {
        justify-content: center;
        flex-wrap: wrap;
    }
    .why-us .flex .cell {
        background-image: url("./img/white-flower.svg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position:center;
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--m-spacing);
    }
    .why-us .flex .cell.even {
        background-image: url("./img/peach-flower.svg");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .why-us .flex .cell h4 {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 899px) {
    .why-us .wrapper {
        margin: 0 var(--s-spacing);
    }
    .why-us .flex .cell h4 {
        font-size: 1rem;
    }
}
@media screen and (min-width: 900px) {
    .why-us .flex .cell {
        width: 250px;
        height: 250px;
    }
}