/* ==========================================
   SKILLS PAGE
   ========================================== */


.skills-container {

    display:flex;

    flex-direction:column;

    gap:3rem;

}




.skill-category {

    background:rgba(30,41,59,.65);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:2rem;

}



.skill-category-header {

    margin-bottom:1.5rem;

}



.skill-category-header h2 {

    font-size:1.5rem;

    font-weight:700;

}





.skills-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:1.2rem;

}





.skill-card {

    background:rgba(15,23,42,.65);

    border:1px solid rgba(255,255,255,.06);

    border-radius:16px;

    padding:1.4rem;

    transition:.25s ease;

}



.skill-card:hover {

    transform:translateY(-5px);

    border-color:rgba(59,130,246,.4);

}



.skill-card h3 {

    font-size:1.1rem;

    margin-bottom:1rem;

}




.skill-badge {

    display:inline-flex;

    padding:.35rem .8rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

}





.skill-beginner {

    background:rgba(148,163,184,.15);

    color:#cbd5e1;

}



.skill-intermediate {

    background:rgba(59,130,246,.15);

    color:#60a5fa;

}



.skill-confirmed {

    background:rgba(34,197,94,.15);

    color:#4ade80;

}



.skill-expert {

    background:rgba(245,158,11,.15);

    color:#fbbf24;

}