/*===========================
    4.FEATURES  css 
===========================*/


.features-area {
    @media #{$md}{
        padding-top: 70px;
        padding-bottom: 50px;
    }
    @media #{$xs}{
        padding-top: 50px;
        padding-bottom: 30px;
    }
}

.single-features{
    border: 5px solid rgba(72, 127, 255, 0.1);
    padding: 60px 15px 55px;
    @include transition(0.3s);
    
    @media #{$lg}{
        padding: 40px 10px 35px;
    }
    @media #{$xs}{
        padding: 40px 10px 35px;
    }
    
    & .features-icon{
        & i{
            font-size: 85px;
            line-height: 80px;
            color: $theme-color;
            @include transition(0.3s);
        }
    }
    & .features-content{
        margin-top: 35px;
        
        & .features-title{
            & a{
                font-weight: 600;
                font-size: 24px;
                color: $heading-color;
                @include transition(0.3s);
                
                @media #{$lg}{
                    font-size: 20px;
                }
                @media #{$xs}{
                    font-size: 20px;
                }
                @media #{$sm}{
                    font-size: 24px;
                }
            }
        }
        
        & .text{
            margin-top: 20px;
            @include transition(0.3s);
        }
        
        & .more{
            color: $theme-color;
            font-size: 15px;
            font-weight: 500;
            margin-top: 20px;
            @include transition(0.3s);
            
            & i{
                font-size: 13px;
            }
        }
    }
    
    &.active,
    &:hover{
        background-color: $theme-color;
        
        & .features-icon{
            & i{
                color: $white;
            }
        }
        
        & .features-content{
            & .features-title{
                & a{
                    color: $white;
                }
            }
            & .text,
            & .more{
                color: $white;
            }
        }
    }
}