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

/* container principal da navbar */
..containerHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* organiza itens nos extremos */
    padding: 20px;
    gap: 20px; /* menor para desktop normal */
    background-color: #1d1c1c;
}

/* Ajuste para telas pequenas (mobile) */
@media (max-width: 768px) {
    .containerHeader {
        flex-direction: column; /* empilha logo e nav */
        gap: 10px; /* espaçamento menor */
        padding: 15px;
    }

    .containerHeader nav {
        display: flex;
        flex-direction: column; /* links empilhados */
        align-items: center;
        gap: 10px;
    }
}
.containerMain{
    background-color: #16110F;
    
}



/* bloco do logo */
.itemH1 {
    display: flex;
    align-items: center;
    color: white;
}
.itemH1 a {
    color: aliceblue;
}

/* bloco da navegação */
.itemH2 nav {
    display: flex;
    gap: 30px;                      /* espaço entre os links */
    color: aliceblue;
}

/* links */
.itemH2 nav a {
    color: aliceblue;
}


.containerMain{
   
    background-color: rgb(13, 12, 12);
}





/*Section1 - Parte introdutoria*/

/* SECTION PRINCIPAL */
.section1{
    display: flex;
    flex-direction: column;
    align-items: center;      /* centraliza horizontalmente */
    gap: 20px;                /* espaço entre os blocos */
    padding: 40px 20px;
}


.section1>div  h1{
    color: aliceblue;
}

.section1>div  p{
    color: aliceblue;
}
/* FOTO */
.item11{
    display: flex;
    justify-content: center;
}

/* TITULO */
.item12{
    display: flex;
    justify-content: center;
    text-align: center;
}

/* TEXTO DESCRITIVO */
.item13{
    max-width: 600px;
    text-align: center;
}

.destaque{
    color: rgb(179, 102, 115);
}

/* BOTÕES */
.item14{
    display: flex;
    gap: 20px;               /* espaço entre botões */
    justify-content: center;
    flex-wrap: wrap;         /* quebra em telas pequenas */
}

.button1{
    border-radius:20px ;
    padding: 10px;
}

.button2{
    border-radius:20px ;
    padding: 10px;
    color: aliceblue;
    background-color: black;
}



/* BLOCO DAS TECHS */
.item15>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: aliceblue;
    font-weight: normal;
}

/* TEXTO "Sou perito..." */
.item15-1{
    text-align: center;
}

/* ICONES */
.item15-2 nav{
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}



/*Section 2 - Sobre projectos*/

/* SECTION PROJECTS */
.section2{
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
}

/* TITULO PROJECTS */


.projects {   
    display: flex;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: rgb(141, 78, 26);
}

/* CONTAINER DOS PROJECTOS */
.projectsEx{
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap; /* importante para mobile */
    
}

/* CARD DE PROJECTO (ambos usam mesma lógica) */
.projecto1,
.projecto2{
    display: flex;
    flex: auto;
    flex-direction: column;
    gap: 0px;
    max-width: 320px;
    border-radius: 20px;
    background-color: rgb(66, 68, 70);
    
}


.projectsEx>div,a{
    color: aliceblue;
}
.tituloProj{
    color: aliceblue;
}

.tituloProj2{
    color: aliceblue;
}

/* IMAGEM */
.projecto1 img,
.projecto2 img{
    width: 100%;
    display: block;
    border-radius: 30px 30px 0px 0px;
   
}



/* AREA DE INFO (texto + seta) */
.projecto1 > div:last-child,
.projecto2 > div:last-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

/* BLOCO TEXTO */
.projecto1 > div:last-child > div:first-child,
.projecto2 > div:last-child > div:first-child{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.projecto1 > div:first-child{
     background-color: #0e0d0d;
}

.projecto2 > div:first-child{
     background-color: #0e0d0d;
}


    .setaInclinada {
    display: inline-block;   /* importante para transformar corretamente */
    transform: rotate(320deg);
}











/*Section de Experiencia*/

/* SECTION EXPERIENCE */
.section3{
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
}

/* TITULO EXPERIENCE */
.experience {   
    display: flex;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: rgb(35, 29, 124);
}

/* BLOCO DE EXPERIÊNCIA (cada item) */
.experienciaUm,
.experienciaDois{
    flex-direction: column;
    max-width: 800px;
    width: 100%;
    display: flex;
    gap: 15px;
    align-items: center;
    margin: 0 auto;
}

/* LINHA SUPERIOR (icone + cargo + ano) */
.cargo1,
.cargo2{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: rgb(92, 94, 94);
    font-size: 14px;
}

   
    
   
   



.ano1{
    color: white;
    font-size: small;
    font-weight: normal;
    color: rgb(112, 107, 107);

}

.ano2{
    color: white;
    font-size: small;
    font-weight: normal;
    color: rgb(112, 107, 107);

}


/* AGRUPA ICONE + NOME */
.cargo1 > div:first-child,
.cargo2 > div:first-child,


.box-icon{
    color: aliceblue;
}


/* DESCRIÇÃO */
.descricao1,
.descricao2{
    width: 100%;
    color: aliceblue;
    text-align: left;
}


.job1, .job2 {
    display: flex;
    align-items: center; /* alinha verticalmente */
    gap: 8px; /* controla o espaço entre eles */
}







/*footer*/

.footer {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    
     background-color:#1d1c1c;
}

.parte1 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    align-items: center;
    color: aliceblue;
}

.parte1 > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.endereco {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}


.textoFinal{
    text-align: center;
    color: rgb(142, 134, 134);
}


.endereco nav {
    display: flex;
      gap: 20px;
}


.email{
  flex-direction: row;
  align-items: center;


}


body{
background-color: rgb(1, 0, 0);
}








/* ======== TABLET ======== */
@media (min-width: 768px){
    .containerHeader {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 15px;
        padding: 25px 40px;
        background-color:#1d1c1c;
    }

    .itemH2 nav {
        flex-direction: row;
        gap: 20px;
        color: #16110F;
    }

    .cargo1,
    .cargo2 {
        flex-direction: row;
        gap: 50px;
    }

    .section1 h1 {
        font-size: 24px;
    }


    .footer {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    
     background-color:#1d1c1c;
}

 .destaque{
    color: rgb(99, 12, 66);
}

}