ul,ol,li{
    padding:0px;
}
    ul.service-list li {
        width: 238px;
        height: 200px;
        padding: 30px;
        overflow: hidden;
        position: relative;
        margin-right: 28px;
        margin-bottom: 30px;
        background-color: #ffffff;
        float: left !important;
        box-shadow: 0px 0px 5px 0px #cfb170;
    }
@media (max-width: 670px) {
    ul.service-list li {
        width: 94%;
        height: 200px;
        padding: 30px;
        overflow: hidden;
        position: relative;
        margin-right: 28px;
        margin-bottom: 30px;
        background-color: #ffffff;
        float: left !important;
        box-shadow: 0px 0px 5px 0px #0d6552;
    }
}

    ul.service-list li:before {
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        width: 100%;
        height: 2px;
        position: absolute;
        transition: all .2s ease-in-out;
    }

    ul.service-list li > i {
        top: 40px;
        left: 40px;
        font-size: 25px;
        position: absolute;
    }

    ul.service-list li > span.service-name {
        left: 21px;
        bottom: 21px;
        color: #111111;
        font-size: 12px;
        position: absolute;
        text-transform: capitalize;
        transition: all .2s ease-in-out;
    }

    ul.service-list li > a.more {
        top: 0px;
        width: 45px;
        right: -100%;
        height: 35px;
        color: #ffffff;
        line-height: 35px;
        text-align: center;
        position: absolute;
        background-color: #2196f3;
        transition: all .2s ease-in-out;
    }

    /* ---------- hover effects ---------- */
    ul.service-list li:hover:before {
        height: 120px;
    }

    ul.service-list li:hover > span.service-name {
        bottom: 15px;
        color: #ffffff;
    }

    ul.service-list li:hover > a.more {
        right: 0%;
    }
    ul.service-list li > i {
        color: #00778f !important;
    }

    ul.service-list li:before {
        background-color: #cfb170 !important;
    }
    ul.service-list li > a.more {
        background-color: #cfb170 !important;
    }