
/* video-area */
.video-area{
   background-image: url(../img/gallery//sectin_bg1.png);
   width: 100%;
   height: 700px;
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
   position: relative;
   @media #{$lg}{
    height: 400px;
    }
   @media #{$md}{
        height: 400px;
    }
   @media #{$sm}{
        height: 320px;
    }
   @media #{$xs}{
        height: 400px;
    }
   &::before{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        content: "";
        background-color: rgba(2, 5, 12, 0.5);
        opacity: 0;
        z-index: 0;
        @include transition(.4s);
    }
    .play-btn {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        right: 0;
        text-align: center;
        a {
            width: 85px;
            height: 85px;
            display: inline-block;
            line-height: 85px;
            text-align: center;
            color: #fff;
            border-radius: 50%;
            font-size: 24px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding-left: 5px;
            padding-top: 1px;
            border: 1px solid #fff;
            &:hover{
                background: #fff;
                color:$theme-color;
                border: 1px solid transparent
            }
            transform: scale(1);
        }
    }
}
.video-area:hover{
    &::before{
        opacity: 1;
    }
    .play-btn {
        a{
            transform: scale(1.1);
        }
    }
}
.thumb-content-box {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    width: 34%;
    @media #{$lg}{
        width: 28%;
    }
    @media #{$md}{
        width: 32%;
    }
    @media #{$sm}{
        width: 40%;
    }
    @media #{$xs}{
        width: 60%;
    }
    .thumb-content {
        position:absolute;
        bottom:0;
        align-items:end;
        background-image:url(../img/gallery/vidoe_more.png);
        background-size: cover;
        background-repeat: no-repeat;
        display:flex;
        justify-content: space-between;
        padding: 60px 143px 60px 80px;
        width: 100%;
        line-height: 1;
        @media #{$lg}{
          padding:21px 56px 25px 9px;
        }
        @media #{$md}{
          padding:21px 56px 25px 9px;
        }
        @media #{$sm}{
          padding:11px 49px 14px 9px;
        }
        @media #{$xs}{
          padding:11px 49px 14px 9px;
        }
        h3 {
            color:#ffffff;
            font-weight:600;
            font-size:16px;
            margin:0;
            text-transform: uppercase;
       }
       a {
        color:#fff;
        display:block;
        position:relative;
        right:-34px;
        font-size:30px;
       }
   }
}


// watch-area
.watch-area{
    .watch-details{
        h2{
            color: #000;
            font-size: 56px;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 40px;
            @media #{$lg}{
                font-size: 46px;
            }
            @media #{$md}{
                font-size: 33px;
            }
            @media #{$sm}{
                font-size: 29px;
            }
            @media #{$xs}{
                font-size: 29px;
            }
        }
        P{
            margin-bottom: 50px;
            font-size: 17px;
            @media #{$md}{
                font-size: 16px;
            }
        }
    }
    .choice-watch-img{
        img{
            width: 100%;
        }
    }
}

.padding-130{
    padding-bottom: 130px;
    @media #{$lg}{
        padding-bottom: 120px;
    }
    @media #{$md}{
        padding-bottom: 100px;
    }
    @media #{$sm}{
        padding-bottom: 0px;
    }
    @media #{$xs}{
        padding-bottom: 0px;
    }
}
