/* Demo CSS */

@use 'responsive';
@use 'variables'as var;

.demo-hero-area {
    position: relative;
    z-index: 2;
}

.demo-hero {
    .version-number {
        padding: 0.25rem 0.75rem;
        color: var.$heading;
        background-color: var.$white;
        display: inline-block;
        border-radius: 30px;
        font-size: 1rem;
    }

    .animated-heading {
        span {
            font-size: 3.5rem;
            padding: 0;
            color: var.$white;
            font-weight: 700;

            b {
                font-weight: 700;
                margin-left: 0.5rem;
                color: var.$warning;
            }
        }
    }
}

.single-preview-area {
    h5 {
        transition-duration: 400ms;
    }

    a {
        display: block;

        img {
            transition-duration: 500ms;
            border: 1px solid var.$border;
            border-radius: 0.5rem;
        }
    }

    &:hover,
    &:focus {
        a img {
            transform: translateY(-5px);
        }

        h5 {
            color: var.$primary;
        }
    }
}

.demo-single-feature {
    background-color: var.$white;
    transition-duration: 500ms;
    border-radius: .5rem;

    img {
        max-height: 40px;
    }

    &:hover,
    &:focus {
        box-shadow: 0 10px 71px rgba(47, 91, 234, 0.175);
        transform: scale(1.05);
        z-index: 100;
    }
}

.single-more-feature {
    display: flex;
    align-items: center;

    i {
        display: block;
        width: 25px;
        font-size: 1rem;
        height: 25px;
        background-color: var.$white;
        text-align: center;
        border-radius: 50%;
        line-height: 25px;
        margin-right: .375rem;
    }
}