.swiperMiddelBoxType2 {
    width: 100%;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    direction: rtl !important;
}

    .swiperMiddelBoxType2 .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
    }

        .swiperMiddelBoxType2 .swiper-slide img {
            display: block;
            width: 100%;
            z-index: 0;
            margin: auto;
            height: auto;
            max-height: 100%;
            width: auto;
            max-width: 100%;
            zoom: 3;
        }

        .swiperMiddelBoxType2 .swiper-slide label {
            width: 80%;
            margin: 0px 30px;
            position: absolute;
            top: 65%;
            color: var(--darkColor1);
            font-size: 0px;
            z-index: 2;
            -webkit-transition: all 300ms ease;
            transition: all 400ms ease;
        }

        .swiperMiddelBoxType2 .swiper-slide #transparentLayoutId {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1;
            top: 0;
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }

        .swiperMiddelBoxType2 .swiper-slide #borderLayoutId {
            border-radius: 5px;
            border: solid 0px var(--darkColor1);
            position: absolute;
            height: 90%;
            width: 90%;
            z-index: 1;
            top: 0;
            margin: 15px;
            -webkit-transition: all 300ms ease;
            transition: all 100ms ease;
        }

        .swiperMiddelBoxType2 .swiper-slide:hover #transparentLayoutId {
            background-color: #ffffff94;
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }

        .swiperMiddelBoxType2 .swiper-slide:hover #borderLayoutId {
            border: solid 8px var(--darkColor1);
            -webkit-transition: all 300ms ease;
            transition: all 100ms ease;
        }

        .swiperMiddelBoxType2 .swiper-slide:hover label {
            width: 80%;
            margin: 0px 30px;
            position: absolute;
            top: 45%;
            z-index: 2;
            font-size: 25px;
            font-weight: 700;
            text-shadow: 0px 0px 1px black;
            text-transform: uppercase;
        }



    .swiperMiddelBoxType2 .swiper-btn {
        background-color: white;
        border-radius: 150px;
        height: 40px;
        width: 40px;
        border: none;
        box-shadow: 0px 0px 5px black;
        position: absolute;
        top: 50%;
        z-index: 5;
    }

    .swiperMiddelBoxType2 .btn-pull-right {
        right: 50px;
    }

    .swiperMiddelBoxType2 .btn-pull-left {
        left: 50px;
    }

    .swiperMiddelBoxType2 .arrow {
        position: absolute;
        top: 50%;
        width: 2rem;
        height: 2rem;
        background: transparent;
        border-top: 0.4rem solid #d9d9d9;
        border-right: 0.4rem solid #d9d9d9;
        box-shadow: 5px -5px 5px #727272;
        z-index: 5;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
    }

        .swiperMiddelBoxType2 .arrow.left {
            left: 50px;
            -webkit-transform: translate3d(0, -50%, 0) rotate(-135deg);
            transform: translate3d(0, -50%, 0) rotate(-135deg);
        }

        .swiperMiddelBoxType2 .arrow.right {
            right: 50px;
            -webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
            transform: translate3d(0, -50%, 0) rotate(45deg);
        }

        .swiperMiddelBoxType2 .arrow:hover {
            border-top: .4rem solid var(--darkColor1);
            border-right: .4rem solid var(--darkColor1);
            box-shadow: .2rem -.2rem 0 black;
            cursor:pointer;
        }

            .swiperMiddelBoxType2 .arrow:hover.left {
                left: 50px;
            }

            .swiperMiddelBoxType2 .arrow:hover.right {
                right: 50px;
            }