.swiper {
    position: relative;
    width: 100%;
    height: 85vh;
    top: 0;
}

.swiper-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../images/white-pattern.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    transition: all 0.4s ease-in-out;
    height: 11%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-wrapper {
    position: absolute;
    top: 50%;
    left: 10%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: "\f054" !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    font-size: 15px !important;
    color: var(--grey-300);
}

.swiper-button-prev:after {
    content: "\f053" !important;
}

:is(.swiper-button-next, .swiper-button-prev) {
    transition: all 0.4s ease-in-out;
    width: 35px !important;
    height: 35px !important;
    background: rgba(255, 255, 255, .2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

:is(.swiper-button-next, .swiper-button-prev):hover {
    transform: scale(1.3);
}

.slider-text {
    opacity: 0;
    visibility: hidden;
}

.slider-text.active {
    opacity: 1;
    visibility: visible;
}

/* slider 1 css start */
.swiper-slide--1 {
    background: rgba(225, 231, 217);
}

.slider-1--img-1 {
    position: absolute !important;
    left: 0;
    top: 0;
    width: auto !important;
}

.slider-1--img-2-wrapper {
    position: absolute;
    right: -120px;
    top: 0;
    opacity: 1;
    visibility: visible;
    transition: all .4s ease-in-out;
}

.slider-1--img-2-wrapper>:first-child {
    position: relative;
    top: 0;
    right: 0;
    height: auto !important;
    width: auto !important;
}

.slider-1--img-2-wrapper>:last-child {
    position: absolute;
    top: 0;
    right: 30%;
    height: auto !important;
    width: auto !important;
}

.slider-1--img-3 {
    position: absolute !important;
    right: 0;
    bottom: -13px;
    height: 35% !important;
    width: auto !important;
    z-index: 800;
}

.slider-1--img-4 {
    position: absolute !important;
    height: auto !important;
    width: auto !important;
}

.slider-1--img-5 {
    position: absolute !important;
    top: 0;
    left: 40%;
    height: 40% !important;
    width: auto !important;
    animation: leafFall 4s ease-in-out infinite;
}

@keyframes leafFall {
    0% {
        transform: translateX(-50%) translateY(-80px);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(500px);
        opacity: 0;
    }
}

/* slider 1 css end */

/* slider 2 css start */
.swiper-slide--2 {
    background: rgba(153, 8, 5);
}

.slider-2--img-2 {
    position: absolute !important;
    right: -50px;
    top: -70px;
    height: auto !important;
    width: auto !important;
    opacity: 1;
    visibility: visible;
    transition: all .4s ease-in-out;
    z-index: 800 !important;
}

.slider-1--img-1.slider-2--img-1 {
    position: absolute !important;
    top: -10px;
    left: 0;
    height: auto;
    width: auto !important;
}

.slider-2--img-3 {
    position: absolute !important;
    right: 0;
    bottom: -27px;
    height: 40% !important;
    width: auto !important;
    z-index: 800;
}

.slider-1--img-4.slider-2--img-4 {
    animation: fadeInDownSlider2 3s infinite;
}

@keyframes fadeInDownSlider2 {
    0% {
        opacity: 0;
        top: -50%;
    }

    100% {
        opacity: 1;
        top: 50%;
    }
}

/* slider 2 css end */

/* slider 3 css start */
.swiper-slide--3 {
    background-image: url(../images/slider-3/zemin-resim-ben-organik-siseli.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.slider-3--img-3-wrapper {
    position: absolute !important;
    right: 5%;
    bottom: 18%;
    height: auto !important;
    width: auto !important;
}

.slider-3--img-3-wrapper>:last-child {
    position: absolute !important;
    right: 33%;
    top: -18%;
    width: auto !important;
    height: auto !important;
    animation: slide 3s ease-in-out infinite;
}

@keyframes slide {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

/* slider 3 css end */