/* =====================================
   SKILLS SECTION
===================================== */

.skills-section{

padding:100px 20px;

text-align:center;

}

.skills-title{

font-size:2.2rem;

margin-bottom:50px;

color:var(--violet);

}

/* grid */

.skills-grid{

display:grid;

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

gap:30px;

max-width:1000px;

margin:auto;

}

/* card */

.skill-card{

background:#151533;

padding:35px 25px;

border-radius:20px;

border:1px solid rgba(182,107,255,.15);

transition:.35s;

position:relative;

overflow:hidden;

}

/* icon */

.skill-card i{

font-size:38px;

color:var(--violet);

margin-bottom:18px;

display:block;

transition:.3s;

}

/* title */

.skill-card h3{

font-size:1.2rem;

margin-bottom:10px;

color:#fff;

}

/* description */

.skill-card p{

font-size:.9rem;

color:#c9c9f2;

line-height:1.7;

}

/* hover */

.skill-card:hover{

transform:translateY(-8px);

border-color:rgba(182,107,255,.5);

box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.skill-card:hover i{

transform:scale(1.15);

color:#fff;

}

/* glow */

.skill-card::before{

content:"";

position:absolute;

inset:0;

background:radial-gradient(circle at top,
rgba(182,107,255,.3),
transparent 70%);

opacity:0;

transition:.4s;

}

.skill-card:hover::before{

opacity:1;

}

/* tablet */

@media (max-width:900px){

.skills-grid{

grid-template-columns:repeat(2,1fr);

}

}

/* mobile */

@media (max-width:600px){

.skills-grid{

grid-template-columns:1fr;

}

.skill-card{

padding:28px 18px;

}

}