/* 3. features */
.features-icon-img{
    position: relative;
    margin-bottom: 37px;
    z-index: 9;
    &::before {
        position: absolute;
        content: "";
        background: #fff4ee;
        height: 55px;
        width: 55px;
        left: -29px;
        top: -30px;
        transition: .3s;
        z-index: -1;
    }
}
.features-wrapper:hover .features-icon-img::before{left: 0;}
.features-text{
    & h3{
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 21px;
        & span{
            color: $theme-color;
        }
    }
    & p{
        margin-bottom: 17px;
        line-height: 25px;
        margin-right: 30px;
    }
}
.b-button{
    & > a{
        font-size: 15px;
        color: $black;
        font-weight: 700;
        text-transform: uppercase;
        border-bottom: 2px solid $black;
        transition: .3s;
        display: inline-block;
        &:hover{color:$theme-color;border-color:$theme-color;}
    }
}
.b-02-button > a{
    color:$body-text-color;
    border-bottom:2px solid $body-text-color;
    padding-bottom: 3px;
}
.black-b-button > a{
    color:$black;
    border-bottom:2px solid $black;
    padding-bottom: 3px;
}
.white-b2-button > a{
    color:$white;
    border-bottom:2px solid $white;
    padding-bottom: 3px;
}
.white-b-button > a{
    color:$white;
    border-color:$white;
}


// features-02
.features-bg-img {
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    background-position: center center; 
}
.features-02-wrapper {
	padding: 80px 240px 100px 100px;
}
.play-video-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    text-align: center;
    & a{
    font-size: 22px;
    color: $theme-color;
    background: $white;
	height: 120px;
	display: inline-block;
	width: 120px;
	line-height: 120px;
	text-align: center;
	border-radius: 50%;
    transition: .3s;
    position: relative;
    &::before{
        content: '';
        display: inline-block;
        position: absolute;
        top: -2px;
        left: -2px;
        bottom: -2px;
        right: -2px;
        border-radius: inherit;
        border: 1px solid #fff;
        -webkit-animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
        animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
        transition: .3s;
     }
    }
}
@-webkit-keyframes btnIconRipple { 0% { border-width: 4px; -webkit-transform: scale(1); transform: scale(1); }
80% { border-width: 1px; -webkit-transform: scale(1.35); transform: scale(1.35); }
100% { opacity: 0; } }
.features-02-link{
    & ul{
        & li{
            padding-bottom: 23px;
            &:last-child{padding-bottom: 0;}
        }
    }
}
.features-02-icon {
    margin-right: 28px;
    & i {
        font-size: 24px;
        color: $theme-color;
        line-height: 60px;
        width: 60px;
        background: #fae9e2;
        text-align: center;
        border-radius: 50%;
        line-height: 60px;
        transition: .3s;
    }
}  
.features-02-link li:hover .features-02-icon i{
    background-image: -moz-linear-gradient( -51deg, rgb(235,18,10) 0%, rgb(255,94,20) 99%);
    background-image: -webkit-linear-gradient( -51deg, rgb(235,18,10) 0%, rgb(255,94,20) 99%);
    background-image: -ms-linear-gradient( -51deg, rgb(235,18,10) 0%, rgb(255,94,20) 99%);
    color:$white;
}
.features-02-info{
    overflow: hidden;
    & h3{
        font-size: 22px;
        margin-bottom: 12px;
    }
    & p{
        margin-bottom: 0;
    }
}

// features-03
.features-03-img{
    & > img{
        width: 100%;
    }
    &::before{
        background-image: -webkit-linear-gradient(-90deg, rgba(2, 2, 2, 0.8902) 0%, rgba(149, 56, 12, 0.45) 58%, rgba(255, 94, 20, 0.01) 100%, #ff5e14 100%);
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: .3s;
        opacity: 1;
    }
    &::after{
        background-image:-webkit-linear-gradient(-90deg, rgba(252, 79, 0, 0.85882) 0%, rgba(254, 88, 12, 0.43) 50%, rgba(255, 94, 20, 0.01) 100%, #ff5e14 100%);
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: .3s;
        opacity: 0;
    }
}
.features-03-wrapper:hover .features-03-img::before{opacity: 0;}
.features-03-wrapper:hover .features-03-img::after{opacity: 1;}
.features-03-text {
	position: absolute;
	top: 0;
	padding: 40px;
	z-index: 99; 
    & h3{
        color: $white;
        font-size: 24px;
        line-height: 1.4;
        position: relative;
        margin-top: 28px;
        letter-spacing: -.3px;
        margin-bottom: 0;
        padding-bottom: 30px;
        &::before {
            height: 4px;
            width: 51px;
            background: $white;
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            transition: 0.3s;
        }
    }
    & h2{
        font-size: 90px;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: $white;
        margin-bottom: 0;
        color: $white;
        position: absolute;
        top: 95px;
        opacity: 0.2;
        font-weight: 700;
    }
}
.services-b-btton {
	position: absolute;
	bottom: 40px;
    right: 40px;
    z-index: 9;
    & > a{
        color:$white;
        border-bottom:2px solid $white;
        padding-bottom: 3px;
    }
}
// single-features-03
.features-3-area{
    background-image: -moz-linear-gradient( -51deg, rgb(235,18,10) 0%, rgb(255,94,20) 99%);
    background-image: -webkit-linear-gradient( -51deg, rgb(235,18,10) 0%, rgb(255,94,20) 99%);
    background-image: -ms-linear-gradient( -51deg, rgb(235,18,10) 0%, rgb(255,94,20) 99%);
}
.single-features-03 {
	padding: 110px 273px 130px 100px;
}
.single-features-03 .features-02-info h3 {
	color:$white;
}
.single-features-03 .features-02-info p {
	margin-bottom: 0;
	color: $white;
}
.single-features-03 .features-02-link li:hover .features-02-icon i {
    background-image: none;
    color:$theme-color;
}
.features-03-button .btn{color:$theme-color;}
// features-04
.features-01-area {
	margin-top: -258px;
	background: $white;
	margin-left: 310px;
	margin-right: 310px;
}
.features-01-wrapper{
    margin-left: 20px;
}
.features-01-wrapper .features-text{
    overflow: hidden;
}
.features-01-wrapper .features-icon-img {
	margin-right: 22px;
	margin-top: 21px;
} 
.features-01-wrapper .features-icon-img::before {
	left: -19px;
	top: -18px;
}
.features-01-wrapper .features-text h3 {
	line-height: 1;
	margin-bottom: 11px;
}
.features-01-wrapper .features-text p {
	margin-bottom: 9px;
}