/*------------------------------------------------------------------------
# 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 {  
  --base-skin: #ccc;
  --base-dark: #fff000;
  --base-grey: #f3f4f9;
  --base-white: #ffffff; 
}

.service40 {
    position: relative;
}
.service40 .item {
    position: relative;
    border-radius: 20px 20px 0 20px;
    overflow: hidden;
    margin-bottom: 15px;
    isolation: isolate;
    min-height: 200px;
}
.service40 .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}
.service40 .item:hover img {
    transform: scale(1.05);
}
/* title */
.service40 .item .title {
    position: absolute;
    bottom: 0px;
    padding: 30px 100px 30px 30px;
    width: 100%;
}
.service40 .item .title h4 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/* icon */
.service40 .item .icon {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    background: #fff;
    border-top-left-radius: 50%;
    padding: 15px;
}
.service40 .item:hover .icon .arrow {
    transform: scale(1.05);
}
.service40 .item .icon::before {
    position: absolute;
    content: "";
    bottom: 6px;
    left: -20px;
    background: transparent;
    width: 20px;
    height: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 6px 6px 0 6px #fff;
}
.service40 .item .icon::after {
    position: absolute;
    content: "";
    top: -20px;
    right: 6px;
    background: transparent;
    width: 20px;
    height: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 6px 6px 0 6px #fff;
}
.service40 .item .icon .arrow {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    width: 60px;
    height: 60px;
    line-height: 60px;
}
.service40 .item .icon .arrow span {
    color: #fff;
    font-size: 17px;
}
.service40 .item:hover .icon .arrow {
    color: #fff !important;
    background: #111;
}
.service40 .item .icon .icon-w {
    overflow: hidden;
    background-color: transparent;
    color: #000;
    font-style: normal;
    font-weight: normal;
    font-size: 34px;
}
.service40 .item:hover .icon .icon-w i.icon-show,
.service40 .item .icon .icon-w i.icon-hidden {
    display: none;
}
.service40 .item:hover .icon .icon-w i.icon-hidden {
    display: inline;
    text-align: center;
    color: #fff;
    font-size: 21px;
    vertical-align: middle;
}

.service40 .item:hover .icon .arrow .icon-w {
    color: #fff !important;
}
.service40 .bottom-fade {
    width: 100%;
    top: 0.5px;
    height: 100%;
    float: left;
    position: absolute;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0, 0.738) 25%, rgba(0,0,0, 0.541) 44%, rgba(0,0,0, 0.382) 57%, rgba(0,0,0, 0.278) 66.5%, rgba(0,0,0, 0.194) 75%, rgba(0,0,0, 0.126) 83%, rgba(0,0,0, 0.075) 87.2%,  rgba(0,0,0, 0.021) 91%, rgba(0,0,0, 0.008) 95.2%, rgba(0,0,0, 0.002) 98.2%, transparent 100%);
    z-index: 0;
    border-radius: 20px 20px 0 20px;
}

.service40 .top-text {
    width: 100%;
    top: 0px;
    height: auto;
    padding: 15px;
    float: left;
    position: absolute;    
    transition: .3s;
    display: none;
    color: #fff;
    background: linear-gradient(to bottom, #000 0%, rgba(0,0,0, 0.738) 19%, rgba(0,0,0, 0.541) 34%, rgba(0,0,0, 0.382) 47%, rgba(0,0,0, 0.278) 56.5%, rgba(0,0,0, 0.194) 65%, rgba(0,0,0, 0.126) 73%, rgba(0,0,0, 0.075) 80.2%, rgba(0,0,0, 0.042) 86.1%, rgba(0,0,0, 0.021) 91%, rgba(0,0,0, 0.008) 95.2%, rgba(0,0,0, 0.002) 98.2%, transparent 100%);
    z-index: 0;
    border-radius: 20px 20px 0px 0;
}
.service40 .item:hover .top-text {   
    display: block;
    top: 0px;
    -webkit-transition: .3s;
    transition: .3s;
}