/* ==========================================
   Skills
========================================== */

#skills{

    position:relative;

}

.skills-grid{

    display:grid;

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

    gap:28px;

    margin-top:60px;

}

.skill-card{

    padding:30px;

    border-radius:24px;

    transition:.35s;

}

.skill-card:hover{

    transform:translateY(-6px);

}

.skill-card h3{

    font-size:24px;

    margin-bottom:24px;

    font-weight:700;

}

.tech-list{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.tech-list span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 16px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

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

    transition:.25s;

    font-size:15px;

    font-weight:500;

}

.tech-list span:hover{

    transform:translateY(-3px);

    background:rgba(255,255,255,.08);

    border-color:rgba(90,140,255,.35);

}

.tech-list i{

    font-size:24px;

    min-width:24px;

}

/* Mobile */

@media(max-width:768px){

    .skills-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .skill-card{

        padding:22px;

    }

    .tech-list{

        gap:10px;

    }

    .tech-list span{

        padding:10px 12px;

        font-size:14px;

    }

    .tech-list i{

        font-size:22px;

    }

}