/*------------------------------------------------------------------------
# mod_mx_services Extension
# ------------------------------------------------------------------------
# author    mixwebtemplates
# Copyright (C) 2020 mixwebtemplates.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.mixwebtemplates.com
-------------------------------------------------------------------------*/
:root {

--mxt-primary: #dd0429;
--mxt-primary-rgb: 221, 4, 41;
--mxt-black: #17161a;
--mxt-black-rgb: 23, 22, 26;
--mxt-base: #ffffff;
--mxt-base-rgb: 255, 255, 255;
--mxt-extra: #f6f6f6;
--mxt-extra-rgb: 246, 246, 246;
--mxt-bdr-color: #e3e3e3;
--mxt-bdr-color-rgb: 227, 227, 227;
}

.services-eight {
    position: relative;
    display: block;
}

.services-eight__box {
    position: relative;
    display: block;
}

.services-eight__single {
    position: relative;
    width: 100%;
    float: left;
    border: 2px solid var(--mxt-extra);
    padding: 45px;
    background-color: var(--mxt-base);
    transition: all 500ms ease;
}

.services-eight__single:hover {
    background-color: var(--mxt-base);
    box-shadow: 0px 0px 60px 0px rgb(0, 0, 0, .10);
    z-index: 2;
}

.services-eight__icon span {
    font-size: 65px;
    color: var(--mxt-black);
    transition: all 500ms ease;
}


.services-eight__icon img {
  width: 90px !important;
  height: 90px;
}


.services-eight__single:hover .services-eight__icon span {
    color: var(--mxt-primary);
}

.services-eight__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
    margin-top: 30px;
    margin-bottom: 14px;
}

.services-eight__title a {
    color: var(--mxt-black);
    transition: all 500ms ease;
}

.services-eight__single:hover .services-eight__title a {
    color: var(--mxt-primary);
}

.services-eight__text {
    margin: 0;
    font-weight: 300;
}
.services-eight__single .box-img {
 position:absolute;
 top:10px;
 right:10px;
 max-width: 120px;
 height: 120px;
 opacity: 0;
 border-radius:0px;
  transition: all 500ms ease;
 z-index:0
}

.services-eight__single:hover .box-img {
 position:absolute;
 top:10px;
 right:10px;
 width: 120px;
 height: 120px;
 border-radius:50%;
 opacity: 1;
 z-index:0
}
.services-eight__single .box-img img {
 max-width: 120px;
 height: 120px;
 border-radius: 50%;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}