.habilidades .container-habilidades {
  text-align: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 2rem;
}

.habilidades .container-habilidades .habilidade {
  max-width: 300px;
  padding: 20px 20px;
  border-radius: 15px;
  background-color: var(--cor-fundo-cinza-claro);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.habilidades .container-habilidades .habilidade::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cor-secundaria), transparent);
  transition: 0.5s;
}

.habilidades .container-habilidades .habilidade:hover::before {
  left: 100%;
}

.habilidades .container-habilidades .habilidade:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 15px 35px rgba(204, 95, 49, 0.3);
}
/* 
.habilidades .container-habilidades .habilidade.html {
  border: 2px solid var(--cor-azul-media);
  animation: c-glowing-html 0.6s ease-out infinite;
  animation-direction: alternate;
  background-color: var(--cor-fundo-cinza-claro);
}

.habilidades .container-habilidades .habilidade.css {
  border: 2px solid var(--cor-azul-media);
  animation: c-glowing-css 0.6s ease-out infinite;
  animation-direction: alternate;
  background-color: var(--cor-fundo-cinza-claro);
}

.habilidades .container-habilidades .habilidade.javascript{
  border: 2px solid var(--cor-azul-media);
  animation: c-glowing-javascript 0.6s ease-out infinite;
  animation-direction: alternate;
  background-color: var(--cor-fundo-cinza-claro);
}

.habilidades .container-habilidades .habilidade.github{
  border: 2px solid var(--cor-azul-media);
  animation: c-glowing-github 0.6s ease-out infinite;
  animation-direction: alternate;
  background-color: var(--cor-fundo-cinza-claro);
}

.habilidades .container-habilidades .habilidade.react{
  border: 2px solid var(--cor-azul-media);
  animation: c-glowing-react 0.6s ease-out infinite;
  animation-direction: alternate;
  background-color: var(--cor-fundo-cinza-claro);
}

.habilidades .container-habilidades .habilidade.git{
  border: 2px solid var(--cor-azul-media);
  animation: c-glowing-git 0.6s ease-out infinite;
  animation-direction: alternate;
  background-color: var(--cor-fundo-cinza-claro);
} */

.habilidade .card-border::before {
  background: hsl(16, 79%, 45%);
}

.skills_card::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--container-color);
  border-radius: 20px;
}

.habilidades .container-habilidades .habilidade:hover {
  color: var(--cor-secundaria);
}

.habilidades .container-habilidades .habilidade p,
.habilidades .container-habilidades .habilidade h3,
.habilidades .container-habilidades .habilidade .logo i {
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

.habilidades .container-habilidades .habilidade h3 {
  color: var(--cor-branca);
  font-size: var(--fonte-extra-grande);
  font-weight: 500;
  /* margin-bottom: 20px; */
}

.habilidades .container-habilidades .habilidade .html,
.devicon-html5-plain-wordmark{
    color: #e53a2d;
}

.habilidades .container-habilidades .habilidade .javascript,
.devicon-javascript-plain {
  color: #ead41c;
}

.habilidades .container-habilidades .habilidade .css,
.devicon-css3-plain-wordmark {
    color: #3492cb;
}

.habilidades .container-habilidades .habilidade .github,
.devicon-github-original {
    color: #000000;
}

.habilidades .container-habilidades .habilidade .react,
.devicon-react-original {
    color:  #5ccfee;
}

.habilidades .container-habilidades .habilidade .git,
.devicon-git-plain {
    color: #E84D31;
}

.habilidades .container-habilidades .habilidade .bootstrap,
.devicon-bootstrap-plain {
    color: #8512FB;
}

.habilidades .container-habilidades .habilidade .csharp,
.devicon-csharp-plain-wordmark {
    color: #3A0094;
}

.habilidades .container-habilidades .habilidade .efcore,
.devicon-dotnetcore-plain {
    color: #3A0094;
}

.habilidades .container-habilidades .habilidade .sql,
.devicon-mysql-plain {
    color: #0988A8;
}

.habilidades .container-habilidades .habilidade .php,
.devicon-php-plain {
    color: #4D588E;
}

.habilidades .container-habilidades .habilidade .linux,
.devicon-linux-plain {
    color: #303030;
}

.habilidades .container-habilidades .habilidade .vuejs,
.devicon-vuejs-line {
    color: #3FB27F;
}

.habilidades .container-habilidades .habilidade .oracle,
.devicon-oracle-original {
    color: #CA4A38;
}

.habilidades .container-habilidades .habilidade .jira,
.devicon-jira-plain {
    color: #2684FF;
}


.habilidades .container-habilidades .habilidade p {
  font-size: 1.8rem;
  font-family: var(--fonte-secundaria);
}

.habilidades .container-habilidades .habilidade i {
  font-size: 4.5rem;
}

/* Categorias de Habilidades */
.skills-categories {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 3rem;
}

.skill-category {
  width: 100%;
}

.skill-category > h3 {
  font-size: 2.5rem;
  color: var(--cor-secundaria);
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.skill-category > h3 i {
  font-size: 3rem;
}

.skill-category .container-habilidades {
  justify-content: center;
}

@media(max-width: 768px) {
  .skill-category > h3 {
    font-size: 2rem;
  }
  
  .skill-category > h3 i {
    font-size: 2.5rem;
  }
}