.swiper-container {
    z-index: 0;
}
.swiper-pagination {
    .swiper-pagination-bullet {
        background-color: var(--finwallapp-theme-color);
    }
}

.pagination-rightnumber {
    position: absolute;
    top: 45%;
    right: 15px;
    left: auto !important;
    width: auto;
    text-align: right;

    .swiper-pagination-bullet {
        background: none !important;
        color: var(--finwallapp-theme-text-secondary);
        height: 30px;
        line-height: 30px;
        position: relative;
        display: block;
        width: 100%;
        opacity: 0.5;


        &::after {
            content: "";
            height: 2px;
            width: 15px;
            border-radius: 2px;
            background-color: var(--finwallapp-theme-text-secondary);
            display: block;
            position: absolute;
            right: 15px;
            top: 49%;
        }

        &.swiper-pagination-bullet-active {
            color: var(--finwallapp-theme-color);
            opacity: 1;
            &:after {
                width: 30px;
                background-color: var(--finwallapp-theme-color);
            }
        }
    }
}

.introswiper {
    height: 100%;
    .swiper-wrapper {
        .swiper-slide {
            overflow: hidden;
        }
    }
    .text {
        font-size: 84px;
        opacity: 0.2;
        color: var(--finwallapp-theme-text);
        position: absolute;
        text-transform: uppercase;
        font-weight: 700;
        top: 35%;
        right: 0;
    }

    .slidebg {
        right: -45px;
        position: relative;
    }
    .slideimg {
        margin-left: -145px;
        position: absolute;
        left: 0;
        top: -30px;
    }
    .circle {
        &.one {
            left: 58%;
            top: 4%;
        }
        &.two {
            right: 6%;
            top: 48%;
            z-index: 1;
        }
        &.three {
            left: 24%;
            top: 72%;
        }
    }

    .swiper-slide-two {
        .text {
            top: 6%;
            right: 0;
        }

        .slidebg {
            right: 130px;
            position: relative;
        }
        .slideimg {
            margin: 0 auto;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 5px;
            top: auto;
        }
        .circle {
            &.one {
                left: 8%;
                top: 47%;
            }
            &.two {
                right: 14%;
                top: 8%;
                z-index: 1;
            }
            &.three {
                left: 65%;
                top: 80%;
                z-index: 1;
            }
        }
    }
    .swiper-slide-three {
        .text {
            font-size: 74px;
            top: 15%;
            right: 0;
            left: 0;
        }

        .slidebg {
            right: 40px;
            position: relative;
            margin-bottom: 60px;
        }
        .slideimg {
            margin: 0;
            position: absolute;
            right: 0;
            left: auto;
            top: 3%;
        }
        .slideimg2 {
            margin: 0;
            position: absolute;
            left: -20px;
            bottom: 0px;
        }
        .circle {
            &.one {
                left: 8%;
                top: 40%;
            }
            &.two {
                right: 10%;
                top: 58%;
                z-index: 1;
            }
            &.three {
                left: 30%;
                top: 0%;
                z-index: 1;
            }
        }
    }
}
.cardswiper {
    .swiper-wrapper {
        .swiper-slide {
            width: 280px;
            padding: 0 5px 10px 15px;

            &:last-child {
                padding-right: var(--finwallapp-padding);
            }

            &:first-child {
                padding-left: var(--finwallapp-padding);
            }
            .card {
                min-height: 150px;
            }
        }
    }
}
.connectionwiper {
    .swiper-wrapper {
        .swiper-slide {
            width: auto;
            padding: 0 5px 10px 15px;

            &:last-child {
                padding-right: var(--finwallapp-padding);
            }

            &:first-child {
                padding-left: var(--finwallapp-padding);
            }
        }
    }
}

.summayswiper {
    .swiper-wrapper {
        .swiper-slide {
            width: 200px;
            padding: 0 5px 10px 15px;

            &:last-child {
                padding-right: var(--finwallapp-padding);
            }

            &:first-child {
                padding-left: var(--finwallapp-padding);
            }
        }
    }
}
.tagsswiper {
    .swiper-wrapper {
        .swiper-slide {
            width: auto;
            padding: 0 5px 10px 5px;

            &:last-child {
                padding-right: var(--finwallapp-padding);
            }

            &:first-child {
                padding-left: var(--finwallapp-padding);
            }
        }
    }
}

@media screen and (max-width: 340px) {
    .introswiper {
        .slidebg {
            max-height: 150px;
        }
        
        .swiper-slide {
            .slideimg {
                max-height: 200px;
            }
        }
        
        .swiper-slide-two {
            .slideimg {
                max-height: 120px;
            }
        }
        .swiper-slide-three {
            .slideimg {
                max-height: 70px;
            }
            .slideimg2 {
                max-height: 180px;
            }
        }
    }
}