.sec3{
    margin-top:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:80vh;
    padding: 80px 5% 50px;
    gap:80px;
    max-width: 1400px;
    margin: 80px auto 0;
}

.sec-3-1{
    display:flex;
    flex-direction:column;
    align-items:center;

}

.sec-3-2{
    display:flex;
    gap:40px;
    margin-top:0px;
    flex-wrap: wrap;
    justify-content: center;
}

.box2{
    border:2px solid #e0e0e0;
    width:450px;
    display:flex;
    flex-direction: column;
    align-items:center;
    padding:35px 25px;
    border-radius: 20px;
    gap:20px;
    transition: all 0.3s ease;
    background: white;
}

.box2:hover{
    border-color: darkorange;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255,140,0,0.15);
}

.box2>:nth-child(1){
    font-size:24px;
    font-weight:600;
}
.skills{
    display:grid;
    grid-template-columns: auto auto;
    gap:40px;
}

.skills-1 i{
    font-size:24px;
    color: darkorange;
}

.skills-1{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.skills-1-2{
    display:flex;
    flex-direction: column;
}

.skills-1-2>:nth-child(1){
    font-size:17px;
    font-weight:600;
}

.skills-1-2>:nth-child(2){
    font-size:14px;
    color: #666;
}

@media(max-width:1024px){
    .sec3{
        padding: 60px 5% 50px;
        min-height:100%;
    }
    .sec-3-2{
        flex-direction: column;
        align-items: center;
    }

    .box2{
        width:90%;
        max-width:550px;
        gap:20px;
    }

    .box2>:nth-child(1){
        font-size:26px;
    }
    .skills{
        gap:35px;
    }

    .skills-1 i{
        font-size:28px;
    }

    .skills-1{
        gap:12px;
    }

    .skills-1-2>:nth-child(1){
        font-size:20px;
    }
}


@media(max-width:767px){
    .sec3{
        padding: 60px 5% 40px;
        margin-top: 40px;
    }
    .sec-3-2{
        flex-direction: column;
        gap: 30px;
    }

    .box2{
        width:95%;
        max-width:350px;
        gap:20px;
        padding: 25px 15px;
    }

    .box2>:nth-child(1){
        font-size:20px;
    }
    .skills{
        gap:20px;
    }

    .skills-1 i{
        font-size:22px;
    }

    .skills-1{
        gap:10px;
    }

    .skills-1-2>:nth-child(1){
        font-size:16px;
    }
}