.allStoryIndex{
    margin: auto;
    .title2{
        margin-bottom: 1rem;
        font-weight: 900;
        color: black;
        font-size: 1.5rem;
    }
    .swiper-slide{
        transform: unset !important;
        .story{
            position: relative;
            border-radius: 5px;
            width: 100%;
            text-align: center;
            background-color: white;
            background-size: cover;
            background-position: center;
            cursor: pointer;
            overflow: hidden;
            img,video{
                height: 15rem;
                width: 100%;
                object-fit: cover;
            }
            .video-container,.pic{
                display: grid;
                height: 100%;
            }
            .videoI{
                position: absolute;
                top: .5rem;
                left: .5rem;
                svg{
                    width: 2rem;
                    height: 2rem;
                    fill: white;
                }
            }
            .title2{
                text-align: center;
                font-size: .85rem;
                font-weight: 500;
                color: $text2;
                margin: .5rem 0;
                white-space: pre-line;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                box-orient: vertical;
                -webkit-box-orient: vertical;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &:before{
                opacity: 0;
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                z-index: 3;
                padding: .5rem 0;
                font-size: .85rem;
                font-weight: 500;
                text-align: center;
                content: "مشاهده استوری";
                background: $green;
                color: white;
                transition: all .3s ease-in-out;
            }
            &:hover{
                &:before{
                    opacity: 1;
                }
            }
        }
        .showStory{
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 4000;
            .show1 {
                width: 30%;
                margin: auto;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: white;
                overflow: hidden;
                height: 75%;
                .titleS{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: .5rem;
                    height: 4rem;
                    .profile{
                        display: flex;
                        gap: .5rem;
                        align-items: center;
                        .pic{
                            overflow: hidden;
                            border-radius: 50%;
                            img{
                                width: 3rem;
                                height: 3rem;
                                object-fit: cover;
                            }
                        }
                        .detail{
                            .name{
                                font-size: .9rem;
                                font-weight: 300;
                                color: black;
                            }
                            .city{
                                font-size: .8rem;
                                font-weight: 300;
                                color: $text2;
                            }
                        }
                    }
                    i{
                        display: grid;
                        align-items: center;
                        cursor: pointer;
                        svg{
                            width: 1.5rem;
                            height: 1.5rem;
                            fill: $text1;
                        }
                    }
                }
                .body{
                    height: calc(100% - 6.5rem);
                    .video-container{
                        height: 100%;
                    }
                    img,video{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .send{
                    display: grid;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    padding: .3rem .5rem;
                    text-align: center;
                    background: $green;
                    color: white;
                    font-size: 1rem;
                    font-weight: 300;
                    height: 2.5rem;
                }
            }
        }
    }
    .swiper{
        z-index: unset !important;
    }
    .swiper-wrapper{
        z-index: unset !important;
    }
    .swiper-button-next,.swiper-button-prev{
        padding: .5rem;
        background: $allBack;
        width: 2rem;
        height: 100%;
        top: 0;
        bottom: 0;
        margin-top: 0;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
        &:before,&:after{
            font-size: 1.5rem;
            color: $green;
        }
    }
    .swiper-button-prev{
        right: 0 !important;
    }
    .swiper-button-next{
        left: 0 !important;
    }
    @media (max-width: 930px) {
        .swiper-slide{
            .showStory{
                .show1 {
                    width: 98%;
                }
            }
        }
    }
}
