.ce-service-box-two{
    position:relative;
    border:1px solid var(--codeless-border-color);
    @include transition(all 0.3s);
    .service-content{
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        padding:30px 25px;
        z-index:99;
        position:relative;
        text-align:left;
        min-height:330px;
        .icon{ 
            i{
                color:var(--codeless-primary-color);
                font-size:48px;
                line-height:48px;
                @include transition(all 0.3s);
            }
            svg{
                width: 60px;
                display: block;
                height: 60px;
                fill: var(--codeless-primary-color);
                @include transition(all 0.3s);
            }
            margin-bottom:30px;
        }
        h4{
            @include transition(all 0.3s);
            margin-bottom:0px;
            font-size:20px;
        }
        .subtitle{
            @include transition(all 0.3s);
           
            font-size:12px;
            letter-spacing: 0.2em;
            line-height:22px;
            font-weight:500;
        }

        .btn span{
            @include transition(all 0.3s);
            font-size:12px;
            letter-spacing: 0.02em;
            margin-right:5px;
            text-transform: uppercase;
            font-weight:500;
        }

        .btn i{
            @include transition(all 0.3s);
            color:var(--codeless-primary-color);
            top:2px;
            position:relative;
            
        }
        
    }
    .service-bg-gradient{
        opacity:0;
        z-index:0;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
       
        background: #e64a14; /* Old browsers */
        background: -moz-linear-gradient(45deg,  #e64a14 1%, #ffc24b 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(45deg,  #e64a14 1%,#ffc24b 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(45deg,  #e64a14 1%,#ffc24b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e64a14', endColorstr='#ffc24b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

        @include transition(opacity 0.3s);
    }

    a{
        z-index:999;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
    }

    &:hover{
        border:1px solid #fff;
        .service-bg-gradient{
            opacity:1;
        }

        .service-content{
            .icon i{
                color:#fff;
            }
            .icon svg{
                fill:#fff;
            }
            h4{
                color:#fff
            }
            .subtitle{
                color:#fff;
            }
            .btn span, .btn i{
                color:#fff;
            }
        }
    }
}