@use "../utilities" as *;

/**----------------------------------------
    START: Video CSS
----------------------------------------*/

.video-section{
    height: 800px;
    position: relative;
    z-index: 1;
    @include breakpoint(lg){
        height: 550px;
    }
    .bg-img{
        @include background;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .play-btn{
        background-color: var(--cp-color-theme-primary);
        height: 150px;
        width: 150px;
        @include flex-center;
        border-radius: 50%;
        position: relative;
        z-index: 5;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        i{
            color: var(--cp-color-text-black);
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .explore-text{
            animation-name: spin;
            animation-duration: 15s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
    }
}

/* !END: Video CSS */
