@use '../utils' as *;

/*=============================
    	19. Video
===============================*/
.video {
    &__area {
        position: relative;
        z-index: 1;
        height: 728px;
        @media #{$md} {
            height: 600px;
        }
    }
    &__inner-wrap {
        position: relative;
        z-index: 1;
        height: 728px;
        @include border-radius(50px);
        overflow: hidden;
        @media #{$xl} {
            height: 650px;
        }
        @media #{$lg} {
            height: 500px;
        }
        @media #{$md} {
            & .video__icon-two {
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
        @media #{$xs} {
            height: 400px;
            @include border-radius(20px);
            & .video__icon-two {
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
    &__bg {
        position: absolute;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
    }
    &__icon-two {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90px;
        height: 90px;
        @media #{$md} {
            top: 30%;
            transform: translateX(-50%);
        }
        @media #{$xs} {
            top: 25%;
        }
    }
    &__contact-wrap {
        position: absolute;
        right: 0;
        bottom: 0;
        background: var(--tg-theme-primary);
        padding: 60px 95px 45px;
        @media #{$xl} {
            padding: 40px 55px 35px;
        }
        @media #{$lg} {
            padding: 30px 40px 30px;
        }
        @media #{$xs} {
            padding: 25px 25px 25px;
            width: 100%;
        }
        & .title {
            margin-bottom: 0;
            font-size: 30px;
            color: var(--tg-color-white-default);
            margin-bottom: 35px;
            @media #{$lg} {
                font-size: 26px;
                margin-bottom: 25px;
            }
            & br {
                @media #{$xs} {
                    display: none;
                }
            }
        }
    }
}
