#habilidade{
    margin-top: 10%;
    margin-bottom: 10%;
}

/* Habilidade */
.habilidades {
    text-align: center;
    width: 60%;
    margin: 0 auto;
}

.titleHabilidade {
    padding: 2%;
    font-size: clamp(16px, 4vw, 30px);
    font-weight: 600;
}

.txtHabilidade {
    text-align: center;
    text-indent: 2em;
    font-size: clamp(14px, 4vw, 20px);
    font-weight: 600;
    color: #333;
    padding-bottom: 2%;
    border-bottom: 2px solid #111;
}

/* Habilidades do meio */
.boxConhecimentos {
    margin-top: 1%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.boxDesenv, .boxFerram {
    flex: 1 1 45%;
    min-width: 300px;
}

.textTitle2 {
    padding: 2%;
    font-size: clamp(16px, 4vw, 26px);
    font-weight: 600;
    text-align: center;
}

.imgDesenv, .imgFerram {
    width: 60px;
    border: 3px solid rgb(192, 202, 211);
    border-radius: 50%;
    margin-top: 3%;
    cursor: pointer;
}

.imgDesenv:hover, .imgFerram:hover {
    animation: loading 5s linear infinite;
    border: 3px solid #111;
}

@keyframes loading {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(360deg); }
}

.boxTodosItens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 7%;
    gap: 10px;
}

.todas {
    padding: 0.5% 1.5%;
    border: 2px solid #333;
    border-radius: 40px;
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 400;
    color: #fff;
    background-color: #222;
    white-space: nowrap;
}

/* Estudo */
.boxEstudo {
    width: 98%;
    margin: 2% auto 0;
    padding: 1%;
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid #111;
    gap: 20px;
}

.boxFormacao, .boxComplementares {
    flex: 1 1 45%;
    min-width: 300px;
}

.titleFormacao, .titleComplementares {
    font-size: clamp(16px, 4vw, 26px);
    font-weight: 600;
    text-align: center;
    padding: 2%;
}

.linhaFormacao {
    font-size: clamp(12px, 3.5vw, 18px);
    font-weight: 600;
}

.linkPdf, .linkGit {
    color: red;
    text-decoration: none;
}

.linkPdf:hover, .linkGit:hover {
    color: #fc6b5b;
}

/* Responsivo até 767px (celulares) */
@media screen and (max-width: 767px) {
.habilidades {
    width: 90%;
}

.boxConhecimentos {
    flex-direction: column;
    align-items: center;
}

.boxDesenv, .boxFerram {
    width: 100%;
}

.boxEstudo {
    flex-direction: column;
    align-items: center;
}

.boxFormacao, .boxComplementares {
    width: 100%;
    margin: 0;
}

.imgDesenv, .imgFerram {
    width: 50px;
}
}