:root {
    --cta: linear-gradient(94.87deg, #00B2FF 11.65%, #FF2CDF 98.86%);
    --fundo: #0B0B0B;
    --preto: #000000;
    --branco: #ffffff;
    --branco-70: rgba(255, 255, 255, 0.7);
    --branco-80: rgba(255, 255, 255, 0.8);
    --branco-90: rgba(255, 255, 255, 0.9);
    --branco-50: rgba(255, 255, 255, 0.5);
    --branco-30: rgba(255, 255, 255, 0.3);
    --sombra: rgba(89, 146, 171, 0.1);
    --azul: #00b2ff;
    --rosa: #ff2cdf;
    --fundo-perfil: linear-gradient(11.35deg, #00b3ffb7 28.23%, rgba(255, 44, 223, 0.648) 83.2%);
    /* --fundo-perfil: linear-gradient(11.35deg, #00B2FF 28.23%, rgba(255, 44, 223, 0.05) 83.2%); */
    --fundo-perfil-inver: linear-gradient(rgba(255, 44, 223, 0.05) 83.2%, 11.35deg, #00B2FF 28.23%);
    --cinza: #fafafa;
    --azul60: rgba(0, 178, 255, 0.8);
    --azul20: rgba(0, 178, 255, 0.2);
    --cinza-place: #a6a6a6;
    --vermelho: #EE3030;
    --verde: #00f821;
    --alturaMenu: 30px;
    
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

cursor::after {
    background: #00B2FF;
    width: 10px;
}

* {
    transition: 0.3s all;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-family: 'Montserrat';
}

body {
    background: var(--fundo);
    overflow-x: hidden;
}


/* --------- header ----------- */
.cabecalho {
    display: flex;
    align-items: center;
    padding: 30px 150px;
    justify-content: space-between;
    width: 100%;
    
    position: fixed;
    background: var(--fundo);
    font-size: 17px;
    color: var(--branco);
    font-family: 'Montserrat', sans-serif;
    z-index: 5;

}

.cabecalho-logo-nome {
    align-items: center;
    display: flex; 
    gap: 5px;
}

.cabecalho-lista {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.cabecalho-botao {
    background: none;
    color: var(--branco);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    border: 1px solid var(--branco);
}

.botao-cab-hover:hover {
    box-shadow: 0px 0px 10px 5px var(--azul);
}

.a-header {
    color: var(--branco-70);
    font-size: 17px;
}

.hover-a {
    transition: 0.2s all;
}
.hover-a:hover {
    color: var(--branco);
    transform: scale(1.05);
}

/* menu mobile */

.menu {
    display: none;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.tracos-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.traco {
    display: flex;
    background: var(--branco);
    width: 20px;
    height: 2px;
    border-radius: 50px;
}




/* ----------- main --------- */

main {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    /* padding-left: 150px;
    padding-right: 150px; */
}



/* ---------- inicio --------- */

.inicio {
    display: flex;
    justify-content: space-between;
    width: 100%;
    
    padding-top: 200px;
    padding-bottom: 150px;
    align-items: center;

    padding-left: 150px;
    padding-right: 150px;
}

.inicio-div-nomes-botoes {
    display: flex;
    gap: 65px;
    flex-direction: column;
    width: 50%;
}

.inicio-nomes {
    display: flex;
    gap: 30px;
    flex-direction: column;
    width: 100%;
}

.inicio-meunome {
    font-size: 35px;
    color: var(--branco);
    width: 100%;
}

.inicio-meunome span{
    background: linear-gradient(94.87deg, #00B2FF 11.65%, #FF2CDF 98.86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.inicio-meunome strong {
    font-size: 55px;
    font-weight: bold;
}

.inicio-nomes h3 {
    font-size: 18px;
    color: var(--branco-50);
}

.inicio-botoes {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.inicio-bot-contato {
    display: flex;
    background: var(--cta);
    padding: 20px 40px;
    border-radius: 15px;
    font-size: 28px;
    font-weight: 500;
    cursor: pointer;
    font-weight: 700;

    animation-name: pisca, eixoY;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-duration: 0.5s, 1s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, alternate;

}

.inicio-bot-contato:hover{
    transform: translateY(-10px);
}

@keyframes pisca{
    0% {
        box-shadow: 0px 0px 10px 4px var(--azul);
    }
    50% {
        box-shadow: 0px 0px 10px 2px var(--rosa);
    }
    100% {
        box-shadow: 0px 0px 10px 4px var(--azul);
    }
}

@keyframes eixoY {
    0% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(-5px); 
    }
}

/* .inicio-bot-projetos {
    background: none;
  
    display: flex;
    padding: 18px 58px;
    border-radius: 15px;
    font-size: 28px;
    font-weight: 700;

    border-left: 2px solid var(--azul);
    border-top: 2px solid var(--azul);
    border-right: 2px solid var(--rosa);
    border-bottom: 2px solid var(--rosa);
    cursor: pointer;
}

.inicio-bot-projetos:hover{
    transform: translateY(-10px);
}
  
.inicio-bot-projetos span {
    background: var(--cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
} */

.inicio-div-img {
    display: flex;
    background: var(--fundo-perfil);
    backdrop-filter: blur(200px);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 35%;

    animation: fundoPerfil 5s ease-in-out infinite alternate;
    background-size: 300% 300%;
}


@keyframes fundoPerfil {
    0% {
        background-position: 0 50%;
        /* background: var(--fundo-perfil); */
    }

    50% {
        background-position: 100% 50%;
        /* background: var(--rosa); */
    }

    100%{
        background-position: 0 50%;
        /* background: var(--fundo-perfil); */
    }
}

.inicio-div-img img {
    width: 100%;
    border-radius: 100%;
}

h2 {
    font-family: 'Montserrat';

    font-weight: 700;
    font-size: 25px;

    background: linear-gradient(94.87deg, #00B2FF 11.65%, #FF2CDF 98.86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 50px;
}

/* ---------- quem sou --------- */

.qsou {
    display: flex;
    flex-direction: column;

    width: 100%;

    padding-top: 120px;
    padding-bottom: 150px;
    align-items: center;
    
    background: var(--preto);
    padding-left: 150px;
    padding-right: 150px;
}

.qsou-conteudo {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.qsou-textos {
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    align-items: flex-start;
       
}

.qsou-textos p {
    width: 100%;
    font-size: 16px;
    color: var(--cinza);
        
}

.qsou-textos p a {
    color: var(--azul60);
    font-weight: 700;
}
.qsou-textos p a:hover {
    text-decoration: underline;
    color: var(--azul);
}
.qsou-textos p strong {
    font-style: italic;
    font-weight: 700;
}

.qsou-div-redes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Montserrat';
    
}
.div-icones-redes {
    display: flex;
    justify-content: space-between;
    width: 60%;
}
.div-icones-redes a img {
    width: 100%;
    height: auto;
}
.div-icones-redes a:hover {
    transform: scale(1.2);
}

.qsou-conteudo img {
    width: 40%;
}


/* ---------- formações --------- */

.formacoes {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    
    padding-top: 100px;
    padding-bottom: 150px;

    border-radius: 15px;
    padding-left: 150px;
    padding-right: 150px;

}

.titulo-sub {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.h2 {
    padding: 0;
}

.h3 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    color: var(--branco);
    text-align: center;
}

.formacoes-div-caixas {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding-top: 50px;
    flex-wrap: wrap;

}

.caixa-profissao {
    display: flex;
    flex-direction: column;
    background: var(--preto);
    box-shadow: 0px 2px 10px var(--sombra);
    border-radius: 15px;

    width: 32%;
    
    padding: 30px 30px 20px 30px;
    margin-bottom: 20px;

}

.caixa-profissao::after {
    content: " ";
    
    width: 0%;
    height: 1px;
    background: var(--cta);
    margin-top: 10px;
    transition: 0.5s ease-in-out;
}

.caixa-profissao:hover::after {
    width: 100%;
}

.caixa-profissao:hover {
    /* box-shadow: 1px 5px 10px var(--azul); */
    box-shadow: 0px 0px 10px 5px var(--azul);
    transform: scale(1.02);
}

.caixa-profissao hr {
    width: 100%;
    height: 1px;
    border: none;
    background: var(--cta);
    border-radius: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.caixa-profissao h4 {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    margin-top: 20px;
    color: var(--branco);
}

.caixa-profissao ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Montserrat';
    font-style: normal;
    font-size: 16px;
    color: var(--branco-80);
}

.caixa-profissao ul li strong {
    color: var(--branco);
    font-weight: 600;
}

.form-paragrafo {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-top: 50px;
}

.form-paragrafo p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    align-items: flex-start;
    color: var(--branco);
}

.form-paragrafo p a {
    color: var(--azul60);
    font-weight: 700;
}
.form-paragrafo p a:hover {
    text-decoration: underline;
    color: var(--azul);
}

/* ---------- habilidades --------- */

.habi {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    padding-top: 120px;
    padding-bottom: 150px;

    border-radius: 15px;
    padding-left: 150px;
    padding-right: 150px;
    background: var(--preto);
}

.div-caixas-habi {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 50px;
    flex-wrap: wrap;
}

.div-hab {
    display: flex;

    align-items: center;
    flex-direction: column;
    background: var(--fundo);
    box-shadow: 0px 2px 10px rgba(235, 235, 235, 0.15);
    border-radius: 15px;
    width: 32%;
    padding: 40px 25px;    
}
/* .div-hab::after {
    content: " ";
    width: 0%;
    height: 1px;
    background: var(--cta);
    margin-top: 20px;
    bottom: 0;
    transition: 0.5s ease-in-out;
}

.div-hab:hover::after {
    width: 100%;
} */

.div-hab:hover {
    box-shadow: 0px 0px 10px 5px var(--azul);
    transform: scale(1.02);
}

.div-hab:hover h4 {
    color: var(--azul);
}

.div-hab h4 {
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    color: var(--branco);
}

.div-hab hr {
    width: 100%;
    height: 1px;
    border: none;
    background: var(--cta);
    border-radius: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.div-hab-conteudo {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.col-dir, .col-esq {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.icone-nome {
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: center;
    color: var(--branco);
    font-size: 18px;
    font-weight: 500;
}

.carregando {
    color: var(--branco-80);
}

.legenda {
    display: flex;
    color: var(--branco);
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    padding-top: 50px;
    gap: 10px;
}

.legenda h3 {
    font-size: 18px;
    font-weight: bold;
}

.leg {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 16px;
}

.leg img {
    width: 17px;
}



/* ---------- projetos --------- */
.projetos {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    padding-top: 120px;
    padding-bottom: 150px;

    border-radius: 15px;
    padding-left: 150px;
    padding-right: 150px;
}


.proj-titulos {
    display: flex;
    gap: 50px;
    padding-top: 20px;
}

.proj-titulo-conteu1, .proj-titulo-conteu2, .proj-titulo-conteu3{
    background: var(--preto);
    color: var(--azul);
    border: 1px solid var(--azul);
    border-radius: 15px;
    box-shadow: 0px 2px 10px var(--sombra);
    padding: 10px 20px;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: 0.5s all;
    margin-bottom: 5px;
    
}



.desativo {
    background: none;
    box-shadow: none;
    border: 1px solid transparent;
    color: var(--branco-70);
}
.desativo:hover {
    background: var(--branco-30);
}

.proj-projetos1 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.proj-projetos2 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.proj-projetos3 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.proj-projetos-none {
    display: none;
}

.proj-caixa {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: var(--preto);
    border-radius: 15px;
    margin-top: 10px;
    width: 32%;
    box-shadow: 0px 2px 10px var(--sombra);
    padding: 20px 20px;
}

.proj-caixa-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.proj-caixa:hover{
    box-shadow: 0px 0px 10px 5px var(--azul);
    transform: scale(1.02);
}

.proj-caixa img {
    width: 80%;
    border-radius: 15px;
}

.proj-textos {
    width: 100%;
   
}

.proj-titulo {
    color: var(--branco);
    font-size: 18px;
    font-weight: 700;
    margin-top: 20px;
    
}

.proj-resumo {
    font-size: 14px;
    font-weight: 300;
    color: var(--branco-70);
    margin-top: 10px;
    line-height: 19px;
}

.proj-botao {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    color: var(--preto);
    font-weight: bold;
    width: 100%;
    background: var(--cta);
    padding: 10px;
    border-radius: 15px;
    margin-top: 20px;
}
.proj-botao-sem-proj {
    cursor: default;
}
.proj-botao img {
    width: 19px;
}

#img-sudoku {
    width: 45%;
}
#img-eu-reciclo {
    width: 45%;
}
/* ---------- contatos --------- */

.contatos {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    padding-top: 90px;
    padding-bottom: 150px;

    border-radius: 15px;
    padding-left: 150px;
    padding-right: 150px;
    background: var(--preto);
}

.sub-redes {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;

}

.contato-redes {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding-top: 10px;
}

.contato-redes a:hover {
    transform: scale(1.2);
}

.contatos-conteudo {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding-top: 20px;
}

.titulo-e-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40%;
}

.titulo-do-form {
    font-weight: 700;
    font-size: 16px;
    color: var(--branco);
    margin-bottom: 5px;
    color: var(--azul);
}

.formulario {
    display: flex;
    width: 100%;
    flex-direction: column;

}

.formulario label {
    font-weight: 400;
    font-size: 16px;
    color: var(--branco);
    margin-top: 10px;
    font-weight: 700;
}

.formulario input:not(.botao_enviar), .formulario textarea {
    padding: 15px;
    border-radius: 12px;
    margin-top: 5px;
    box-shadow: 0px 2px 10px var(--sombra);
}

textarea:focus, input:focus {
    background: var(--branco-90);
    outline: 3px solid var(--azul);
}

.botao_enviar:focus {
    background: var(--cta);
    outline: none;
}

::placeholder {
    font-weight: 400;
    color: var(--cinza-place);
}

textarea {
    resize: none;
}

.botao_enviar {
    padding: 15px;
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0px 2px 10px var(--sombra);

    color: var(--preto);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    background: var(--cta);
}

.botao_enviar:hover {
    box-shadow: 0px 0px 10px 3px var(--azul);
}

.contatos-conteudo img {
    width: 40%;
}



/* ------------ rodape ---------- */
.rodape {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--cta);
    align-items: center;

    width: 100%;
    padding: 50px 150px 10px 150px;

    border-radius: 25px 25px 0 0;
    font-family: 'Montserrat';
    padding-left: 150px;
    padding-right: 150px;
}

.rodape-conteudo {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    transition: 0.3s all;
}

.img-e-ul {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 25px;
    transition: 0.3s all;
}

.img-e-ul a {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 400;
    gap: 5px;
    transition: 0.3s all;
}

.img-e-ul ul {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    transition: 0.3s all;
}

.img-e-ul ul li a {
    font-size: 16px;
    font-weight: normal;
    transition: 0.3s all;
}

.img-e-ul a:hover {
    transform: scale(1.03);
    font-weight: 700;
}

.rodape img {
    filter: brightness(0);
}

.rodape-div-redes {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    
}

.rodape-div-redes div{
    display: flex;
    gap: 20px;
    align-items: center;
    
}


.rodape-div-redes a:hover {
    transform: scale(1.15);
}

.rodape hr {
    border: none;
    width: 100%;
    height: 1px;
    background: var(--preto);
    border-radius: 100%;
    margin: 20px 0 20px 0;
}



/* FIM DO CSS PADRÃO PARA VERSÃO DESKTOP */


/* INICIO DO CSS RESPONSIVO */

@media (min-width: 1500px) {
    body {
        background: var(--preto);
    }

    main {
        background: var(--fundo);
    }
    .tudo {
        width: 1500px;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

    .cabecalho {
        width: 1500px;
        justify-content: space-between;
    }

}


@media (max-width: 1336px ){
    .cabecalho {
        padding: 20px 100px;
    }

    .inicio, .qsou, .formacoes, .habi, .projetos, .contatos {
        padding-left: 100px;
        padding-right: 100px;
    }
    .inicio-div-nomes-botoes {
        gap: 30px;
    }
    .inicio-nomes {
        gap: 10px;
    }

    .div-hab {
        padding: 40px 10px;    
    }


    .rodape{
        padding: 50px 100px 10px 100px;
    }
}


@media (max-width: 1164px ){

    .cabecalho {
        padding: 20px 100px;
    }

    .inicio, .qsou, .formacoes, .habi, .projetos, .contatos {
        padding-left: 100px;
        padding-right: 100px;
    }

    .cabecalho-lista, .cabecalho-botao {
        display: none;
    }

    .inicio-bot-contato {
        font-size: 25px;
    }

    .menu {
        display: flex;
    }

    .rodape{
        padding: 30px 100px 10px 100px;
    }

    
    
}


@media (max-width: 1000px ){
   /* body {
       background: red;
    } */
    .inicio-div-img {
        width: 40%;
    }
    .inicio-div-nomes-botoes {
        gap: 20px;
    }
    .inicio-bot-contato {
        font-size: 22px;
    }

    .qsou-div-redes {
        margin-top: 15px;
    }

    .qsou-conteudo img {
        width: 45%;
    }
    .formacoes-div-caixas {
        justify-content: center;
        gap: 10%;
    }

    .caixa-profissao {
        width: 45%;
        margin-bottom: 20px;
    }

    .div-caixas-habi {
        justify-content: center;
        gap: 10%;
    }

    .div-hab {
        width: 45%;
        padding: 40px 25px; 
        margin-bottom: 20px;
    }

    .contatos-conteudo img {
        width: 47%;
    }

    .proj-caixa {
        width: 48%;
    }
    
}

@media (max-width: 950px ){

    .inicio-div-img {
        width: 45%;
    }

}

@media (max-width: 900px ){
    /* body {
        background: red;
    } */
    
    .cabecalho {
        padding-right: 80px;
        padding-left: 80px;
    }
    .inicio, .qsou, .formacoes, .habi, .projetos, .contatos {
        padding-right: 80px;
        padding-left: 80px;
    }

    .div-hab {
        padding: 30px 15px; 
    }

    .rodape {
        padding-right: 80px;
        padding-left: 80px;
    }


    .qsou-conteudo {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .qsou-textos {
        width: 100%;
    }
    .qsou-conteudo img {
        width: 70%;
    }

    .contatos-conteudo img {
        width: 52%;
    }
}


@media (max-width: 800px ){
    /* body {
        background: red;
    } */
    
    .cabecalho {
        padding-right: 50px;
        padding-left: 50px;
    }
    .inicio, .qsou, .formacoes, .habi, .projetos, .contatos  {
        padding-right: 50px;
        padding-left: 50px;
    }

    
    .rodape {
        padding-right: 50px;
        padding-left: 50px;
    }
}


@media (max-width: 750px ){

    .cabecalho {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .inicio {
        flex-direction: column-reverse;
        padding-top: 120px;
        padding-bottom: 100px;
        gap: 30px;
    }

    .inicio-nomes {
        text-align: center;
    }

    .inicio-meunome strong {
        font-size: 50px;
    }

    .inicio-div-nomes-botoes {
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .inicio-bot-contato {
        align-items: center;
        width: 100%;
    }

    .inicio-div-img {
        width: 50%;
    }
    .qsou {
        align-items: center;
        justify-content: center;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .qsou-conteudo {
        flex-direction: column;
        gap: 60px;
        align-items: center;
    }
    .qsou-textos {
        width: 100%;
        align-items: center;
        gap: 30px;
    }

    .qsou-div-redes {
        align-items: center;
    }


    .qsou-conteudo img {
        width: 65%;
    }

    .formacoes {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .form-paragrafo {
        padding-top: 50px;
    }

    .habi {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .div-hab {
        width: 90%;
        padding: 40px 40px; 
        margin-bottom: 20px;
    }

    .projetos {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .proj-projetos1, .proj-projetos2, .proj-projetos3  {
        justify-content: center;
    }
    .proj-caixa {
        width: 90%;
    }

    .contatos {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .contatos-conteudo {
        flex-direction: column;
        gap: 80px;
    }

    .titulo-e-form {
        width: 80%;
    }

    .contatos-conteudo img {
        width: 65%;
    }


    .rodape-conteudo {
        gap: 30px;
        flex-direction: column;
    }

}

@media (max-width: 650px ){

    .inicio {
        padding-top: 150px;
    }

    .inicio-nomes {
        gap: 25px;
    }

    .inicio-div-nomes-botoes {
        gap: 30px;
    }

    .formacoes-div-caixas {
        gap: 10px;
    }

    .caixa-profissao {
        width: 100%;
    }

    .div-caixas-habi {
        gap: 10px;
    }

    .div-hab {
        width: 100%;
        padding: 40px 40px; 
    }

    .titulo-e-form {
        width: 100%;
    }

    .proj-caixa {
        width: 100%;
    }

    .contatos-conteudo img {
        width: 85%;
    }

    .summary-divs {
        justify-content: center;
    }
    .summary-div-interna {
        width: 100%;

    }

}

@media (max-width: 600px ){
    .inicio {
        padding-top: 150px;
    }
    .inicio-meunome strong {
        font-size: 45px;
    }

    .inicio-div-img {
        width: 75%;
    }

    .inicio-bot-contato {
        font-size: 26px;
    }
    
    .qsou-conteudo {
        gap: 80px;
    }
    .qsou-conteudo img {
        width: 90%;
    }

    .titulo-e-form {
        width: 100%;
    }

    .div-hab {
        width: 100%;
        padding: 40px 40px; 
        margin-bottom: 20px;
    }

    .proj-titulos {
        gap: 40px;
    }

    .contatos-conteudo img {
        width: 85%;
    }


    .rodape-conteudo {
        gap: 30px;
        flex-direction: column;
    }

}

@media (max-width: 550px ){
    .div-hab {
        width: 100%;
    }

    .proj-titulos {
        gap: 15px;
    }

}

@media (max-width: 500px ){

    .inicio-div-img {
        width: 90%;
    }
    .inicio-meunome strong {
        font-size: 40px;
    }
    .div-hab {
        width: 100%;
    }

    .div-hab {
        width: 100%;
        padding: 40px 20px; 
    }

    .proj-titulos {
        justify-content: space-between;
        width: 100%;
        gap: 0px;
    }

    .proj-titulo-conteu1, .proj-titulo-conteu2, .proj-titulo-conteu3{
        padding: 10px 10px;
    }

    .contatos-conteudo img {
        width: 100%;
    }

    .qsou-conteudo img {
        width: 100%;
    }
}

@media (max-width: 414px ){
    .cabecalho {
        padding-left: 20px;
        padding-right: 20px;
    }
    .inicio, .qsou, .formacoes, .habi, .projetos, .contatos  {

        padding-left: 15px;
        padding-right: 15px;
    }
    .inicio {
        padding-top: 150px;
    }
    .inicio-div-img {
        width: 90%;
    }
    .inicio-meunome {
        font-size: 22px;
    }
    .inicio-meunome strong {
        font-size: 30px;
    }
    .inicio-nomes h3 {
        font-size: 15px;
    }
    .inicio-bot-contato {
        font-size: 20px;
    }

    .h2, h2 {
        font-size: 26px;
    }
    .h3 {
        font-size: 16px;
    }
    .proj-titulos {
        justify-content: space-between;
        width: 100%;
        gap: 0px;
    }
    .proj-titulo-conteu1, .proj-titulo-conteu2, .proj-titulo-conteu3{
        padding: 10px 5px;
    }
}

@media (max-width: 376px ){
    .cabecalho {
        padding-left: 20px;
        padding-right: 20px;
    }
    .inicio, .qsou, .formacoes, .habi, .projetos, .contatos  {
        padding-left: 10px;
        padding-right: 10px;
    }
    .inicio {
        padding-top: 100px;
    }
    .inicio-div-img {
        width: 90%;
    }
    .inicio-meunome {
        font-size: 22px;
    }
    .inicio-meunome strong {
        font-size: 30px;
    }
    .inicio-nomes h3 {
        font-size: 15px;
    }
    .inicio-bot-contato {
        font-size: 20px;
    }

    .div-hab {
        width: 100%;
        padding: 40px 15px; 
    }

    .h2, h2 {
        font-size: 26px;
    }
    .h3 {
        font-size: 16px;
    }
}

@media (max-width: 280px ){
    
    .cabecalho {
        font-size: 14px;
    }
    .inicio-meunome {
        font-size: 18px;
    }
    .inicio-meunome strong {
        font-size: 25px;
    }
    .inicio-nomes h3 {
        font-size: 12px;
    }
    .inicio-bot-contato {
        font-size: 16px;
    }
}


/* PAGINACAO E CABECALHO */

.novo-cabecalho {
    padding-top: 18px;
    padding-bottom: 18px;
    background: var(--preto);
    box-shadow: 0px 2px 10px var(--sombra);
    
}

.novo-cabecalho-botao {
    background: var(--cta);
    color: var(--preto);
    font-weight: bold;
    border: none;
}


/* pagincao */
.cor-link-cab {
    /* font-weight:600;
    background: linear-gradient(94.87deg, #00B2FF 11.65%, #FF2CDF 98.86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; */
    color: var(--azul);
    font-family: 'Montserrat';
}

.traco-visi {
    height: 2px;
    background: var(--azul);
    width: 100%;
    margin-top: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.cabecalho-botao-contato {
    font-weight: bold;
    background: linear-gradient(94.87deg, #00B2FF 11.65%, #FF2CDF 98.86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    border: none;
}



/* ---- MENU MOBILE  ----- */

.menu-mobile {
    right: 0;
    top: var(--alturaMenu);
    background: var(--preto);
    position: fixed;
    width: 55%;
    height: 100%;
    z-index: 5;
    box-shadow: 0px 2px 10px var(--sombra);

    display: flex;
    color: var(--branco);
    flex-direction: column;
    gap: 30px;
    align-items: center;
    font-family: 'Montserrat';
    font-size: 16px;
    padding-top: 30px;

    transform: translateX(0);
    transition: 0.5s all ease-in-out;
}

.nao-mostra-fundo {
    transform: translateX(100%);
}

.botao-menu-mobile {
    background: var(--cta);
    color: var(--preto);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: bold;
}

.sem-traco {
    display: none;
}


.girar-traco-1 {
    transform: rotate(-35deg) translateY(4px);
    background-color: var(--azul);
}
.girar-traco-3 {
    transform: rotate(35deg) translateY(-4px);
    background-color: var(--azul);
}

.cor-fechar {
    color: var(--azul);
}



/* Feedback de envio ao usuario */

/* .area {
    display: none;
} */

.area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
.invi {
    display: none;
}
.visi {
    display: flex;
    color: var(--vermelho);
    font-weight: bold;
    
}
.visi_sucesso {
    display: flex;
    color: var(--verde);
    font-weight: bold;
}

.botao_ok_erro {
    display: flex;
    padding: 8px;
    color: var(--vermelho);
    background: none;
    border-radius: 10px;
    border:  1px solid var(--vermelho);
    cursor: pointer;
}
.botao_ok_erro:hover {
    background: var(--vermelho);
    color: var(--fundo);
}
.botao_ok {
    display: flex;
    padding: 8px;
    color: var(--verde);
    background: none;
    border-radius: 10px;
    border:  1px solid var(--verde);
    cursor: pointer;
}
.botao_ok:hover {
    background: var(--verde);
    color: var(--fundo);
}



/* modificando o scrollbar */

::-webkit-scrollbar {
    width: 10px;
    transition: 0.5s all;
    background: var(--preto);
}
  
::-webkit-scrollbar-thumb {
    background: var(--cta);
    transition: 0.5s all;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--azul); 
}


/* --------- traco entre as section ---------- */
.tracos {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 100%);
   
    animation-name: passando;
    animation-timing-function: ease-in-out;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;

}

@keyframes passando {
    0% {
        transform: translateX(-20%);
    }
    100% {
        transform: translateX(20%);
    }
}

.traco-interno {
    display: flex;
    justify-content: space-between;
    width: 9%;
}
.traco1 {
    width: 20%;
    height: 5px;
    border-radius: 12px;
    background: var(--cta);
    box-shadow: 0px 2px 10px var(--sombra);
}
.traco2 {
    width: 60%;
    height: 5px;
    border-radius: 12px;
    background: var(--cta);
    box-shadow: 0px 2px 10px var(--sombra);
}

@media (min-width: 1500px) {
    .tudo {
        width: 1500px;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

    .cabecalho {
        width: 1500px;
        justify-content: space-between;
    }

    .tracos {
        display: none;
    }

}