/* DEFINIÇÃO CONTAINER SOBRE */
.container__sobre{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 100px;
    color: #fff;
}

.titulo__secao{
    position: relative;
    text-transform: uppercase;
    margin-top: 175px;
    margin-bottom: 100px;
    font-size: 3em;
    letter-spacing: 5px;
    color: var(--color-star-light);
    text-shadow: var(--default-light);
}

.titulo__secao::before,
.titulo__secao::after {
    content: ""; /* Importante para as pseudo-classes gerarem um conteúdo visual */
    display: inline-block;
    width: 500px; /* Largura da imagem (ajuste conforme necessário) */
    height: 40px; /* Altura da imagem (ajuste conforme necessário) */
    background-size: contain; /* Ajuste para cobrir a área do contêiner com a imagem */
    background-repeat: no-repeat;
    position: absolute;
}

.titulo__secao::before {
    background-image: url('../public/assets/images/flecha-secao.svg');
    top: 8px;
    left: -555px;
    transform: scalex(-1);
}

.titulo__secao::after {
    background-image: url('../public/assets/images/flecha-secao.svg');
    top: 8px;
    right: -550px;
}

#imagem__sobre, #imagem__projetos{
    margin: 150px 10%;
}

/* DEFINIÇAO CARD SOBRE*/
.card__sobre{
    display: grid;
    grid-template-columns: 2fr 1fr; /* Duas colunas com tamanhos diferentes */
    align-items: center;
    gap: 20px; /* Espaço de 20 pixels entre as colunas */
    padding: 50px;

    max-width: 1080px;
    min-width: 700px;

    background: linear-gradient(-30deg, rgba(24,20,50,0.2) 0%, rgba(0,0,0,0.6) 50%, rgba(74,75,139,0.1) 100%);
    border-radius: 20px;
    box-shadow: var(--box-shadow-card);
    transition: box-shadow 0.5s ease-in-out, background-color 0.5s ease;
}

.card__sobre:hover{
    box-shadow: var(--box-light-card);
    background: linear-gradient(-30deg, rgba(24,20,50,0.4) 0%, rgba(0,0,0,0.8) 49%, rgba(74,75,139,0.4) 100%);
    background-size: contain; /*contain: A imagem é dimensionada para caber totalmente dentro do contêiner, mantendo a proporção original.*/
    
}

.card__sobre:hover .content{
    text-shadow: var(--default-light);
    color: var(--color-star-light);
}

/* .card__sobre:hover aside{
    background: linear-gradient(171deg, rgba(24,20,50,0.3) 0%, rgba(0,0,0,0.5) 49%, rgba(74,75,139,0.3) 100%); 
    background: linear-gradient(-15deg, rgba(176,196,222, 0.15) 0%, rgba(0,0,0,0.4) 50%, rgba(176,196,222, 0.15) 100%); 
    box-shadow: var(--box-shadow-card);
} */
/* FIM DEFINIÇÃO CARD SOBRE*/

/* DEFINIÇÃO ASIDE */
.card__sobre aside{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 50px;
    margin: 5px;
    min-width: 280px;
    height: 550px;
    padding: 80px 10px 10px 10px;
    border-radius: 15px;
    box-sizing: border-box;
    transition: box-shadow 1s ease-in-out, background-color 1s ease-in-out;
}

.card__sobre aside img{
    width: 350px;
}

.card__sobre aside a{
    font-size: 1.2em;
    text-decoration: none;
    color: #fff;
    padding: 20px 40px;
    border: 2px solid var(--color-font-menu);
    border-radius: 25px;
}
.card__sobre aside a:hover{
    background: var(--background-color-card);
    text-shadow: var(--default-light);
    color: var(--color-star-light);
}

.card__sobre aside .icon-curriculo{
    width: 22px;
    height: 22px;
    margin-right: 5px;
    vertical-align: sub;
}

/* FIM DEFINIÇÃO ASIDE */

/* DEFINIÇÃO CONTENT */
.card__sobre .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 550px;
    margin: 5px;
    padding: 30px;
    border-radius: 15px;
    text-align: center;

    font-size: 1.4em;

    /* transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out; */
}

.card__sobre .content h1{
    font-family: var(--font-primaria);
    font-size: var(--tamanho-font-titulo-card);
    text-transform: uppercase;
    margin: 10px 0 80px 0;
}

.card__sobre .content p{
    font-family: var(--font-secundaria);
}

.card__sobre .content .content-tecnologias{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
}

.card__sobre .content ul{
    margin-top: 30px;
}

.card__sobre .content ul li{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75em;
    width: 125px;
    padding: 15px 10px;
    margin-bottom: 20px;
    border: 1px solid var(--color-font-menu);

    font-size: 0.6em;
}

.card__sobre .content ul li:hover{
    background: var(--background-color-card);
    text-shadow: var(--default-light);
    color: var(--color-star-light);
}

.card__sobre .icon-tecnologias{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.devicon-plain{
    width: 23px;
    height: 23px;
    margin-right: 5px;
}

/* FIM DEFINIÇÃO CONTENT */
/* FINAL DEFINIÇÃO CONTAINER SOBRE */

/* INICIO RESPONSIVIDADE */
@media screen and (max-width: 1024px){
    .titulo__secao{
        margin-top: 100px;
        margin-bottom: 20px;
    }
    .titulo__secao::before,
    .titulo__secao::after{
        display: none;
    }

    .card__sobre{
        width: 95%;
        min-width: auto;
        height: 100%;
        padding: 5px;
        gap: 0px;

        box-sizing: border-box;
        font-size: 0.7em;

        grid-auto-flow: column; /* Configura o fluxo automático */
        grid-template-columns: 1fr; 
        grid-template-rows: 1fr auto;
    }

    .card__sobre div.content{
        padding: 0;
    }

    .card__sobre .content .content-tecnologias {
        justify-content: space-evenly;
    }

    .card__sobre div.content h1{
        margin: 20px;
        font-size: 1em;
    }

    .card__sobre aside{
        min-width: auto;
        height: auto;
        gap: 10px;
        padding: 0;
        padding-bottom: 10px;
    }

    .card__sobre aside img{
        width: 70%;
    }
}