/* ==========================================================
   SOBRE
========================================================== */

#sobre{

    position:relative;

    padding:7rem 0;

    background:#f5f8fa;

    color:#0D2C3A;

}


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

.sobre-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:5rem;

}


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

.sobre-texto{

    max-width:720px;

}


.section-kicker{

    display:inline-flex;

    align-items:center;

    margin-bottom:1.25rem;

    padding:.5rem 1rem;

    border-radius:999px;

    background:rgba(13,44,58,.08);

    color:#0D2C3A;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.sobre-texto h2{

    margin-bottom:1.8rem;

    font-size:clamp(2.2rem,4vw,3.5rem);

    line-height:1.15;

    font-weight:700;

}


.sobre-texto p{

    margin-bottom:1.3rem;

    font-size:1.08rem;

    line-height:1.85;

    color:#38515d;

}



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

.sobre-card{

    padding:2.5rem;

    border-radius:28px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        rgba(235,244,248,.85)
    );

    border:1px solid rgba(13,44,58,.08);

    box-shadow:

    0 25px 60px rgba(13,44,58,.12);

}


.sobre-card h3{

    margin-bottom:1.8rem;

    font-size:1.6rem;

    color:#0D2C3A;

}


.sobre-card ul{

    display:flex;

    flex-direction:column;

    gap:1rem;

    padding:0;

    margin:0;

    list-style:none;

}


.sobre-card li{

    display:flex;

    align-items:center;

    gap:.7rem;

    font-size:1rem;

    color:#38515d;

}



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

@media(max-width:1024px){

    .sobre-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }


    .sobre-texto{

        max-width:100%;

    }


}


@media(max-width:768px){

    #sobre{

        padding:5rem 0;

    }


    .sobre-texto h2{

        font-size:2.2rem;

    }


    .sobre-card{

        padding:2rem;

    }

}