@use "../utilities" as *;

/**----------------------------------------
START: Theme Slider CSS
----------------------------------------*/
.slider-section {
    overflow: hidden;
}

.bizan-slider {
    position: relative;
    z-index: 2;
}

.slider-item {
    position: relative;
    overflow: hidden;
    z-index: 2;
    .shapes{
        .shape{
            position: absolute;
            z-index: 2;
            &.shape-1{
                top: 0;
                left: 0;
            }
            &.shape-2{
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                z-index: 3;
            }
        }
        .color-shape{
            background-color: #064098;
            mix-blend-mode: multiply;
            width: 1045px;
            height: 1065px;
            display: block;
            position: absolute;
            top: -24%;
            left: -8%;
            border-radius: 60px;
            transform: rotate(45deg);
            z-index: 2;
        }
        .color-shape-2{
            background: linear-gradient(102.04deg, #1D304E 25.25%, rgba(25, 31, 41, 0) 58.79%);
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
        }
    }
    .slide-img-wrap{
        height: 860px;
        @include breakpoint(md){
            height: 700px;
        }
        @include breakpoint(sm){
            height: 600px;
        }
        img{
            width: 100%;
            object-fit: cover;
            height: 100%;
        }
    }
    .slider-content-wrap {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: 100%;
        width: 100%;
        z-index: 10;
        @include breakpoint(md){
            margin-top: 0;
        }
    }
}

.bizan-swiper-pagination{
    height: 100%;
    width: auto !important;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 50px !important;
    z-index: 2;
    @include breakpoint(xl){
        left: 25px!important;
    }
    @media (max-width: 1250px){
        display: none;
    }
    .swiper-pagination-bullet{
        background-color: transparent;
        width: 20px;
        height: 20px;
        position: relative;
        border-radius: 50%;
        opacity: 1;
        display: block;
        &.swiper-pagination-bullet-active{
            border: 1px solid var(--lt-color-common-white);
        }
        &:before{
            content: "";
            background-color: var(--lt-color-common-white);
            width: 5px;
            height: 5px;
            border: 1px solid var(--lt-color-common-white);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        &:not(:last-of-type){
            margin-bottom: 10px;
        }
    }
}

/* Text Animation */
.bizan-animation,
.bizan-animation span {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.bizan-animation span {
    display: inline-block;
}

/* Fade Effect */
.bizan-fadeIn {
    animation-name: asFadeIn;
}

@keyframes asFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bizan-fadeInLeft {
    animation-name: asFadeInLeft;
}

@keyframes asFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
    }
}

.bizan-fadeInRight {
    animation-name: asFadeInRight;
}

@keyframes asFadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
    }
}

.bizan-fadeInDown {
    animation-name: asFadeInTop;
}

@keyframes asFadeInTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
    }
}

.bizan-fadeInUp {
    animation-name: asFadeInBottom;
}

@keyframes asFadeInBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
    }
}

/* Move From Effect */
.bizan-moveFromLeft {
    animation-name: asMoveFromLeft;
}

@keyframes asMoveFromLeft {
    from {
        visibility: hidden;
        transform: translateX(-50px);
    }

    to {
        visibility: visible;
    }
}

.bizan-moveFromRight {
    animation-name: asMoveFromRight;
}

@keyframes asMoveFromRight {
    from {
        visibility: hidden;
        transform: translateX(50px);
    }

    to {
        visibility: visible;
    }
}

.bizan-moveFromTop {
    animation-name: asMoveFromTop;
}

@keyframes asMoveFromTop {
    from {
        visibility: hidden;
        transform: translateY(-50px);
    }

    to {
        visibility: visible;
    }
}

.bizan-moveFromBottom {
    animation-name: asMoveFromBottom;
}

@keyframes asMoveFromBottom {
    from {
        visibility: hidden;
        transform: translateY(50px);
    }

    to {
        visibility: visible;
    }
}

/* Blur Effect */

.bizan-blurIn {
    animation-name: asBlurIn;
}

@keyframes asBlurIn {
    from {
        filter: blur(20px);
        opacity: 0;
    }
}

.bizan-blurInLeft {
    animation-name: asBlurInLeft;
}

@keyframes asBlurInLeft {
    from {
        transform: translateX(50px);
        filter: blur(20px);
        opacity: 0;
    }
}

.bizan-blurInRight {
    animation-name: asBlurInRight;
}

@keyframes asBlurInRight {
    from {
        transform: translateX(-50px);
        filter: blur(20px);
        opacity: 0;
    }
}

.bizan-blurInTop {
    animation-name: asBlurInTop;
}

@keyframes asBlurInTop {
    from {
        transform: translateY(50px);
        filter: blur(20px);
        opacity: 0;
    }
}

.bizan-blurInBottom {
    animation-name: asBlurInBottom;
}

@keyframes asBlurInBottom {
    from {
        transform: translateY(-50px);
        filter: blur(20px);
        opacity: 0;
    }
}

/* Zoom Effect */
.bizan-zoomIn {
    animation-name: asZoomIn;
}

@keyframes asZoomIn {
    from {
        transform: scale(5);
        opacity: 0;
    }
}

.bizan-zoomInLeft {
    animation-name: asZoomInLeft;
}

