/*==================================================
FEATURES
==================================================*/

.features{

    padding:30px 0 60px;

    background:#000;

}

/*==================================================
TITULO
==================================================*/

.features-title{

    max-width:700px;

    margin:0 auto 45px;

    text-align:center;

}

.features-title h2{

    font-size:38px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:12px;

    color:#ffffff;

}

.features-title p{

    color:#BEBEBE;

    font-size:16px;

    line-height:1.7;

}

/*==================================================
GRID
==================================================*/

.features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

}

/*==================================================
CARD
==================================================*/

.feature-card{

    position:relative;

    background:rgba(18,18,18,.78);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:32px 24px;

    min-height:245px;

    text-align:center;

    overflow:hidden;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    transition:.35s;

}

/*==================================================
LINEA SUPERIOR
==================================================*/

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,#E30613,#ff3b4b);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

/*==================================================
ICONO
==================================================*/

.feature-icon{

    width:68px;

    height:68px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(227,6,19,.12);

    color:#E30613;

    font-size:28px;

    transition:.35s;

}

/*==================================================
TITULO TARJETA
==================================================*/

.feature-card h3{

    font-size:20px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:14px;

}

/*==================================================
TEXTO
==================================================*/

.feature-card p{

    color:#BEBEBE;

    line-height:1.7;

    font-size:14px;

}

/*==================================================
HOVER
==================================================*/

.feature-card:hover{

    transform:translateY(-8px);

    border-color:rgba(227,6,19,.45);

    box-shadow:

        0 16px 35px rgba(227,6,19,.15);

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-card:hover .feature-icon{

    background:#E30613;

    color:#fff;

    transform:scale(1.08);

}