//
// home.scss
//
@mixin home-common {
    background-size: cover;
    align-self: center;
    position: relative;
    background-position: center center;
}
.bg-home {
    height: 100vh;    
    @include home-common();
}
.bg-half-260 {
    padding: 260px 0;    
    @include home-common();
}
.bg-half-170 {
    padding: 170px 0;    
    @include home-common();
}
.bg-half {
    padding: 184px 0 110px;
    @include home-common();
}

.bg-user-home {
    padding: 90px 0;
    @include home-common();
}

//Saas
.home-dashboard {
    img {
        position: relative;
        top: 60px;
        z-index: 1;
    }
}

//Home-2
.dashboard-shape-two {
    &:before {
        content: "";
        position: absolute;
        bottom: 5rem;
        right: -35rem;
        width: 70rem;
        height: 50rem;
        z-index: -1;
        background-color: $primary;
        border-radius: 30rem;
        transform: rotate(-45deg);
        opacity: 0.8;
    }
    .account-img {
        position: absolute;
        top: 60px;
        left: 100px;
    }
}

//user-pages
.user-pages {
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba($primary, 0.1) 0%, 
                                                   rgba($primary, 0.1) 33.333%,
                                                   rgba($primary, 0.3) 33.333%, 
                                                   rgba($primary, 0.3) 66.666%,
                                                   rgba($primary, 0.5) 66.666%, 
                                                   rgba($primary, 0.5) 99.999%);
}

//application
.app-home-wrapper {
    &:before {
        content: "";
        position: absolute;
        bottom: 55rem;
        right: 8rem;
        width: 90rem;
        height: 35rem;
        transform: rotate(70deg);
        background: linear-gradient(90deg, rgba($primary, 0.5), transparent);
        z-index: -1;
    }
}
.app-dash {
    background: linear-gradient(45deg, rgba($primary, 0.2), rgba($violet, 0.2));
}

@media (max-width: 768px) {
    .app-home-wrapper {
        &:before {
            right: -25rem;
        }
    }
}

@media (max-width: 767px) {
    .bg-home, 
    .bg-half-170, 
    .bg-half-260,
    .user-pages {        
        padding: 150px 0;
        height: auto;
    }

    .dashboard-shape-two { 
        &:before {
            bottom: -5rem;
            right: -10rem;
            width: 30rem;
            height: 24rem;
            border-radius: 8rem;
        } 
    }

    .app-image-fluid {
        img {
            width: 100%;
            height: auto;
        }
    }
}