
/*============================
  Nftpro feature Area Css
==============================*/
.feature-area {
    background: #111;
    margin-top: 50px;
    padding-bottom: 100px;
    padding-top: 40px;
}
.feature-single-box {
    padding: 20px;
    text-align: center;
    background: #22262a;
    border-radius: 5px;
    margin-bottom: 30px;
}
.feature-icon {
    position: relative;
    z-index: 1;
    padding: 0 0 46px;
}
.feature-icon:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 2px;
    height: 30px;
    background-image: linear-gradient(to bottom, #FF9416, #122135);
}
.feature-icon:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: 106px;
    top: -53px;
    width: 30%;
    height: 20%;
    box-shadow: 16px 80px 60px #ff9416;
    opacity: 0;
    transition: .5s;
}
.feature-title h3 {
    font-size: 22px;
    font-weight: 600;
    background: linear-gradient( to right, #FF9416 50%, #fff 50%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
    transition: .5s;
    padding: 11px 0 0;
}
.feature-title p {
    font-size: 15px;
    color: #919da4;
    padding: 14px 0 0;
}
.feature-icon img {
    transition: .5s;
}
.feature-single-box:hover .feature-title h3{
    background-position: 0;
}
.feature-single-box:hover  .feature-icon:after{
    opacity: 1;
}
/*upper1*/
.upper1 .feature-title h3 {
    background: linear-gradient( to right, #00B98E 50%, #fff 50%);
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
}
.upper1 .feature-icon:before {
    background-image: linear-gradient(to bottom, #00B98E, #122135);
}
.upper1 .feature-icon:after {
    box-shadow: 16px 80px 60px #00B98E;
}
/*upper2*/
.upper2 .feature-title h3 {
    background: linear-gradient( to right, #0AA2FF 50%, #fff 50%);
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
}
.upper2 .feature-icon:before {
    background-image: linear-gradient(to bottom, #0AA2FF, #122135);
}
.upper2 .feature-icon:after {
    box-shadow: 16px 80px 60px #0AA2FF;
}
/*upper3*/
.upper3 .feature-title h3 {
    background: linear-gradient( to right, #FF68E4 50%, #fff 50%);
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
}
.upper3 .feature-icon:before {
    background-image: linear-gradient(to bottom, #FF68E4, #122135);
}
.upper3 .feature-icon:after {
    box-shadow: 16px 80px 60px #FF68E4;
}
/*upper4*/
.upper4 .feature-title h3 {
    background: linear-gradient( to right, #00BCE2 50%, #fff 50%);
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
}
.upper4 .feature-icon:before {
    background-image: linear-gradient(to bottom, #00BCE2, #122135);
}
.upper4 .feature-icon:after {
    box-shadow: 16px 80px 60px #00BCE2;
}
/*upper5*/
.upper5 .feature-title h3 {
    background: linear-gradient( to right, #FF5152 50%, #fff 50%);
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
}
.upper45 .feature-icon:before {
    background-image: linear-gradient(to bottom, #FF5152, #122135);
}
.upper5 .feature-icon:after {
    box-shadow: 16px 80px 60px #FF5152;
}
/*feature area style two*/
.style-two.feature-area {
    background: #0D0D0D;
}
/*style two feature box*/
.style-two .feature-single-box {
    padding: 35px 50px 15px;
    text-align: center;
    background: #16141C;
    border-radius: 5px;
    margin-bottom: 30px;
}
.style-two .feature-icon1 i {
    display: inline-block;
    font-size: 35px;
    color: #FFBD00;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #242227;
    border-radius: 50%;
    transition: .5s;
}
.style-two .feature-title h3 {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient( to right, #FFBB00 50%, #fff 50%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
    transition: .5s;
    padding: 16px 0 0;
}
.style-two .feature-title p {
    font-size: 16px;
    color: #919da4;
    padding: 10px 0 0;
}
.feature-bottom-text p {
    color: #fff;
    font-size: 15px;
}
.feature-bottom-text p i {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #202126;
    border-radius: 40px;
    color: #C48C00;
    margin-right: 5px;
}
.feature-bottom-text span {
    color: #FABB04;
    text-decoration: underline;
}
.feature-bottom-text span a {
    color: #FABB04;
}
.style-two .feature-single-box:hover .feature-icon1 i {
    background: #FFBB00;
    color: #212529;
}
/*style-three feature area*/
.style-three.feature-area {
    background: #091326;
}
.style-three .feature-single-box {
    padding: 0 40px;
    text-align: left;
    background: transparent;
    border-radius: 5px;
    margin-bottom: 30px;
}
.style-three .feature-title h3 {
    background: linear-gradient( to right, #f4633a 50%, #fff 50%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
    transition: .5s;
    padding: 20px 0 0px;
}
/*feature area style four*/
.style-four.feature-area {
    background: #0A1527;
}
.style-four .feature-single-box {
    padding: 45px 52px 40px;
    text-align: left;
    background: #0F1B30;
    border-radius: 5px;
    margin-bottom: 30px;
}
.style-four .feature-icon1 {
    float: left;
    margin-right: 30px;
    width: 95px;
    height: 95px;
    line-height: 95px;
    text-align: center;
    background: #182841;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.style-four .feature-icon1:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, #1DD1A1 35%, #1DD1A1 82% );
    border-radius: 50%;
    transform: scale(0);
    transition: .5s;
}
.feature-icon1 img {
    transition: .5s;
}
.style-four .feature-title {
    overflow: hidden;
}
.style-four .feature-title h3 {
    font-size: 24px;
    background: linear-gradient( to right, #f4633a 50%, #fff 50%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 200%, 100%;
    background-position: 100%;
    transition: .5s;
    padding: 0 0 10px;
}
.style-four .feature-title h3 a {
    font-weight: 600;
}
.style-four .feature-title p {
    font-size: 16px;
    color: #919DA4;
    padding: 14px 0 0;
}
.feature-button a {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Montserrat';
    transition: .5s;
    color: #1dd1a1;
}
.style-four .feature-single-box:hover .feature-icon1 img {
    filter: brightness(0) invert(1);
}
.style-four .feature-single-box:hover .feature-icon1:before {
    transform: scale(1);
}
/*feature area style five*/
.style-five.feature-area {
    background: #0B182C;
}
.style-five .feature-single-box {
    padding: 40px 35px 20px;
    text-align: center;
    background: transparent;
    border-radius: 5px;
    margin-bottom: 30px;
}
.style-five .feature-icon1 {
    width: 95px;
    height: 95px;
    line-height: 95px;
    text-align: center;
    background: #121F37;
    border-radius: 50px;
    margin: 0 auto 18px;
}
.style-five .feature-title p {
    font-size: 16px;
    color: #919da4;
    padding: 14px 0 0;
}





.feature-icon img{
    width: 60px;
    height: 60;
}

.feature-icon{
     width: 60px;
    text-align: center;
    margin:auto;
}


