//style widget Services

.widget-services-content{
    text-align:left;
    padding-top: 80px;
    padding-bottom: 80px;
    .icon{
        position: relative;
        display: inline-block;
        @include size(40px,40px);
        font-size: 30px;
        color: $theme-color;
        text-align: center;
        .icon-image{
            position: absolute;
            margin: auto;
            top:0;
            right:0;
            left:0;
            bottom: 0;
            width: auto;
            height: auto;
            @include size(30px,30px);
        }
    }
    .services-content{
        padding: 0 15px;
        overflow: hidden;
    }

    .title-service{
        color: #FFF;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
        -webkit-font-smoothing: antialiased;
    }
    .des-services{
        text-align: left;
        color: #b1b1b1;
        line-height: 24px;
        font-size: 14px;
        font-weight: 300;
    }
    .button-services{
        font-weight: 700;
        font-size: 12px;
        color: $theme-two;
        text-transform: uppercase;
        letter-spacing: 1px;

        a{
            color: $theme-two;
            @include transition(0.4s);
            &:hover{
                letter-spacing: 2px;
                @include transition(0.4s);
            }
        }
        i{
            margin-left: 5px;
        }
    }
}
.banner_item{

    padding: 15px;
    text-align: center;
    img{
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
    }
    &:hover{
        img{
            -webkit-filter:none;
            filter:none;
        }
    }
}