.video-area{
    height: 660px;
    @media #{$lg}{
        height: 400px;
    }
    @media #{$md}{
        height: 400px;
    }
    @media #{$sm}{
        height: 400px;
    }
    @media #{$xs}{
        height: 300px;
    }
}

// Video icon
.video-icon{
        
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    margin: 0 auto;
    text-align: center;



    a{
        background: #fff;
        color: $theme-color;
        width: 110px;
        height: 110px;
        display: inline-block;
        text-align: center;
        line-height: 110px;
        border-radius: 50%;
            &::after{
                position: absolute;
                border: 70px solid inherit !important;
                content: "";
                border-radius: 50%;
                left: -9px;
                top: -12px;
                right: 0;
                z-index: 0;
                background: #0000;
            @media #{$sm}{
                border: 50px solid rgba(241, 65, 5,.1);
                left: -19px;
                top: -19px;
                right: 0
            }
            @media #{$xs}{
                border: 50px solid rgba(241, 65, 5,.1);
                left: -19px;
                top: -19px;
                right: 0
            }
        }
            @media #{$sm}{
            width: 60px;
            height: 60px; 
            line-height: 60px;
        }
            @media #{$xs}{
            width: 60px;
            height: 60px; 
            line-height: 60px;
        }
        i{
            font-size: 31px;
            line-height: 1;
            position: relative;
            right: -4px;
            top: 8px;
        
        }
    } 
// btn Animated Style
a.btn-icon{
    position: relative;
    &::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border-radius: inherit;
    border: 1px solid $theme-color;
    -webkit-animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
    animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
    }
    /* Animations */
    @-webkit-keyframes btnIconRipple { 
        0% { border-width: 4px;
            -webkit-transform: scale(1);
            transform: scale(1); }
        50% { 
            border-width: 1px;
            -webkit-transform: scale(1.50);
            transform: scale(1.50); 
            }
        80% { 
            border-width: 1px;
            -webkit-transform: scale(1.90);
            transform: scale(1.90); 
            }
        100% { 
            opacity: 0; }
        }
    /* End Animated */
    // &:hover{
    //     // background: #c6a16e;
    //     background: #fff;
    //     color: #FF9F67;
    // }
}
}