/*********************************
/* Banner Section Start
*********************************/

.bannerSlide__wrapper {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 280px 0px;
    // position: relative;
    position: absolute;
    top: 0;

    @include respond (tabland) {
        padding: 200px 0;
    }
    @include respond (phone-sm) {
        padding: 180px 0;
    }

}

.hero__text {
    max-width: 570px;
    position: relative;
    z-index: 9;

    @include respond (phone) {
        max-width: 100%;
        text-align: center;

        .btn__group {
            justify-content: center;
        }
    }
    // &::after {
    //     content: "";
    //     position: absolute;
    //     background: url('../images/banner/banner-bg-ellips.svg');
    //     width: 100%;
    //     height: 100%;
    //     top: 0;
    //     left: 0;
    //     background-position: center;
    //     background-size: contain;
    //     border-radius: 50%;
    //     mix-blend-mode: overlay;
    //     z-index: -1;
    // }
    
    .title {
        font-family: var(--font-default);
        font-size: 69.33px;
        font-weight: var(--font-bold);
        line-height: 81.25px;
        color: var(--color-white);
        margin: 16px 0 22px;

        @include respond(xl) {
            font-size: 55px;
            line-height: 70px;
        }
        @include respond(phone-sm) {
            font-size: 46px;
            line-height: 50px;
        }
    }
    .desc {
        font-family: var(--font-roboto);
        // font-size: 18.67px;
        font-size: 16px;
        line-height: 26px;
        font-weight: var(--font-regular);
        // line-height: 29.33px;
        color: var(--color-content);
        margin-bottom: 21px;

		@include respond(phone-sm) {
			font-size: 16px;
			line-height: 24px;
		}
	}
	.btn__group {
		margin-top: 32px;
		display: flex;
		align-items: center;
		gap: 25px;

    }
}

.video__tag {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    a,
    span {
        font-family: var(--font-default);
        font-size: 14px;
        font-weight: var(--font-regular);
        line-height: 18.75px;
        color: var(--color-white);
        padding: 2px 10px;
        gap: 13.33px;
        border-radius: 5px;
        border: 1.33px solid rgba(var(--color-primary-rgb), 0.3);
        display: inline-block;
    }
}

.video__meta {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    .meta__item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-roboto);
        // font-size: 18.67px;
        // line-height: 29.33px;
        font-size: 16px;
        line-height: 22px;
        font-weight: var(--font-regular);
        color: var(--color-white);
        position: relative;

        @include respond (phone-sm) {
            font-size: 16px;
        }

        i {
            font-size: 21px;
            color: var(--color-primary);

            @include respond (phone-sm) {
                font-size: 18px;
            }
        }

        &::after {
            content: "";
            position: absolute;
            right: -10px;
            height: 100%;
            width: 2px;
            background: rgba(var(--color-white-rgb), 0.2);
            top: 50%;
            transform: translateY(-50%);
        }

        &:last-of-type {
            &::after {
                display: none;
            }
        }
        &.yellow i {
            color: #FFC526;
        }

    }
}

.banner__slider {
    .swiper__navigation {
        .swiper-button-prev {
            left: 15px;
        }
        .swiper-button-next {
            right: 15px;
        }
    }
    .banner__pagination {
        position: absolute;
        // right: 72px;
        right: 130px;
        bottom: 50px;
        display: flex;
        align-items: center;
        gap: 20px;

        @include respond (tabport) {
            right: 80px;
        }

        .swiper-pagination-bullets {
            bottom: 0;
            left: auto;
            right: 0;
            position: relative !important;
            text-align: end;
            z-index: 99;
            pointer-events: none;
            position: relative !important;
        }
    }
}



/*********************************
/* Banner Section End
*********************************/

.banner__video {
	width: 100%;
	height: 933px;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        // background: linear-gradient(90deg, rgba(61,61,61,1) 0%, rgba(255,255,255,1) 100%);
        background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 80%);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-position: center;
        background-size: cover;
        // border-radius: 50%;
        mix-blend-mode: multiply;

        @include respond (phone) {
            background: radial-gradient(circle, rgba(113,113,113,1) 0%, rgba(255,255,255,1) 100%);
        }
    }

    @include respond (tabland) {
        height: 850px;
    }
    @include respond (tabport) {
        height: 750px;
    }
    @include respond (phone-sm) {
        height: 700px;
    }
	
	video{
		display: block;
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
}
.Video__control {
    // position: relative;
    // display: flex;
    // z-index: 9;

    position: absolute;
    display: flex;
    z-index: 999999;
    bottom: 40px;
    right: 72px;

    @include respond (tabport) {
        right: 20px;
    }

    button{
        height: 48px;
        width: 48px;
        background: rgba(var(--color-white-rgb), 0.2);
        border-radius: 50%;
        outline: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--color-white);
        
        &.active{
            
        }
    }
    .btn-play{
		display: none;
	}
	.btn-mute{
		&:before{
			content : "\f2a2";
            font-family: remixicon;
            font-style: normal;
		}
		&.muted{
			&:before{
				content : "\f29e";
			}
			
		}
	}
}