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

.features{

    padding:100px 0;

    background:#F8FAFC;

}


/* ==========================================================
   LAYOUT
========================================================== */

.features-layout{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:40px;

    align-items:center;

}


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

.features-content span{

    display:inline-block;

    margin-bottom:14px;

    color:var(--excel);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.features-content h2{

    margin-bottom:22px;

    font-size:3.1rem;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1px;

    color:#111827;

}

.features-content p{

    max-width:390px;

    font-size:1.05rem;

    line-height:1.8;

    color:#6B7280;

}


/* ==========================================================
   BOTÃO
========================================================== */

.feature-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    padding:15px 34px;

    border-radius:14px;

    border:2px solid var(--excel);

    background:#fff;

    color:var(--excel);

    font-weight:700;

    text-decoration:none;

    transition:.30s;

}

.feature-btn:hover{

    background:var(--excel);

    color:#fff;

}


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

.features-grid{

    display:grid;

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

    gap:30px;

}


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

.feature-card{

    position:relative;

    padding:30px;

    border-radius:22px;

    background:#FFF;

    border:1px solid #E8EEF5;

    overflow:hidden;

    transition:.35s;

    box-shadow:

        0 10px 25px rgba(15,23,42,.05);

}

/* detalhe superior */

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

}

/* Excel */

.feature-card:nth-child(1)::before{

    background:#217346;

}

/* Power BI */

.feature-card:nth-child(2)::before{

    background:#F2C811;

}

/* Análise de Dados */

.feature-card:nth-child(3)::before{

    background:#2563EB;

}
.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 20px 45px rgba(15,23,42,.10);

}


/* ==========================================================
   ÍCONE
========================================================== */

.feature-icon{

    width:88px;

    height:88px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 18px;

    border-radius:50%;

    font-size:2.5rem;

    transition:.35s;

}

/* Excel */

.feature-card:nth-child(1) .feature-icon{

    background:#ECFDF3;

    color:#217346;

}

/* Power BI */

.feature-card:nth-child(2) .feature-icon{

    background:#FFF8DC;

    color:#F2C811;

}

/* Análise de Dados */

.feature-card:nth-child(3) .feature-icon{

    background:#EFF6FF;

    color:#2563EB;


}

.feature-card:hover .feature-icon{

    transform:scale(1.08);

}
/* ==========================================================
  SUB TÍTULO
========================================================== */

.feature-badge{

    display:block;

    margin:0 0 12px;

    font-size:1.10rem;

    line-height:1.3;

    color:#6B7280;

    text-align:center;

}

/* ==========================================================
   TÍTULO
========================================================== */

.feature-card h3{

    margin:0 0 12px;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.3;

    color:#111827;

    text-align:center;

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

.feature-card p{

    margin:0;

    font-size:1rem;

    line-height:1.75;

    color:#6B7280;

    text-align:left;

}


/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:1200px){

    .features-layout{

        grid-template-columns:1fr;

        gap:55px;

    }

    .features-content{

        text-align:center;

    }

    .features-content p{

        margin:auto;

        max-width:650px;

    }

}

@media(max-width:992px){

    .features-grid{

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

    }

}

@media(max-width:768px){

    .features{

        padding:80px 0;

    }

    .features-content h2{

        font-size:2.5rem;

    }

}

@media(max-width:600px){

    .features-grid{

        grid-template-columns:1fr;

    }

    .feature-card{

        padding:26px;

    }

    .feature-icon{

        width:76px;

        height:76px;

        font-size:2.1rem;

    }

    .feature-card h3{

        font-size:1.35rem;

    }

    .feature-btn{

        width:100%;

        margin-top:30px;

    }

}