.bdt-prime-slider-tango {
    position: relative;
    margin-bottom: clamp(2.5rem, 6vw, 3.755rem);

    .bdt-item {
        position: relative;
        clip-path: inset(10% 0 10% 0);
        overflow: hidden;
        height: clamp(25rem, 40vw, 31.25rem);
        transition: clip-path .4s cubic-bezier(.3, 0, .3, 1), transform .4s cubic-bezier(.3, 0, .3, 1);

        &.swiper-slide-active {
            clip-path: inset(0 0 0 0) !important;

            .bdt-image-wrap {
                &::before {
                    opacity: 1;
                    transition-delay: .6s;
                }
            }

            .bdt-content-wrap {
                opacity: 1;
                transition-delay: .5s;
            }

            .bdt-subtitle,
            .bdt-title {
                transform: translateX(0);
                transition-delay: .5s;
            }
        }
    }

    .bdt-image-wrap {
        width: 100%;
        height: 100%;
        position: relative;
        vertical-align: middle;

        &::before {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity .5s cubic-bezier(.3, 0, .3, 1), background-image .5s cubic-bezier(.3, 0, .3, 1);
        }
    }

    .bdt-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: middle;
    }

    .bdt-content-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        padding: 50px;
        opacity: 0;
        transition: opacity .3s cubic-bezier(.3, 0, .3, 1);
    }

    .bdt-title {
        margin: 0;
        font-size: clamp(1.875rem, 5vw, 3.125rem);
        color: #eff1ff;
        font-weight: 700;
        text-transform: capitalize;
        transform: translateX(50px);
        transition: transform .3s cubic-bezier(.3, 0, .3, 1);
        position: relative;
        z-index: 1;

        a {
            color: #eff1ff;
            text-decoration: none;
            transition: all .3s ease;

            &:hover {
                color: rgba(204, 6, 6, 0.938);
            }
        }
    }

    .bdt-subtitle {
        font-size: clamp(0.75rem, 1.5vw, 0.938rem);
        text-transform: uppercase;
        color: #e6e7ed;
        margin-bottom: 6px;
        transform: translateX(-50px);
        transition: transform .3s cubic-bezier(.3, 0, .3, 1);
        display: inline-block;
    }

    .bdt-arrows-bottom {
        &.bdt-navigation-arrows {
            position: absolute;
            bottom: clamp(1.875rem, 5vw, 3.125rem);
            left: clamp(1.875rem, 5vw, 3.125rem);
        }
    }

    .bdt-arrows-center {
        &.bdt-navigation-arrows {

            .bdt-navigation-next,
            .bdt-navigation-prev {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);

                i {
                    transform: scale(1) translateX(0px);
                }
            }

            .bdt-navigation-prev {
                left: 20px;

                &:hover {
                    i {
                        transform: scale(1.2) translateX(-5px);
                    }
                }
            }

            .bdt-navigation-next {
                right: 20px;

                &:hover {
                    i {
                        transform: scale(1.2) translateX(5px);
                    }
                }
            }
        }
    }

    .bdt-navigation-arrows {

        .bdt-navigation-next,
        .bdt-navigation-prev {
            font-size: clamp(1.25rem, 3.5vw, 1.875rem);
            padding: 0;
            color: #495157;
            transition: all .3s ease;
            z-index: 1;

            svg {
                width: 1em;
            }

            i {
                display: inline-flex;
                transition: all .3s ease;
            }
        }

        .bdt-navigation-next {
            &:hover {
                i {
                    transform: scale(1.2) translateX(5px);
                }
            }
        }

        .bdt-navigation-prev {
            margin-right: 10px;

            &:hover {
                i {
                    transform: scale(1.2) translateX(-5px);
                }
            }
        }
    }

    .swiper-pagination {
        bottom: 0 !important;
        left: 50%;
        transform: translateX(-50%) translateY(clamp(2.5rem, 6vw, 3.755rem));
        display: flex;
        align-items: center;
        width: auto !important;

        .swiper-pagination-bullet {
            width: clamp(1.875rem, 4vw, 3.125rem);
            height: 1px;
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
            outline: none;
            opacity: 1;
            margin: 0;
            transition: .3s ease;

            &.swiper-pagination-bullet-active {
                background: #495157;
                height: 3px;
            }
        }
    }
}

.bdt-item-up-down-yes {
    .bdt-prime-slider-tango {
        .bdt-item {

            &.swiper-slide-next,
            &.swiper-slide-duplicate-next {
                clip-path: inset(10% 0 5% 0);
            }

            &.swiper-slide-prev,
            &.swiper-slide-duplicate-prev {
                clip-path: inset(5% 0 10% 0);
            }
        }
    }
}

.bdt-tango-item-wrap-link {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.rtl {
    .bdt-prime-slider-tango {
        .bdt-arrows-center {
            &.bdt-navigation-arrows {
                .bdt-navigation-prev {
                    right: 20px;
                    left: auto;
                }
    
                .bdt-navigation-next {
                    left: 20px;
                    right: auto;
                }
            }
        }
    
        .bdt-navigation-arrows {
            .bdt-navigation-prev {
                margin-left: 10px;
                margin-right: auto;
            }
        }
        .swiper-pagination {
            right: 50%;
            left: auto;
            transform: translateX(50%) translateY(clamp(2.5rem, 6vw, 3.755rem));
        }
    }
}