.shape-box {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    height: 270px;
    margin: 0 0 30px;
    box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .12);
    overflow: hidden
}

.shape-box .text-gray {
    color: #9f9f9f!important
}

.shape-box>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.shape-box figcaption p {
    margin-top: 20px;
    color: #9f9f9f!important;
    line-height: 21px
}

.shape-box figcaption .btn {
    margin-top: 35px
}

.shape-box_inline>.after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--brand-primary-rgb), .94);
    background: -webkit-gradient(linear, left bottom, left top, from(var(--brand-primary)), to(var(--brk-base-2)));
    background: linear-gradient(to top, var(--brand-primary), var(--brk-base-2))
}

.shape-box_inline figcaption {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    /*padding: 54px 25px 35px;*/
    z-index: 2;
    overflow: hidden;
    text-align: center
}

/*.shape-box_inline figcaption .main-title {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-transition-property: \transform;
    transition-property: \transform;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}*/

/*.shape-box_inline figcaption .btn,
.shape-box_inline figcaption .main-description,
.shape-box_inline>.after {
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    opacity: 0
}*/

/*.shape-box_inline figcaption:after {
    content: '';
    position: absolute;
    top: -100vh;
    left: 0;
    right: 0;
    bottom: 78%;
    -webkit-transform: skewY(-27deg);
    transform: skewY(-27deg);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transition: bottom .4s;
    transition: bottom .4s;
    background: #fff;
    z-index: -1
}*/

.shape-box_inline figcaption .btn {
    margin: 30px 0 0;
    min-width: 0;
    width: 100%;
    box-shadow: 0 5px 20px 0 rgba(var(--brand-primary-rgb), .4)
}

.shape-box_inline figcaption .icon i,
.shape-box_inline figcaption .icon svg,
.shape-box_wave figcaption .icon i {
    -webkit-transition-property: max-height, overflow, -webkit-transform;
    transition-property: max-height, overflow, transform;
    transition-property: max-height, overflow, transform, -webkit-transform
}

.shape-box_inline figcaption .icon svg {
    max-height: 0;
    overflow: hidden;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.shape-box_inline figcaption .icon svg path,
.shape-box_triangle figcaption .icon>svg path,
.shape-box_wave figcaption .icon svg path {
    stroke: var(--brand-primary)
}

.shape-box_inline figcaption .icon .livicon-evo,
.shape-box_inline figcaption .icon i,
.shape-box_wave figcaption .icon i {
    max-height: 0;
    overflow: hidden;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.shape-box_inline figcaption .icon i,
.shape-box_wave figcaption .icon i {
    font-size: 80px;
    color: var(--brand-primary)
}

.shape-box_inline figcaption .icon .livicon-evo {
    margin-bottom: 0;
    -webkit-transition-property: max-height, margin-bottom, overflow, -webkit-transform;
    transition-property: max-height, margin-bottom, overflow, transform;
    transition-property: max-height, margin-bottom, overflow, transform, -webkit-transform
}

.shape-box_inline:hover>.after {
    opacity: .94!important
}

.shape-box_inline:hover figcaption .icon svg,
.shape-box_wave:hover figcaption .icon svg {
    max-height: 80px;
    overflow: visible;
    margin-bottom: 20px
}

.shape-box_inline:hover figcaption .icon i,
.shape-box_wave:hover figcaption .icon i {
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow: visible;
    margin-bottom: 20px;
    max-height: 80px
}

.shape-box_inline:hover figcaption .icon .livicon-evo,
.shape-box_wave:hover figcaption .icon .livicon-evo {
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow: visible;
    margin-bottom: 20px;
    max-height: 150px
}

.shape-box_inline:hover figcaption .main-title {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.shape-box_inline:hover figcaption .btn,
.shape-box_inline:hover figcaption .main-description {
    opacity: 1
}

.shape-box_inline:hover figcaption:after {
    bottom: 0
}

.shape-box_inline_dark>.after {
    background: rgba(20, 20, 20, .8)
}

.shape-box_wave>.before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--brand-primary-rgb), .94);
    background: -webkit-gradient(linear, left bottom, left top, from(var(--brand-primary)), to(var(--secondary)));
    background: linear-gradient(to top, var(--brand-primary), var(--secondary));
    opacity: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s
}

.shape-box_wave figcaption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 45px 15px 35px;
    z-index: 2;
    overflow: hidden
}

.shape-box_wave figcaption>.wave-circle-1,
.shape-box_wave figcaption>.wave-circle-2 {
    position: absolute;
    top: 30px;
    width: 120px;
    height: 80px;
    border-radius: 50%;
    opacity: 1!important
}

.shape-box_wave figcaption>.wave-circle-1 {
    left: 10px;
    background: var(--brand-primary);
    z-index: -1
}

.shape-box_wave figcaption>.wave-circle-2 {
    right: -50px;
    background: var(--secondary);
    z-index: -2
}

