﻿
.iconServices {
    width: 100% !important;
}

.box {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

.our-services {
    margin-top: 75px;
    padding-bottom: 30px;
    padding: 0 60px;
    min-height: 198px;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
    transition: all .4s ease-in-out;
    box-shadow: 0 0 25px 0 rgba(20, 27, 202, .17);

}

@media (max-width: 992px) {
    .our-services {
        padding: 0 20px;
    }
}

    .our-services h4, .our-services p {
        color: rgba(0,0,0,.5);
    }

    .our-services .icon {
        margin-bottom: -21px;
        transform: translateY(-50%);
        text-align: center
    }

    .our-services:hover h4,
    .our-services:hover p {
        color: #fff
    }


.our-services:hover {
    box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #8d40fb 0%, #5a57fb 100%)
}

    .our-services:hover img {
        animation: iconIndex 1s cubic-bezier(.36,.07,.57,.99) infinite;
    }

@keyframes iconIndex {
    0% {
        transform: scale(1.2);
    }

    20% {
        transform: scale(1.2);
    }

    22.5% {
        transform: scale(1);
    }

    32.5% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1.2);
    }
}
