.features-area{position:relative;padding-top:117px;&::before{position:absolute;content:'';left:0;top:0;height:100%;width:100%;background-color:rgb(44 47 80 / .5)}& .features-item{padding:50px 8px;border-radius:10px;@include transition(0.3s);@media #{$lg}{padding:50px 0}@media #{$md}{padding:50px 38px}@media #{$xs}{padding:50px 20px}@media #{$sm}{padding:50px 20px}&>i{height:70px;width:70px;text-align:center;line-height:70px;border-radius:50%;font-size:30px;color:$white;background:#3b7eff;@include transition(0.3s)}& .title{font-size:24px;line-height:30px;font-weight:600;color:$black;padding:0 10px;padding-top:25px;@include transition(0.3s);@media #{$lg}{font-size:20px}}& a{font-size:15px;color:#3b7eff;font-weight:600;margin-top:24px;@include transition(0.3s);& i{padding-left:6px}}&.item-2{&>i{background:#f86e03}& a{color:#f86e03}}&.item-3{&>i{background:#0154f7}& a{color:#0154f7}}&.item-4{&>i{background:#ef5b51}& a{color:#ef5b51}}&:hover{background:#3B7EFF;&>i{background:$white;color:#3B7EFF}& .title{color:$white}& a{color:$white}&.item-2{background:#f86e03;&>i{color:#f86e03}}&.item-3{background:#0154f7;&>i{color:#0154f7}}&.item-4{background:#ef5b51;&>i{color:#ef5b51}}}}}.featires-2-area{padding-top:117px;& .section-title{& p{padding-bottom:48px}}& .title-text{& p{font-size:14px;line-height:26px;color:#8a8a8a;padding-top:20px}}& .featires-item{& .featires-thumb{overflow:hidden;& img{width:100%;@include transition(0.3s);@include transform(scale(1))}}& .featires-content{box-shadow:0 14px 28px 0 rgb(42 121 241 / .1);border-radius:7px;margin-left:20px;margin-right:20px;margin-top:-50px;text-align:center;background:$white;z-index:99;position:relative;padding:48px 25px 22px;@include transition(0.3s);@media #{$lg}{padding:48px 0 22px}@media #{$md}{padding:48px 55px 22px}@media #{$sm}{padding:48px 35px 22px}&>i{height:60px;width:60px;text-align:center;border-radius:50%;background:#3b7eff;line-height:60px;font-size:24px;color:$white;position:absolute;left:50%;top:-28px;transform:translateX(-50%);@include transition(0.3s)}& .title{font-size:18px;font-weight:600;color:$black;line-height:24px;@include transition(0.3s)}& a{margin-top:12px;font-size:15px;font-weight:500;color:$theme-color;@include transition(0.3s)}}&.item-2{& .featires-content{&>i{background:#f86e03}& a{color:#f86e03}}}&.item-3{& .featires-content{&>i{background:#0154f7}& a{color:#0154f7}}}&.item-4{& .featires-content{&>i{background:#ef5b51}& a{color:#ef5b51}}}&:hover{& .featires-thumb{& img{@include transform(scale(1.1))}}& .featires-content{background:#3b7eff;&>i{color:#3b7eff;background:$white}& .title{color:$white}& a{color:$white}}&.item-2{& .featires-content{background:#f86e03;& i{color:#f86e03}}}&.item-3{& .featires-content{background:#0154f7;& i{color:#0154f7}}}&.item-4{& .featires-content{background:#ef5b51;& i{color:#ef5b51}}}}}}