/* ==================================================
   HARDKING - INFRAESTRUTURA CORPORATIVA
================================================== */

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

    background-image:
        linear-gradient(
            to bottom,
            rgba(248,249,250,0) 0%,
            rgba(248,249,250,0) 70%,
            rgba(248,249,250,.35) 85%,
            rgba(248,249,250,.85) 95%,
            rgba(248,249,250,1) 100%
        ),
        url('/mvp/site/assets/img/empresas/infraestrutura.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom:120px;
}

.hk-infraestrutura-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(248,249,250,.98) 0%,
            rgba(248,249,250,.92) 35%,
            rgba(248,249,250,.65) 55%,
            rgba(248,249,250,0) 75%
        ),
        linear-gradient(
            to bottom,
            rgba(248,249,250,0) 0%,
            rgba(248,249,250,0) 75%,
            rgba(248,249,250,.4) 88%,
            rgba(248,249,250,.9) 97%,
            rgba(248,249,250,1) 100%
        );

    z-index:1;
}

.hk-infraestrutura .container{

    position:relative;

    z-index:2;

}

/* ==========================================
   CONTEÚDO
========================================== */

.hk-infraestrutura-content{

    max-width: 620px;

    position: relative;

    z-index: 2;
}

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

.hk-infraestrutura-badge{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 24px;

    border-radius: 999px;

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

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

    color: var(--hk-primary);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 20px;
    
}

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

.hk-infraestrutura-content h2{

    font-size: 3rem;

    font-weight: 800;

    line-height: 1.15;

    color: #111;

    margin-bottom: 25px;
}

.hk-infraestrutura-content h2 span{

    color: var(--hk-primary);
}

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

.hk-infraestrutura-content p{

    font-size: 1.1rem;

    line-height: 1.9;

    color: #555;

    margin-bottom: 40px;
}

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

.hk-infraestrutura-list{

    display: grid;

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

    gap: 18px 30px;
}

.hk-infra-item{

    display: flex;

    align-items: center;

    gap: 12px;

    color: #333;

    font-weight: 500;
}

.hk-infra-item i{

    color: var(--hk-primary);

    font-size: 18px;

    flex-shrink: 0;
}

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

.hk-infra-item:hover{

    transform: translateX(4px);

    transition: all .25s ease;
}


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

@media (max-width: 1200px){

    .hk-infraestrutura-content{

        max-width: 560px;
    }

    .hk-infraestrutura-content h2{

        font-size: 2.6rem;
    }
}

@media (max-width: 992px){

    .hk-infraestrutura{

        background:
            linear-gradient(
                rgba(255,255,255,.95),
                rgba(255,255,255,.95)
            ),
            url('../img/empresas/infraestrutura.png');

        background-position: center;

        background-size: cover;
    }

    .hk-infraestrutura-content{

        max-width: 100%;
    }
}

@media (max-width: 768px){

    .hk-infraestrutura{

        padding: 70px 0;
    }

    .hk-infraestrutura-content h2{

        font-size: 2rem;
    }

    .hk-infraestrutura-content p{

        font-size: 1rem;
    }

    .hk-infraestrutura-list{

        grid-template-columns: 1fr;
    }

    .hk-infraestrutura-badge{

        font-size: .75rem;

        padding: 10px 18px;
    }
}