.shape-box_wave figcaption .main-title {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-transition-property: \transform;
    transition-property: \transform;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.shape-box_wave figcaption .main-description {
    opacity: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s
}

.shape-box_wave figcaption>.after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 80%;
    -webkit-transition: bottom .4s;
    transition: bottom .4s;
    background: #fff;
    opacity: 1!important;
    z-index: -1
}

.shape-box_wave figcaption>.after svg {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -28px
}

@media screen and (max-width:1230px) {
    .shape-box_wave figcaption>.after svg {
        bottom: -40px
    }
}

.shape-box_wave figcaption .btn {
    margin: 30px 0 0;
    position: absolute;
    left: 50%;
    bottom: 30px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 180px;
    opacity: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s
}

.shape-box_wave figcaption .btn>.after,
.shape-box_wave figcaption .btn>.before {
    background: #fff;
    color: var(--brand-primary)
}

.shape-box_wave figcaption .icon svg {
    max-height: 0
}

.shape-box_wave figcaption .icon .livicon-evo {
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: max-height, margin-bottom, overflow, -webkit-transform;
    transition-property: max-height, margin-bottom, overflow, transform;
    transition-property: max-height, margin-bottom, overflow, transform, -webkit-transform;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.shape-box_wave:hover>.before {
    opacity: .8
}

.shape-box_half:hover figcaption,
.shape-box_shape:hover figcaption,
.shape-box_stripe:hover figcaption,
.shape-box_wave:hover figcaption .main-title {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.shape-box_wave:hover figcaption .main-description {
    opacity: 1
}

.shape-box_wave:hover figcaption>.after {
    bottom: 140px
}

.shape-box_stripe:hover .icon,
.shape-box_stripe:hover .livicon-evo,
.shape-box_wave:hover figcaption .btn {
    opacity: 1
}

.shape-box_stripe {
    overflow: hidden;
    border-bottom: 2px solid var(--brand-primary)
}

.shape-box_stripe:before,
.shape-box_stripe>.after {
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    height: 155px
}

.shape-box_stripe>.after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary);
    -webkit-transform: skewY(-19deg);
    transform: skewY(-19deg);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transition-property: height, opacity, \transform;
    transition-property: height, opacity, \transform
}

.shape-box_shape:before,
.shape-box_stripe:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1
}

.shape-box_stripe:before {
    -webkit-transform: skewY(19deg);
    transform: skewY(19deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition-property: \transform, height;
    transition-property: \transform, height
}

.shape-box_stripe .icon,
.shape-box_stripe .livicon-evo {
    position: absolute;
    top: 10%;
    left: 50%;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
    z-index: 10
}

.shape-box_stripe .icon i,
.shape-box_stripe .icon svg,
.shape-box_stripe .livicon-evo i,
.shape-box_stripe .livicon-evo svg,
.shape-box_wave figcaption .icon svg {
    overflow: hidden;
    -webkit-transition-property: max-height, overflow, -webkit-transform;
    transition-property: max-height, overflow, transform;
    transition-property: max-height, overflow, transform, -webkit-transform;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.shape-box_stripe .icon svg,
.shape-box_stripe .livicon-evo svg {
    height: 0
}

.shape-box_shape .icon svg path,
.shape-box_stripe .icon svg path,
.shape-box_stripe .livicon-evo svg path {
    stroke: #fff
}

.shape-box_stripe .icon i,
.shape-box_stripe .livicon-evo i {
    font-size: 80px;
    color: #fff
}

.shape-box_stripe .btn {
    margin: 25px 0 0;
    min-width: 0;
    width: 100%
}

.shape-box_half figcaption,
.shape-box_shape figcaption,
.shape-box_stripe figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 30px 30px;
    -webkit-transition: \transform .4s;
    transition: \transform .4s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    z-index: 3
}

.shape-box_half figcaption h4,
.shape-box_shape figcaption h4,
.shape-box_stripe figcaption h4 {
    margin-top: 8px
}

.shape-box_stripe figcaption .show-cont {
    position: absolute;
    bottom: -webkit-calc(100% + 30px);
    bottom: calc(100% + 30px);
    left: 30px;
    right: 30px;
    -webkit-transition: bottom .4s;
    transition: bottom .4s
}

.shape-box_stripe:hover .icon svg,
.shape-box_stripe:hover .livicon-evo svg {
    height: 90px;
    overflow: visible;
    margin-bottom: 20px
}

.shape-box_stripe:hover .icon i,
.shape-box_stripe:hover .livicon-evo i {
    overflow: visible;
    margin-bottom: 20px
}

.shape-box_half:hover figcaption .show-cont,
.shape-box_shape:hover figcaption .show-cont,
.shape-box_stripe:hover figcaption .show-cont {
    bottom: 100%
}

.shape-box_stripe:hover:before,
.shape-box_stripe:hover>.after {
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg);
    height: 60%
}

.shape-box_stripe:hover>.after {
    height: 100%;
    opacity: .8
}

.shape-box_shape {
    overflow: hidden;
    border-bottom: 3px solid var(--brand-primary)
}

