/* Sekcja: gallery_carousel_text - pełny CSS sekcji (zapis zagnieżdżony).
   Dawne zmienne SCSS: $light-bg/$primary-text/$primary-title/$transparent-color2/
   $transparent-color3/$dark-bg2/$element1-color -> odpowiednie var(--...). */

.carousel-text {
    .container-fluid {
        padding: 0;
    }

    .wrapper {
        position: relative;
        display: flex;
        overflow: hidden;
        flex-direction: row-reverse;
    }

    .carousel-part {
        width: calc(43.5% + 100px);
        position: absolute;
        left: 0;
        height: 850px;

        .gallery-carousel-text,
        .owl-stage-outer,
        .owl-stage,
        .owl-item,
        .one-image {
            height: 100%;
        }

        .one-image {
            display: block;

            .image {
                height: 100%;
            }
        }

        .owl-carousel {
            .owl-item {
                img {
                    height: 100%;
                    object-fit: cover;
                    border-radius: var(--image-border-radius);
                }
            }
        }
    }

    .text {
        width: 57.5%;
        z-index: 2;
        max-height: 850px;

        p,
        ul li,
        ol li {
            text-align: center;
            width: 672px;
            max-width: 100%;
            margin: 0 auto;
            margin-bottom: 15px;
            color: var(--element1-text);
            font-size: 1.1875rem;
        }

        a {
            font-size: 1.1875rem;
            color: var(--element1-link);

            &:hover {
                color: var(--element1-link-hover);
            }
        }

        .buttons {
            margin-top: 40px;
            margin-bottom: 25px;

            .btn {
                font-size: 1rem;
            }
        }

        .text-wrapper {
            padding: 100px 80px;
        }

        .text-inner {
            height: 100%;
            background: #F4F0EA;
            background: linear-gradient(180deg, var(--light-bg) 0%, #fafafa00 100%);
        }
    }

    .icons {
        border-top: 1px solid #e5e2dc;
        padding-top: 40px;
        max-width: 100%;
        width: 765px;

        .foto-icon {
            .image {
                display: flex;
                justify-content: center;
            }

            img {
                width: 32px;
                height: 32px;
                object-fit: contain;
                object-position: center;
                border-radius: var(--image-border-radius);
            }
        }

        h4 {
            font-size: 0.9375rem;
            color: var(--primary-text);
            text-align: center;
            margin-top: 20px;
            margin-bottom: 13px;
        }

        p {
            font-size: 0.8125rem;
            color: var(--transparent-color3);
            text-align: center;
        }
    }

    .title {
        margin-bottom: 30px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;

        h3 {
            color: var(--element1-title);

            span {
                color: var(--element1-highlighted-title);
            }
        }

        .main-title {
            font-family: 'Lato', sans-serif;
            font-size: 4.0625rem;
            color: var(--primary-title);
            font-weight: 700;
            text-align: center;
            line-height: 1;
            margin: 0;

            span {
                color: var(--element1-color);
            }
        }

        .upper-title {
            text-align: center;
            font-size: 0.8125rem;
            display: flex;
            background-color: var(--dark-bg2);
            color: var(--transparent-color3);
            font-weight: 500;
            padding: 10px 12px;
            border: 1px solid var(--transparent-color2);
            border-radius: 50px;
            margin: 0;
            margin-bottom: 30px;

            img {
                object-fit: contain;
                max-width: 16px;
                margin-right: 7px;
            }

            .image {
                margin: 0;
            }
        }
    }
}

@media (max-width: 991.5px) {
    .carousel-text {
        &.reverse {
            .wrapper {
                flex-direction: column-reverse;
            }
        }

        .wrapper {
            flex-direction: column-reverse;
        }

        .icons {
            padding-top: 30px;
            justify-content: center;
            width: 100%;

            .text-icon {
                p,
                ul li,
                ol li,
                a {
                    font-size: 0.8125rem;
                }

                h4 {
                    font-size: 0.875rem;
                    margin-top: 9px;
                    margin-bottom: 8px;
                }
            }
        }

        .text {
            width: 100%;
            margin-right: 0;

            .text-inner {
                transform: skew(0deg, 0deg);
            }

            .buttons {
                margin-top: 18px;
                margin-bottom: 30px;
            }

            .text-wrapper {
                transform: skew(0deg, 0deg);
            }
        }

        .title {
            margin-bottom: 25px;
        }
    }
}

@media (max-width: 575.5px) {
    .carousel-text {
        .icons {
            margin: 0 !important;
        }

        .text {
            p,
            ul li,
            ol li,
            a {
                font-size: 0.875rem;
            }

            .text-wrapper {
                padding: 25px 15px;
            }
        }

        .title {
            .main-title {
                font-size: 2rem;
                width: 290px;
                max-width: 100%;
            }
        }

        .carousel-part {
            height: 80vw;
            width: 100%;
        }
    }
}

@media (min-width: 576px) and (max-width: 767.5px) {
    .carousel-text {
        .text {
            p,
            ul li,
            ol li,
            a {
                font-size: 0.875rem;
            }

            .text-wrapper {
                padding: 35px 50px;
            }
        }

        .title {
            .main-title {
                font-size: 2.1875rem;
                width: 390px;
                max-width: 100%;
            }
        }

        .carousel-part {
            height: 58vw;
            width: 100%;
        }
    }
}

@media (min-width: 768px) and (max-width: 991.5px) {
    .carousel-text {
        .text {
            p,
            ul li,
            ol li,
            a {
                font-size: 1.0625rem;
            }

            .text-wrapper {
                padding: 35px 50px;
            }
        }

        .title {
            .main-title {
                font-size: 2.1875rem;
                width: 411px;
                max-width: 100%;
            }
        }

        .carousel-part {
            height: 58vw;
            width: 100%;
        }
    }
}

@media (min-width: 992px) and (max-width: 1199.5px) {
    .carousel-text {
        .icons {
            padding-top: 30px;
            justify-content: center;

            .text-icon {
                p,
                ul li,
                ol li,
                a {
                    font-size: 0.8125rem;
                }

                h4 {
                    font-size: 0.875rem;
                    margin-top: 9px;
                    margin-bottom: 8px;
                }
            }
        }

        .text {
            p,
            ul li,
            ol li,
            a {
                font-size: 1.0625rem;
            }

            .buttons {
                margin-top: 18px;
            }

            .text-wrapper {
                padding: 35px 50px;
            }
        }

        .title {
            margin-bottom: 25px;

            .main-title {
                font-size: 2.5rem;
            }
        }

        .carousel-part {
            height: 665px;
        }
    }
}

@media (min-width: 1200px) and (max-width: 1579.5px) {
    .carousel-text {
        .icons .text-icon {
            p,
            ul li,
            ol li,
            a {
                font-size: 0.8125rem;
            }

            h4 {
                font-size: 0.875rem;
            }
        }

        .text {
            p,
            ul li,
            ol li,
            a {
                font-size: 1.0625rem;
            }

            .buttons {
                margin-top: 25px;
            }

            .text-wrapper {
                padding: 35px 50px;
            }
        }

        .title {
            .main-title {
                font-size: 3.0625rem;
            }
        }

        .carousel-part {
            height: 665px;
        }
    }
}

@media (min-width: 1580px) {
    .carousel-text {
        .text {
            .text-wrapper {
                padding-left: calc(50vw - 800px);
            }
        }
    }
}