/* Service Css */

.service {
    padding: 60px 0;
}

.about-srvcs img {
    width: 65px;
    border-radius: 6px;
}

.moreabot-srvcs {
    background: #006efe17;
    border-radius: 10px;
    box-shadow: 3px 3px 15px #00000014;
    position: relative;
    transition: all ease-in-out .5s;
    overflow: hidden;
}

.about-srvcs {
    padding: 20px 12px;
    column-gap: 10px;
}

.about-srvcs h3 {
    font-size: 25px;
    letter-spacing: 1px;
}

.srvcdtls img {
    height: 240px;
    object-fit: cover;
    transition: all .5s ease-in-out;
}

.srvcdtls figure {
    position: relative;
    overflow: hidden;
    transition: all ease-in-out .5s;
}

.srvcdtls figure:after,
.srvcdtls figure:before {
    background: #ffffff80 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    transition: all .7s ease 0s;
    right: 0;
    top: 0;
    z-index: 1;
}

.srvcdtls figure:hover:before {
    left: 50%;
    opacity: 1;
    right: 50%;
}

.srvcdtls figure:hover:after {
    bottom: 50%;
    opacity: 1;
    top: 50%;
}

.moreabot-srvcs:hover figure img {
    transform: scale(1.1);
    transition: all .5s ease-in-out;
}

.service-info {
    padding: 20px 12px 0;
}

.moreabot-srvcs .btn {
    width: 100%;
    border-radius: 0 0 10px 10px;
}

.service .row {
    row-gap: 20px;
}

@media (max-width: 767px) {
    .srvcdtls img{
        height: auto;
    }
}