@use "../utilities" as *;

/**----------------------------------------
START: Theme App CSS
----------------------------------------*/

.app-section{
    padding-top: 190px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    @include breakpoint(md){
        padding-top: 150px;
    }
    @include breakpoint(md){
        padding-top: 175px;
        padding-bottom: 80px;
    }
    @include breakpoint(sm){
        padding-top: 150px;
    }
    .bg-img{
        background-repeat: no-repeat;
        background-position: top right;
        background-size: cover;
        width: 52%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
    .bg-img-2{
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
        width: 60%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
        @include breakpoint(md){
            width: 65%;
        }
        @include breakpoint(sm){
            width: 100%;
            clip-path: inherit;
        }
    }
    .video-btn-wrap{
        width: 100%;
        height: 100%;
        @include flex-center;
        margin-left: 100px;
        @include breakpoint(xl){
            margin-left: 0;
        }
        @include breakpoint(md){
            display: none;
        }
        .video-btn{
            background-color: var(--mt-color-common-white);
            color: var(--mt-color-theme-primary);
            font-size: 30px;
            height: 100px;
            width: 100px;
            @include flex-center;
            border-radius: 50%;
            position: relative;
            z-index: 1;
        }
    }
}

@-webkit-keyframes rippleOne {
    70% {
        box-shadow: 0 0 0 60px rgba(244, 68, 56, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    }
}

@keyframes rippleOne {
    70% {
        box-shadow: 0 0 0 60px rgba(244, 68, 56, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    }
}

.app-content{
    .section-heading{
        .section-title{
            margin-bottom: 15px;
            @include breakpoint(md){
                max-width: 500px;
                width: 100%;
            }
        }
        p{
            max-width: 400px;
            width: 100%; 
        }
    }
    .btn-wrap{
        @include flex-vertical-center;
        column-gap: 20px;
        flex-wrap: wrap;
        row-gap: 10px;
        .app-btn{
            font-family: var(--mt-ff-body);
            font-size: 16px;
            font-weight: 700;
            color: var(--mt-color-common-white);
            @include flex-vertical-center;
            column-gap: 10px;
            border: 1px solid #4c5052;
            padding: 10px 20px;
            i{
                color: var(--mt-color-theme-secondary);
                font-size: 16px;
                @include transition(all 0.3s ease-in-out);
            }
            &:nth-child(2){
                i{
                    font-size: 13px;
                }
            }
            &:hover{
                border: 1px solid var(--mt-color-theme-primary);
                i{
                    color: var(--mt-color-theme-primary);
                }
            }
        }
    }
}

.app-2{
    padding: 150px 0;
}

/* !END: Theme App CSS */