@keyframes asZoomInLeft {
    from {
        transform: scale(5) translateX(-50%);
        opacity: 0;
    }
}

.bizan-zoomInRight {
    animation-name: asZoomInRight;
}

@keyframes asZoomInRight {
    from {
        transform: scale(5) translateX(50%);
        opacity: 0;
    }
}

.bizan-zoomInTop {
    animation-name: asZoomInTop;
}

@keyframes asZoomInTop {
    from {
        transform: scale(10) translateY(-50%);
        opacity: 0;
    }
}

.bizan-zoomInBottom {
    animation-name: asZoomInBottom;
}

@keyframes asZoomInBottom {
    from {
        transform: scale(10) translateY(50%);
        opacity: 0;
    }
}

/* Flip Effect */
.bizan-flipInTop {
    animation-name: asFlipInTop;
}

@keyframes asFlipInTop {
    from {
        transform: perspective(600px);
        opacity: 0;
    }

    30% {
        transform: perspective(600px) rotateX(180deg);
        transform-origin: 0 0;
        animation-timing-function: ease-out;
    }

    to {
        transform: perspective(600px);
    }
}

.bizan-flipInBottom {
    animation-name: asFlipInBottom;
}

@keyframes asFlipInBottom {
    from {
        transform: perspective(600px);
        opacity: 0;
    }

    30% {
        transform: perspective(600px) rotateX(180deg);
        transform-origin: bottom;
        animation-timing-function: ease-out;
    }

    to {
        transform: perspective(600px);
    }
}

/* Roll Effect */
.bizan-rollFromLeft {
    animation-name: asRollFromLeft;
}

@keyframes asRollFromLeft {
    from {
        transform: translateX(-60px) perspective(600px) rotateY(180deg);
        opacity: 0;
    }
}

.bizan-rollFromRight {
    animation-name: asRollFromRight;
}

@keyframes asRollFromRight {
    from {
        transform: translateX(60px) perspective(600px) rotateY(-180deg);
        opacity: 0;
    }
}

.bizan-rollFromTop {
    animation-name: asRollFromTop;
}

@keyframes asRollFromTop {
    from {
        transform: translateY(-60px) perspective(600px) rotateX(180deg);
        opacity: 0;
    }
}

.bizan-rollFromBottom {
    animation-name: asRollFromBottom;
}

@keyframes asRollFromBottom {
    from {
        transform: translateY(60px) perspective(600px) rotateX(-180deg);
        opacity: 0;
    }
}

/* Rotate Skate Effect */
.bizan-rotateSkateInRight {
    animation-name: asRotateSkateInRight;
}

@keyframes asRotateSkateInRight {
    from {
        transform: scaleX(0.2) translateX(100px);
        opacity: 0;
    }
}

.bizan-rotateSkateInLeft {
    animation-name: asRotateSkateInLeft;
}

@keyframes asRotateSkateInLeft {
    from {
        transform: scaleX(0.2) translateX(-100px);
        opacity: 0;
    }
}

.bizan-rotateSkateInTop {
    animation-name: asRotateSkateInTop;
}

@keyframes asRotateSkateInTop {
    from {
        transform: scaleY(0.2) translateY(-100px);
        opacity: 0;
    }
}

.bizan-rotateSkateInBottom {
    animation-name: asRotateSkateInBottom;
}

@keyframes asRotateSkateInBottom {
    from {
        transform: scaleY(0.2) translateY(100px);
        opacity: 0;
    }
}

/* PopUp Effect */
.bizan-popUp {
    animation-name: asPopUp;
}

@keyframes asPopUp {
    0% {
        visibility: hidden;
    }

    50% {
        transform: scale(1.1);
        visibility: visible;
    }
}

.bizan-popUpLeft {
    animation-name: asPopUpLeft;
}

@keyframes asPopUpLeft {
    0% {
        visibility: hidden;
    }

    50% {
        visibility: visible;
        transform: translateX(-20px) scale(1.1);
        animation-timing-function: ease-in;
    }
}

.bizan-popUpRight {
    animation-name: asPopUpRight;
}

@keyframes asPopUpRight {
    0% {
        visibility: hidden;
    }

    50% {
        visibility: visible;
        transform: translateX(20px) scale(1.1);
        animation-timing-function: ease-in;
    }
}

/* Kenburns Top */

.swiper-slide-active .kenburns-top {
	-webkit-animation-name: kenburns-top;
	animation-name: kenburns-top;
}

@-webkit-keyframes kenburns-top {
	0% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0);
		-webkit-transform-origin: 50% 16%;
		transform-origin: 50% 16%;
	}

	100% {
		-webkit-transform: scale(1.08) translateY(-15px);
		transform: scale(1.08) translateY(-15px);
		-webkit-transform-origin: top;
		transform-origin: top;
	}
}

@keyframes kenburns-top {
	0% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0);
		-webkit-transform-origin: 50% 16%;
		transform-origin: 50% 16%;
	}

	100% {
		-webkit-transform: scale(1.08) translateY(-15px);
		transform: scale(1.08) translateY(-15px);
		-webkit-transform-origin: top;
		transform-origin: top;
	}
}



/* !END: Theme Slider CSS */
