@use "../utilities" as *;

/**----------------------------------------
START: Theme Feature CSS
----------------------------------------*/
.feature-section{
    .section-heading{
        .section-title{
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            @include breakpoint(md){
                max-width: 500px;
            }
        }
    }
}

.feature-item{
    .feature-icon{
        font-size: 60px;
        color: var(--lt-color-heading-primary);
        padding: 10px 30px;
        display: inline-block;
        margin-bottom: 25px;
        position: relative;
        z-index: 1;
        &:before{
            background-color: rgba(254, 86, 36, 0.1);
            content: "";
            width: 50%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            @include transition(all 0.3s ease-in-out);
        }
    }
    .title{
        font-weight: 600;
        margin-bottom: 15px;
        a{
            &:hover{
                color: var(--lt-color-theme-primary);
            }
        }
    }
    p{
        &:last-child{
            margin-bottom: 0;
        }
    }
    &:hover{
        .feature-icon{
            &:before{
                width: 100%;
            }
        }
    }
}

.feature-btn{
    @include flex-vertical-center;
    justify-content: center;
    margin-top: 70px;
    @include breakpoint(md){
        margin-top: 50px;
    }
}

/* !END: Theme Feature CSS */