/* ==================================================
   DIFERENCIAIS
================================================== */

.hk-diferenciais{

    position:relative;

    overflow:hidden;

    background:#000;

    padding:40px 0 50px;

}

/* ==================================================
   IMAGEM DE FUNDO
================================================== */

.hk-diferenciais-bg{

    position:absolute;

    top:0;
    left:0;

    width:52%;

    height:100%;

    background:
        url('/mvp/site/assets/img/empresas/diferenciais-bg.png')
        left center / cover
        no-repeat;

    z-index:1;
}

/* fade para integração */

.hk-diferenciais-bg::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.20) 45%,
            rgba(0,0,0,.75) 75%,
            rgba(0,0,0,1) 100%
        );

}

.hk-diferenciais-bg::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:45%;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0),
            rgba(0,0,0,.40),
            rgba(0,0,0,.85),
            #000
        );

    z-index:2;
}

/* ==================================================
   CONTAINER
================================================== */

.hk-diferenciais .container{

    position:relative;

    z-index:2;

}

/* ==================================================
   HEADER
================================================== */

.hk-diferenciais-header{

    max-width:720px;

    margin-left:auto;

    margin-bottom:60px;

    text-align:right;

}

.hk-diferenciais-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:999px;

    background:rgba(57,212,0,.10);

    border:1px solid rgba(57,212,0,.25);

    color:#39d400;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hk-diferenciais-header h2{

    color:#fff;

    font-size:3rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:18px;

}

.hk-diferenciais-header h2 span{

    color:#39d400;

}

.hk-diferenciais-header p{

    color:#bdbdbd;

    font-size:1.05rem;

    line-height:1.9;

    margin-left:auto;

    max-width:680px;
    margin-bottom:18px;

}

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

.hk-diferenciais-grid{

    display:grid;

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

    gap:25px;

}

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

.hk-diferencial-item{

    background:#0a0a0a;

    border:1px solid rgba(57,212,0,.15);

    border-radius:22px;

    padding:18px;

    display:block;

}

.hk-diferencial-item:hover{

    transform:translateY(-8px);

    border-color:rgba(57,212,0,.40);

    box-shadow:
        0 15px 40px rgba(57,212,0,.08);

}

.hk-diferencial-icon{

    width:70px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:20px;
}

.hk-diferencial-icon i{

    color:#39d400;

    font-size:28px;

}

.hk-diferencial-item h3{

    display:block;

    margin-bottom:15px;
}

.hk-diferencial-item p{

    color:#bdbdbd;

    line-height:1.9;

    margin:0;

}

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

@media (max-width:1200px){

    .hk-diferenciais-grid{

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

    }

    .hk-diferenciais-header{

        text-align:center;

        margin:0 auto 50px;

    }

    .hk-diferenciais-header p{

        margin:0 auto;

    }

    .hk-diferenciais-bg{

        opacity:.25;

        width:100%;

    }

}

@media (max-width:768px){

    .hk-diferenciais{

        padding:60px 0;

    }

    .hk-diferenciais-header h2{

        font-size:2rem;

    }

    .hk-diferenciais-grid{

        grid-template-columns:1fr;

    }

}