/* HERO PORTFOLIO */

.portfolio-hero{
    max-width:1100px;
    margin:80px auto;
    padding:0 20px;

    display:flex;
    align-items:center;
    gap:60px;
}

.hero-list{
    margin:20px 0;
    line-height:2rem;
    list-style:none;
    padding:0;
}

.github-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    border: 2px solid white;
    color: white;
    padding:10px 18px;

    border-radius:6px;
    text-decoration:none;
    font-weight:600;

    transition:0.3s;
}

.github-btn:hover{
    background:#152fc2;
}

.trabajos{
    max-width:1100px;
    margin:15px auto;
    padding:0 20px;
}

.trabajos h2{
    text-align:center;
    font-size:40px;
    margin-bottom:70px;
}

.trabajo{
    display:flex;
    align-items:center;
    gap:60px;
    margin-bottom:100px;
    background:#111;
    padding:40px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.trabajo.reverse{
    flex-direction:row-reverse;
}

.trabajo-img{
    flex:1;
}

.trabajo-img img{
    width:100%;
    max-width:450px;
    border-radius:12px;

    transition:0.3s;
}

.trabajo-img img:hover{
    transform:scale(1.05);
}

.trabajo-texto{
    flex:1;
}

.trabajo-texto h3{
    font-size:28px;
    margin-bottom:15px;
}

.trabajo-texto p{
    margin-bottom:15px;
    line-height:1.6;
}

.trabajo-texto ul{
    list-style:none;
    padding:0;
}

.trabajo-texto li{
    margin-bottom:8px;
}


@media (max-width:900px){

    .portfolio-hero{
        flex-direction:column;
        text-align:center;
        margin-top: 100px;
    }

    .hero-img{
        display: none;
    }

    .trabajo{
        flex-direction:column;
        text-align:center;
    }

    .trabajo.reverse{
        flex-direction:column;
    }

}