// SERVICE STYLE START

.service-item {
    .service-image {
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }
    .service-info {
        background: #fff;
        padding: 30px 20px;
        position: relative;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
        h4 a{
            font-family: $roboto;
            font-size: 24px;
            color: $primary-clr;
            display: block;
            font-weight: 600;
            padding-top: 15px;
            transition: all .3s;

            &:hover {
                color: $darkmid-clr;
            }
        }
        p {
            transition: all .3s;
            margin-bottom: 10px;
        }
        .icon {
            background: $secoundery-clr;
            color: $darkmid-clr;
            height: 50px;
            width: 50px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
            transition: 300ms;

            &:hover {
                background: $darkmid-clr;
            }

            a {
                color: $darkmid-clr;
            }

        }
    }
    @include mq (767) {
        margin-bottom: 30px;
    }
    &:hover {
        .icon {
            background: $primary-clr;
            color: #fff;
            top: -75px;

            a {
                color: #fff;
            }
        }
    }
}

//  SERVICE STYLE V1 END