*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#050816;
  color:#fff;
  font-family:'Inter',sans-serif;
}

a{
  text-decoration:none;
}

.skills-page{

  max-width:1400px;

  margin:auto;

  padding:120px 50px;
}

.skills-header{

  text-align:center;

  margin-bottom:70px;
}

.skills-header h1{

  font-size:3rem;

  margin-bottom:15px;

  background:
  linear-gradient(
    90deg,
    #ffffff,
    #8b5cf6
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

.skills-header p{

  max-width:700px;

  margin:auto;

  color:#94a3b8;

  line-height:1.8;
}

.skill-category{

  margin:60px 0 25px;

  font-size:2rem;

  display:flex;

  align-items:center;

  gap:12px;

  color:#fff;
}

.skills-grid{

  display:grid;

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

  gap:25px;
}
@media(max-width:992px){

  .skills-grid{

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

}

@media(max-width:768px){

  .skills-grid{

    grid-template-columns:1fr;
  }

}

.skill-box{

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

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

  border-radius:24px;

  padding:30px;

  text-align:center;

  backdrop-filter:blur(12px);

  transition:.4s ease;
}

.skill-box:hover{

  transform:translateY(-8px);

  border-color:
  rgba(139,92,246,.5);

  box-shadow:
  0 0 30px rgba(139,92,246,.18);
}

.skill-box img{

  width:70px;

  height:70px;

  margin:auto;

  margin-bottom:20px;
}

.skill-icon{

  font-size:4rem;

  color:#8b5cf6;

  margin-bottom:20px;
}

.skill-box h3{

  margin-bottom:12px;
}

.skill-box p{

  color:#94a3b8;

  line-height:1.7;
}

.skills-footer-btn{

  text-align:center;

  margin-top:70px;
}

.skills-footer-btn a{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:15px 30px;

  border-radius:50px;

  color:#fff;

  font-weight:600;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #8b5cf6
  );

  transition:.4s;
}

.skills-footer-btn a:hover{

  transform:translateY(-4px);

  box-shadow:
  0 10px 30px rgba(139,92,246,.3);
}

@media(max-width:768px){

  .skills-page{

    padding:90px 20px;
  }

  .skills-header h1{

    font-size:2.2rem;
  }

  .skill-category{

    font-size:1.5rem;
  }
}