Tiny File Manager | _intro-video.scss

Back Back Up Advanced Editor

/*=======  Intro Video  =======*/
.intro-video-area {
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    padding-top: 110px;
    padding-bottom: 145px;

&::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: #00152de6;
        opacity: 0.9;
    }

.intro-video-content {
        span {
            color: $primary-color;
            letter-spacing: 2px;
            font-weight: 700;
            
        }

.title {
            font-size: 55px;
            color: $white;
            padding-right: 22px;
            padding-top: 20px;
            padding-bottom: 16px;

@include respond-between(lg, xl) {
                font-size: 42px;
            }

@include respond-below(lg) {
                font-size: 46px;
            }

@include respond-below(md) {
                font-size: 40px;
            }

@include respond-below(sm) {
                font-size: 26px;
            }
        }

.text-1 {
            font-size: 24px;
            color: #a1bbd7;
            padding-bottom: 25px;

@include respond-below(md) {
                font-size: 24px;
            }

@include respond-below(sm) {
                font-size: 18px;
            }
        }

.text-2 {
            color: #c5d5e7;
            font-size: 16px;
        }

.main-btn {
            margin-top: 45px;
        }
    }

.intro-thumb {
        position: relative;
        z-index: 10;

&::before {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-bottom: 400px solid $primary-color;
            border-left: 400px solid transparent;
            right: 0;
            bottom: -42px;
            z-index: -1;

@include respond-below(sm) {
                border-width: 200px;
                right: -15px;
                bottom: -20px;
            }
        }

.video-popup {
            height: 80px;
            width: 80px;
            color: $white;
            background: $primary-color;
            text-align: center;
            line-height: 80px;
            border-radius: 50%;
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

&::before {
                position: absolute;
                content: "";
                height: 100%;
                width: 100%;
                border-radius: 50%;
                border: 1px solid $primary-color;
                top: 0;
                left: 0;
                z-index: -1;
                @include animation(pulseBtnBefore 1.8s linear infinite);
            }

&::after {
                position: absolute;
                content: "";
                height: 100%;
                width: 100%;
                border-radius: 50%;
                border: 1px solid $primary-color;
                top: 0;
                left: 0;
                z-index: -1;
                @include animation(pulseBtnAfter 1.5s linear infinite);
            }
        }
    }
}

.intro-video-area-two {
    padding-top: 120px;
    padding-bottom: 620px;
    position: relative;

.video-popup {
        height: 100px;
        width: 100px;
        color: $white;
        background: $primary-color;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
        position: relative;
        z-index: 2;

&::before {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 2px solid $white;
            top: 0;
            left: 0;
            z-index: -1;
            @include animation(pulseBtnBefore 1.8s linear infinite);
        }

&::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 2px solid $white;
            top: 0;
            left: 0;
            z-index: -1;
            @include animation(pulseBtnAfter 1.5s linear infinite);
        }
    }

.video-thumb-1 {
        position: absolute;
        top: -40px;
        left: 30px;
        text-align: left;

img {
            @include respond-below(lg) {
                max-width: 65%;
            }

@include respond-below(md) {
                max-width: 45%;
            }
        }
    }

.video-thumb-2 {
        position: absolute;
        top: -70px;
        right: 30px;
        text-align: right;

img {
            @include respond-below(lg) {
                max-width: 65%;
            }

@include respond-below(md) {
                max-width: 50%;
            }
        }
    }
}

.intro-video-with-shape {
    position: relative;
    z-index: 1;

&::before {
        position: absolute;
        content: "";
        bottom: -20px;
        left: -20px;
        width: 0;
        height: 0;
        border-bottom: 400px solid $primary-color;
        border-right: 400px solid transparent;
        z-index: -1;

@include respond-below(sm) {
            border-width: 200px;
        }
    }

.video-popup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-75%, -50%);
        height: 120px;
        width: 120px;
        text-align: center;
        border-radius: 50%;
        line-height: 120px;
        background: $primary-color;
        color: $white;
        font-size: 20px;
        z-index: 2;

@include respond-below(sm) {
            height: 80px;
            width: 80px;
            line-height: 80px;
            transform: translate(-50%, -50%);
        }

&::before {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 2px solid $primary-color;
            top: 0;
            left: 0;
            z-index: -1;
            @include animation(pulseBtnBefore 1.8s linear infinite);
        }

&::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 2px solid $primary-color;
            top: 0;
            left: 0;
            z-index: -1;
            @include animation(pulseBtnAfter 1.5s linear infinite);
        }
    }
}