.shape-box_shape .curve {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.shape-box_shape .curve path {
    fill: #fff
}

.shape-box_shape:before {
    height: 90px
}

.shape-box_shape:after {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.shape-box_shape .icon {
    font-size: 50px;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    position: absolute;
    top: 60px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    opacity: 0;
    z-index: 10
}

.shape-box_shape .icon svg {
    height: 75px
}

.shape-box_shape .icon i {
    font-size: 70px;
    color: #fff
}

.shape-box_shape .icon>.after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: -webkit-gradient(linear, left top, right top, from(var(--brand-primary)), to(var(--secondary)));
    background: linear-gradient(to right, var(--brand-primary), var(--secondary));
    border-radius: 50%;
    z-index: -1
}

.shape-box_shape .btn {
    margin: 25px 0 0;
    min-width: 0;
    width: 100%;
    box-shadow: 0 5px 20px 0 rgba(var(--brand-primary-rgb), .4)
}

.shape-box_shape figcaption .show-cont {
    position: absolute;
    bottom: -webkit-calc(100% + 30px);
    bottom: calc(100% + 30px);
    left: 30px;
    right: 30px;
    -webkit-transition: bottom .4s;
    transition: bottom .4s
}

.shape-box_half:hover>.after,
.shape-box_shape:hover .icon,
.shape-box_triangle:hover figcaption .icon {
    opacity: 1
}

.shape-box_shape:hover:after {
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.shape-box_half {
    overflow: hidden;
    text-align: left
}

.shape-box_half>.after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--secondary-rgb), .8);
    opacity: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s
}

.shape-box_half:before,
.shape-box_shape:after,
.shape-box_triangle figcaption:after,
.shape-box_triangle figcaption:before {
    content: '';
    position: absolute;
    background: #fff;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: \transform .4s;
    transition: \transform .4s
}

.shape-box_half:before {
    top: 0;
    bottom: 0;
    -webkit-transform: skewY(58deg);
    transform: skewY(58deg);
    left: 0;
    right: 0;
    z-index: 1
}

.shape-box_half .btn {
    margin: 25px 0 0;
    min-width: 0;
    width: 100%;
    box-shadow: 0 5px 20px 0 rgba(var(--brand-primary-rgb), .4)
}

.shape-box_half figcaption .show-cont {
    position: absolute;
    bottom: -webkit-calc(100% + 30px);
    bottom: calc(100% + 30px);
    left: 30px;
    right: 30px;
    -webkit-transition: bottom .4s;
    transition: bottom .4s
}

.shape-box_half:hover:before {
    -webkit-transform: skewY(20deg);
    transform: skewY(20deg)
}

.shape-box_triangle.shape-invert figcaption:after,
.shape-box_triangle.shape-invert figcaption:before {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: skewY(-12deg);
    transform: skewY(-12deg)
}

.shape-box_triangle.shape-invert figcaption:after {
    -webkit-transform: skewY(12deg);
    transform: skewY(12deg)
}

.shape-box_triangle>.after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left bottom, left top, from(var(--brand-primary)), to(var(--secondary)));
    background: linear-gradient(to top, var(--brand-primary), var(--secondary));
    opacity: .7
}

.shape-box_triangle figcaption {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    padding: 0 30px;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 60px;
    background: #fff;
    z-index: 2
}

.shape-box_triangle figcaption .show-cont {
    -webkit-transition: \transform .4s;
    transition: \transform .4s
}

.shape-box_triangle figcaption:after,
.shape-box_triangle figcaption:before {
    left: -1px;
    right: -1px;
    height: 60px;
    z-index: -1
}

.shape-box_triangle figcaption:before {
    top: -60px;
    -webkit-transform: skewY(12deg);
    transform: skewY(12deg)
}

.shape-box_triangle figcaption:after {
    bottom: -60px;
    -webkit-transform: skewY(-12deg);
    transform: skewY(-12deg)
}

.shape-box_triangle figcaption .btn {
    margin-top: 30px;
    min-width: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0 5px 20px 0 rgba(var(--brand-primary-rgb), .4)
}

.shape-box_triangle figcaption .icon {
    overflow: hidden;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
    font-size: 50px;
    min-height: 80px
}

.shape-box_triangle figcaption .icon>svg {
    height: 80px
}

.shape-box_triangle figcaption .icon i {
    font-size: 80px;
    color: var(--brand-primary)
}

.shape-box_triangle:hover figcaption .show-cont {
    -webkit-transform: translateY(70px);
    transform: translateY(70px)
}

.shape-box_triangle:hover figcaption:after,
.shape-box_triangle:hover figcaption:before {
    -webkit-transform: skewY(0deg);
    transform: skewY(0deg)
}
.clr_white{
	color:white;	
}
.shape-box_inline figcaption h4{
	margin-top: 10px;
}
.service-cat{
	box-shadow:0 5px 30px rgba(0,0,0,.1);
	background: white;
	line-height: 100px;
	font-size: 28px;
	padding-left:20px;
	text-transform: uppercase;
    border-radius: 100px;
    margin:0 auto;
    margin-bottom: 50px;
}
.service-cat img{
	width: 100px;
}
.list-styled{
    list-style:circle;
    margin-right:  30px;
}
.repair_img img{width: 150px;height:150px;}