/* ==================================================
   HARDKING - SUPORTE CORPORATIVO
================================================== */

.hk-suporte{
    position:relative;
    overflow:hidden;

    padding:90px 0;

    background:#f8f9fa;
}

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

.hk-suporte::before{
    content:'';
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            90deg,
            rgba(248,249,250,0) 0%,
            rgba(248,249,250,0.08) 20%,
            rgba(248,249,250,0.25) 35%,
            rgba(248,249,250,0.55) 50%,
            rgba(248,249,250,0.85) 65%,
            rgba(248,249,250,1) 78%
        ),
        url('/mvp/site/assets/img/empresas/suporte-corporativo-left.png');

    background-position:left center;
    background-size:cover;
    background-repeat:no-repeat;
}

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

.hk-suporte .container{

    pposition:relative;
    z-index:2;

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

.hk-suporte-content{

    width:50%;
    max-width:650px;

    margin-left:auto;

    text-align:right;
}

/* ==========================================
   BADGE
========================================== */

.hk-suporte-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 20px;

    border-radius:999px;

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

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

    color:#39d400;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:20px;
}

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

.hk-suporte-title{

    font-size:4rem;

    line-height:1.05;

    font-weight:800;

    color:#111;

    margin-bottom:30px;
}

.hk-suporte-title span{

    color:#39d400;
}

/* ==========================================
   DESCRIÇÃO
========================================== */

.hk-suporte-description{

    font-size:1.15rem;

    line-height:1.9;

    color:#555;

    margin-bottom:40px;
}

/* ==========================================
   LISTA
========================================== */

.hk-suporte-list{

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

    gap:18px 30px;

    grid-template-columns:repeat(2,230px);

    max-width:530px;

    margin-top:30px;
    margin-left:auto;
}

.hk-suporte-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#222;

    font-size:0.9rem;

    line-height:1.6;

    text-align:left;

    justify-content:flex-start;

}

.hk-suporte-list li i{

    color:#39d400;

    margin-top:4px;

    flex-shrink:0;
}

.hk-suporte-more{

    color:#39d400 !important;

    grid-column:1 / -1;

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-top:5px;

    font-weight:680;
}

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

@media(max-width:1200px){

    .hk-suporte-content{

        width:55%;
    }

    .hk-suporte-title{

        font-size:3.2rem;
    }
}

@media(max-width:992px){

    .hk-suporte{

        padding:70px 0;
    }

    .hk-suporte::before{

        opacity:.18;

        background-position:center center;
    }

    .hk-suporte .container{

        justify-content:center;
    }

    .hk-suporte-content{

        width:100%;

        max-width:none;
    }

    .hk-suporte-title{

        font-size:2.6rem;
    }
}

@media(max-width:768px){

    .hk-suporte-list{

        grid-template-columns:1fr;
    }

    .hk-suporte-title{

        font-size:2.2rem;
    }
}