@use '../utils' as *;

/*=============================
	02. Video
===============================*/
.video {
    &__area {
        position: relative;
        padding: 170px 0 255px;
        z-index: 1;
        @media #{$lg} {
            padding: 140px 0 240px;
        }
        @media #{$md} {
            padding: 120px 0 220px;
        }
        @media #{$xs} {
            padding: 100px 0 200px;
        }
        &-two {
            position: relative;
        }
        &-three {
            position: relative;
            padding: 280px 0 150px;
            margin-top: -145px;
            z-index: 1;
            @media #{$xs} {
                padding: 250px 0 110px;
            }
        }
    }
    &__bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        z-index: -1;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000038;
            opacity: .5;
            mix-blend-mode: luminosity;
        }
        &-two {
            &::before {
                background: #000;
                opacity: 0.7;
                mix-blend-mode: normal;
            }
        }
        &-three {
            &::before {
                display: none;
            }
        }
    }
    &__content {
        @media #{$md} {
            text-align: center;
        }
        &-two {
            background: var(--tg-color-white-default);
            padding: 70px 70px;
            @media #{$lg} {
                padding: 50px 45px;
            }
            @media #{$md} {
                padding: 50px 50px;
                margin-top: 40px;
                text-align: center;
            }
            @media #{$xs} {
                padding: 40px 30px;
            }
            @media #{$sm} {
                padding: 50px 40px;
            }
            & .title {
                margin-bottom: 25px;
                font-size: 36px;
                text-transform: capitalize;
                font-weight: 800;
                @media #{$xs} {
                    font-size: 32px;
                }
            }
        }
    }
    &__contact {
        @include flexbox();
        align-items: center;
        gap: 20px;
        @media #{$md} {
            justify-content: center;
        }
        & .icon {
            width: 50px;
            height: 50px;
            @include flexbox();
            align-items: center;
            justify-content: center;
            @include border-radius(50%);
            background: var(--tg-theme-primary);
            line-height: 0;
            color: var(--tg-color-white-default);
            font-size: 26px;
        }
        & .content {
            text-align: left;
            & span {
                display: block;
                font-size: 16px;
                font-weight: 500;
                text-transform: capitalize;
                line-height: 1;
                color: var(--tg-theme-secondary);
                margin-bottom: 8px;
            }
            & a {
                font-size: 24px;
                font-weight: 800;
                line-height: 1;
                color: var(--tg-theme-secondary);
                &:hover {
                    color: var(--tg-theme-primary);
                }
            }
        }
    }
    &__play-btn {
        margin-right: 155px;
        @media #{$md} {
            margin-right: 0;
        }
        & .play-btn {
            width: 84px;
            height: 84px;
            @include flexbox();
            align-items: center;
            justify-content: center;
            @include border-radius(50%);
            background: var(--tg-color-white-default);
            line-height: 0;
            font-size: 25px;
            color: var(--tg-theme-secondary);
            margin-left: auto;
            position: relative;
            @media #{$md} {
                margin: 0 auto 50px;
            }
            &::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                width: 100%;
                height: 100%;
                border: 1px solid var(--tg-color-white-default);
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -o-border-radius: 50%;
                -ms-border-radius: 50%;
                border-radius: 50%;
                -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                animation: pulse-border 1500ms ease-out infinite;
            }
        }
        &-two {
            & .play-btn {
                color: var(--tg-theme-primary);
            }
        }
        &-three {
            & .play-btn {
                color: var(--tg-theme-primary);
            }
        }
    }
}