.tt-service-image-box {
    position: relative;
    overflow: hidden;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    border-radius: 15px;
    padding: 3rem;

    &:after {
        z-index: 1;
        top: 100%;
        background-image: linear-gradient(75deg, rgba(26, 44, 121, 0.75) 10%, rgba(232, 5, 102, 0.80));
        content: '';
        height: 100%;
        right: 0;
        left: 0;
        position: absolute;
        pointer-events: none;
        border-radius: inherit;
        transition: all 0.3s ease;
        opacity: 0.8;
    }


    &:before {
        top: 80%;
        opacity: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-filter: brightness(40%);
        filter: brightness(40%);
    }

    .box-image {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100%;
        left: 0;
        top: 80%;
        opacity: 0;
        transition: all 0.3s ease-in-out;

        a {
            display: block;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.4s ease-in-out;
        }

        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1;
        }

    }

    .box-info {
        position: relative;
        z-index: 2;

        .icon {
            font-size: 40px;
            margin-bottom: 30px;
            color: #1A2C79;
        }


        .box-title {
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: 600;

            a {
                color: $color__heading;

                &:hover {
                    color: $color__theme;
                }
            }
        }

        p {
            margin: 0;
        }
    }

    &:hover {
        &:after {
            top: 0;
        }

        .icon {
            color: #fff
        }

        .box-info {
             .box-title {
                color: #fff;

                 a {
                     color: #fff;
                }
             }

            p {
                color: #fff;
            }
        }

        .box-image  {
            top: 0;
            opacity: 1;
            transition: all 0.17s ease-out 0.18s;
        }
    }
}