/*------------------------------------------------------------------------
# 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 {
 --mxtx27-color:#f0401b;
 --mxsmo27-color:#f8f8f8;
}


.mxte-service-style-3{
	position: relative;
	border: 1px solid rgba(33, 44, 64, 0.1);
	padding: 20px;
}

.mxte-service-style-3 .pbminfotech-box-content {
	position: relative;
	justify-content: space-between;
}
.mxte-service-style-3 .mxte-service-icon-wrapper {
	font-size: 50px;
	line-height: 50px;
}
.mxte-service-style-3 .mxte-service-icon-wrapper i {
	color: var(--mxtx27-color);
}
.mxte-service-style-3 .mxte-service-icon-wrapper img {
	width: 80px;
	height: 80px;
	margin-right: 80px;
	padding-right: 10px
}
.mxte-service-style-3 .pbminfotech-icon-box i {
	font-size: 80px;
	line-height: 80px;
	padding-right: 25px;
	display: inline-flex;
	color: var(--mxtx27-color);
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

.mxte-service-style-3:hover .pbminfotech-icon-box i, 
.mxte-service-style-3:hover .mxte-service-icon-wrapper img {
    animation: toBottomFromTop .5s forwards
} {
    animation: toBottomFromTop .5s forwards
}


@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    51% {
        opacity: 1
    }
}

@keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    51% {
        opacity: 1
    }
}
.mxte-service-style-3 .mxte-service-title a {
	color: #222;
	padding-left: 15px;
	font-weight: 500;
	position: relative;
}

.mxte-service-style-3 .pbminfotech-content-wrapper {
	padding-right: 10px;
}
.mxte-service-style-3 .mxte-service-title a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50px;
	background-color: var(--mxtx27-color);
	-khtml-transform: translateX(0%) translateY(-50%);
	-moz-transform: translateX(0%) translateY(-50%);
	-ms-transform: translateX(0%) translateY(-50%);
	-o-transform: translateX(0%) translateY(-50%);
	transform: translateX(0%) translateY(-50%);
}
.mxte-service-style-3 .mxte-service-title {
	font-size: 26px;
	line-height: 32px;
	font-weight: 600;
	margin-bottom: 20px;
}
.mxte-service-style-3 .mxte-svg-btn a {
	padding: 0;
	background-color: transparent;
}
.mxte-svg-arrow{
	height: 10px;
	margin-left: 8px;
}
.mxte-svg-arrow line{
	fill: none;
    stroke: var(--mxtx27-color);
    stroke-width: 2;
    stroke-miterlimit: 10;
}
.mxte-svg-arrow line:nth-child(1){
	stroke-dasharray: 25px;
    stroke-dashoffset: 50px;
    transition: stroke-dashoffset .5s cubic-bezier(.61,1,.88,1);
}
.mxte-svg-arrow line:nth-child(2),
.mxte-svg-arrow line:nth-child(3){
	stroke-dasharray: 20px;
    stroke-dashoffset: 40px;
    transition: stroke-dashoffset .6s cubic-bezier(.61,1,.88,1) .3s;
}

.mxte-service-style-3 .mxte-svg-btn a svg {
	height: 20px !important;
	width: 20px !important;
}
.mxte-service-style-3 .mxte-featured-wrapper {
	opacity: 0;
	visibility: hidden;
	transition: all 500ms ease;
	position: absolute;
	transform: scale(0);
	top: -100px;
	right: 5%;
	z-index: 10;
}
.mxte-service-style-3 .mxte-featured-wrapper img {
	transform: rotate(5deg);
	max-width: 320px
}
.mxte-service-style-3:hover .mxte-featured-wrapper {
	opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.mxte-service-style-3:hover .mxte-svg-btn a svg line{
	stroke-dashoffset: 0;
    stroke: var(--mxtx27-color);
}