@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital@1&family=Bree+Serif&family=Calistoga&family=Poppins&family=Secular+One&family=Shrikhand&display=swap');
:root{
    --color-azul1: #091025;
    --color-azul2: #0f276e;
    --color-azul3: #2b5ae5;
    --color-azul4: #5b84ff;
    --color-logo: #0c22d2;

    --color-laranja1: #ff2b01;
    --color-laranja2: #a11e03;

    --color-dark1: #3f3f3f;
    --color-dark2: #262626;
    --color-dark3: #0d0d0d;



}




* {
padding: 0;
margin: 0;

box-sizing: border-box;
list-style: none;
text-decoration: none;


}

body{
   
    font-family: 'Poppins', sem serifa;
    
    min-width: 550px;
   max-width:  1650px;
    margin: 0 auto;
    background-color: #000;
}


 /* Header*/

 header {
    background-color: #000;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-family: 'Calistoga', cursive;
    
 }


header h1 {
    color: var(--color-azul3);
    font-size: 2.5rem;
    

}


header span {
    color: #fff;
}

header .navegacao-primaria{
    display: flex;
    gap: 30px;
    align-items: center;
}


header .navegacao-primaria li a {
    width: 0px;
    height: 0px;
    color: #fff;
    font-size: 1.3rem;
}

header .navegacao-primaria li a::after{
    transition: .5s ease-in-out;
    content: '';
    width: 0px;
    height: 0;
    border-bottom: 4px solid var(--color-laranja1);
    display: block;
    border-radius: 5px;
}


header .navegacao-primaria li a:hover::after{
   
    content: '';
    width: 100%;
    height: 0px;
    border-bottom: 4px solid var(--color-laranja1);
    display: block;
    border-radius: 5px;

}



.section-div {
    animation: inicializar .7s forwards; /* começar e terminar no ultimo objeto */
background-color: #000;
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: space-around;
align-items: center;
gap: 60px;
padding: 60px;
}

.section-div div {
    margin-top: 120px;
    align-self: start;
    display: grid;
    gap: 30px;
}

.section-div div h2{
    font-family: 'Bree Serif', serif;

    font-weight: 600;
    color: #f7f7f7;

}

.section-div div p {
    font-family: 'Poppins', sem serifa;
    font-size: 3vh;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    border-radius: 5px;
    color: #f7f7f7;
    
}


.section-div div a {
    justify-self: start ;
    color: #fff;
    padding: 15px 40px;
    border-radius: 5px;
    border: 2px solid white;
    font-family: 'Bree Serif', serif;
   
    


}




.section-div img {
    max-width: 100%;
}

section .digitando {
    border-radius: 5px;
    font-style: italic;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Geneva, Tahoma, sans-serif;
    font-size: 8vh;
    font-weight: bold;
}

@keyframes sobeSecao {
    from{
        transition: .5s;
        transform: translate3d(140px, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes inicializar {
    from {
        opacity: 0;
        transform: translate3d(0, -60px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* Seção principal sobre mim*/

main {
    background-color: #111;
    color: #fff;
    justify-content: center;
    align-items: center;
    
}

main .sobre {
    margin-top: 60px ;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    padding: 40px;
    align-items: center;
}

.sobre-titulo {
   margin: 30px 0;
   grid-column: 1/-1;
   text-align: center;
   color: #fff;
}


.sobre-titulo h1 {
    font-size:  2.5rem;
    color: var(--color-azul3);
    margin-bottom: 15px;
    font-family: 'Calistoga', cursive;
}

.sobre-titulo p {
    color:#ecebeb ;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    position: relative;

    
}

.sobre-titulo div {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.sobre span {
    display: block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--color-laranja1);
    justify-content: center;
    align-items: center;

}

.sobre-conteudo {
    font-family: 'Poppins', sem serifa;
    animation: sobeSecao .6s ease-in-out forwards;
    justify-content: center;
    align-items: center;


}

.fotoum {
    box-shadow: 5px 5px 5px 5px #9d9a9a38;
    min-height: auto; 
    max-height: 500px;
    max-width: 990px;
    border-radius: 30px;
    cursor: pointer;
    filter: blur(0);
    
    
}

.fotoum:hover{
    transition: .3s ease-in;
    filter: blur(1px);
}

.sobre-texto h1 {
    font-size: 2.3rem;
    color: #fff;
}

.sobre-texto h1::after {
    background-color: var(--color-laranja1);
    height: 6px;
    height: 6px;
    margin: 10px 0;
    content: '';
    display: block ;
    border-radius: 4px;
}



/* responsivo*/

@media (max-width: 900px){
   
    .sobre img{
        display: grid;
        grid-column: 1/-1;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        
    }
    .sobre-conteudo{
        
        grid-column: 1/-1;
        max-width: 100%;
        padding-left: 10px;
        
    }
    .section-div img {
        display: none;
    }
    .section-div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
   
    header .navegacao-primaria{
        display: none;
    }
    header {
        justify-content: space-between;
        padding: 30px 60px;
    }
    
    header i{
        cursor: pointer;
        color: #fff;
        font-size: 2.5rem;

    }
    header .navegacao-primaria.ativado{
    background: linear-gradient(rgba(23, 22, 22, 0.203), rgba(147, 147, 147, 0.171));
     position: absolute;
     display: grid;
     top: 70px;
     color: rgb(232, 229, 229);
     z-index: 2;
     padding: 20px;
     font-size: 1.6rem;
     font-weight: bold;
     border-radius: 0 0 4px 4px;
     right: 20px;
     animation: sobeSecao .8s ease-in-out forwards;
    }
}




.foto-dois{
 padding: 30px;
 width: 550px;
 height: 90%;
 min-width: 350px;
 border-radius: 10px;
}

.services {
    padding: 60px;
    margin-top: 30px;
  
    background-color: #151515;
}

.my-services {
    margin-top: 20px;
    margin-bottom: 40px;
    color: white;
}

.my-services ul{
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    align-items: center;
    justify-content: center;
}

.my-services ul li {
    cursor: pointer;
    position: relative;
    padding: 10px;
    display: grid;
    gap: 30px;
    text-align: center;
    align-content: center;
    max-width: 255px;
    background-color: #222;
    width: 550px;
    height: 550px;
   margin: 5px;
}

.my-services ul li i {
    font-size: 2rem;
    color: var(--color-laranja1);
}

.my-services ul li h3{
    color: #fff;
    font-size: 1.6rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500;

}

.my-services ul li p{
    color: #989797;
    font-size: 1.1rem;
}

.my-services li::before {
    content: '';
    transition: .7s ease-in-out;
    border-radius: 6px;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -1px;
    right: -1px;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
}
.my-services li::after {
    content: '';
    transition: .7s ease-in-out;
    border-radius: 6px;
    width: 0px;
    height: 0px;
    position: absolute;
    bottom: -2px;
    left:-2px;
    border-bottom: 2px solid transparent;
    border-left: 2px solid transparent;
}


.my-services li:hover::before{
    
    width: 100%;
    height: 100%;
    border-top: 3px solid var(--color-azul3);
    border-right: 3px solid var(--color-azul3);
}
.my-services li:hover::after{
    
    width: 100%;
    height: 100%;
    border-bottom: 3px solid var(--color-azul3);
    border-left: 3px solid var(--color-azul3);
}




.my-resume {
    color: white;
}

.resume-generico {
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 10px;
    align-items: start;
}

.resume-generico h2 {
    font-family:  'Times New Roman', Times, serif;
    font-size: 1.5rem;
    background-color: var(--color-azul3);
    justify-content: start;
    padding: 10px;
    border-radius: 3px;

}

.resume-generico h2 i {
    margin-right: 10px;
}

.experiencia {
    margin-bottom: 30px;
    grid-column: 1;
    grid-row: 1;
}



.education {
    margin-bottom: 30px;
    grid-column: 2;
    grid-row: 1;
}

/*experiencia */ 
.experiencia-content ul {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    border-radius: 3px;
    color:var(--color-laranja1);
    display: flex;
    margin-top: 25px;
    justify-content: center;
}

.resume-generico .experiencia-content div {
    animation:  ladoSecao .5s ease-in-out forwards;
    display: none;
    background: #222;
    padding: 20px;
    position: relative;
}

.resume-generico .experiencia-content div.ativo {
    display: block;
}

.experiencia-content ul li.ativo{
    color: #3e3d3d;
}


.resume-generico .experiencia-content div span {
    color: var(--color-azul3);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
}

.resume-generico .experiencia-content div h3{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 10px 0;
} 

.resume-generico .experiencia-content div p {
    color: #707070;
    font-size: 1.1rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

} 


/* educação meus diplomas e cursos*/


.resume-generico .education-content div {
    background: #222;
    animation:  ladoSecao .5s ease-in-out forwards;
    display: none;
    padding: 20px;
    position: relative;
    
}





.resume-generico .education-content div.ativo {
    display: block;
}


.education-content ul {
    color:var(--color-laranja1);
    gap: 10px;
    display: flex;
    cursor: pointer;
    margin-top: 20px;
    justify-content: center;
}



.resume-generico .education-content div span {
    color: var(--color-azul3);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
}


.resume-generico .education-content div h3{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 10px 0;
} 

.resume-generico .education-content div p {
    color: #707070;
    font-size: 1.1rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

} 

.education-content  div{
   color: #3e3d3d;
   
}


.education-content{
    align-items: center;
    justify-content: center;
    width: 95%;
    height:500px;
    

}



/* cursos e skills*/






.textoaleatorio{
  
    grid-template-columns:  2/2;
    padding: 10px 30px;
   border-radius: 5px;
   font-size: 1.5rem;
   background-color: #5c7e29;
   margin-bottom: 30px;
   justify-self: start;
}



.textoaleatorio{
    background-color: #222;
    border-radius: 3px solid #2f2b2b;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    padding: 30px;
   
    
}

.textoaleatorio h3 {
    padding:  30px 10px;
    font-size: 1.5rem;

}


@media (max-width: 1070px ) {

    .resume-generico .experiencia-content, .education-content{
        justify-self: center;
        grid-column: 1/-1;
        padding: 10px;
        width: 600px; /*  arrumar mobile*/
    }

    .resume-generico .education {
        grid-column: 1/-1;
        grid-row: 3;
        justify-self: center;
        margin: 30px 0;
        
    }

    .resume-generico .experiencia {
        grid-column: 1/-1;
        grid-row: 1;
        justify-self: center;
      
        
    }

    .form-wrapper label{
        width: 50%;
    }

    .cursos .textoaleatorio h3 {
        justify-self: center;
    }
    .cursos .textoaleatorio {
        margin-bottom: 30px;
        text-align: center;
        grid-template-columns: 1fr;
        justify-self: center;
    }

    .cursos .my-skill {
        margin: 20px;
        text-align: center;
        grid-template-columns: 1fr;
        justify-self: center;
    }
}

.projetos {
    padding: 30px;
    display: grid;
    justify-content: center;
    gap: 30px;
    background-color: #222222;
    color: #09301D;
}

.projetos ul {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.modelos-projetos ul li {
cursor: pointer;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.7rem;
border-bottom: 2px solid  transparent;
}


.projetos-ilustracao span {
        display: block;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background-color: var(--color-laranja1);
        justify-content: center;
        align-items: center;
    }




.modelos-projetos ul li:hover  {
   
    transition: 2s ease-in;
    color: #6b6b6b ;
   
    border-radius: 3px;
}
    
.amarzenamento-projetos ul{
    display: grid;
    margin-top: 50px;
    gap: 20px;
    justify-content: center;
    grid-template-columns: repeat(4, 1fr);

}

.amarzenamento-projetos ul li {
    max-width: 100%;
    height: 75%;
}

.amarzenamento-projetos ul li  img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius:  4px;
    cursor: pointer;
}

.projetos a {
    background-color: #222 ;
    text-decoration: none;
    justify-self: center;
    padding: 10px;

}


footer {
    background-color: #000;
    padding: 30px;
}

.footer-social{
    display: flex;
    color: #f7f7f7;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.footer-social li {
    padding: 30px;
    background-color: #212020;
    border-radius: 50%;
    border: 1px solid #333;

}

.footer-social li i {
    padding: 30px;
    font-size: 1.7rem;
    color: #f7f7f7;
}

.footer-social li:hover {
    transition: .3s ease-in-out;
    cursor:  pointer;
    background-color: #494848 ;
}

.footer-social::before {
    content: '';
    height: 5px;
    position: absolute;
    width: 200px;
    bottom: -30px;
    background-color: #222;
}

footer .footer-comercial {
    text-align: center;
    color: #ffff;
    margin:90px auto ;
    font-size: 1.5rem;
    font-family: 'Times New Roman', Times, serif;
}



.footer-social li {
color: #ddebe4;
}




.linguagem li {
    width: 150px;
    height: 150px;
    border-radius: 15px;
    box-shadow: 1px 2px 2px 1px #2a2929;
}

.linguagem li svg {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 80%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 

    
}

.project li a {
    border-radius: 30px;
    width: 20%;
}

.logo-img {
    width: 65px;
    height: 65px;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 5px;
}

 /**
   * CONTACT
   */

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
   
    
  }

  .contact-content { margin-bottom: 0; }

 

  .contact-list { margin-left: -40px; }

  /*-----------------------------------*\
 * #CONTACT
\*-----------------------------------*/



.contact-content { margin-bottom: 40px; }

.contact-list-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.contact-item-icon {
  font-size: 25px;
  color: white;
}

.contact-item-icon ion-icon { --ionicon-stroke-width: 40px; }

.contact-item-title { margin-bottom: 10px; }

.contact-list-item .contact-info {
  color: white;
  font-style: normal;
  line-height: 1.6;
  transition: .4s;
}

.contact-info:not(address):is(:hover, :focus) { color: rgb(162, 161, 161); transition: .4s; }

.contac-social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding-inline: 40px;
}

.contact-social-link {
  position: relative;
  background: var(--color-laranja1);
  color: white;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: var(--transition-1);
}

.contact-social-link:is(:hover, :focus) {
  background: var(--color-laranja1);
  color: white;
}

.contact-social-link:is(:hover, :focus) .tooltip {
  transform: translateY(0);
  opacity: 1;
}

.contact-form {
  
  background: var(--color-dark2);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 2px #ece9e952;
  min-width: 350px;
}

.form-wrapper { 
    margin-bottom: 25px; 
   
}

.form-label {
  color: white;
  font-size:  1rem;
  font-family: var(--ff-poppins);
  margin-bottom: 8px;
  margin-left: 5px;
  
}

.input-wrapper {
     position: relative; 
 }

.input-field {
  background: var(--color-dark1);
  color: white;
  padding: 10px;
  padding-left: 40px;
  border-radius: var(#fff);
  transition: var(--transition-1);
}

.input-wrapper ion-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  color:white;
  font-size: 20px;
  transition: .4s;
}

textarea.input-field {

  height: 10px;
  max-height: 200px;
  resize: vertical;
}



.contact .btn-primary {
    height: 50px;
    border-radius: 15px;
  max-width: unset;
  width: 100%;
  background: var(--color-dark1);
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 1.1rem;
  color: white;
}



.section-subtitle {
    padding-top: 18px;
  position: relative;
  color: white;
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.section-subtitle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--color-laranja1);
}

.section-title {
  max-width: 350px;
  margin-bottom: 30px;
}

.section-text {
  color: white;
  line-height: 1.8;
  margin-bottom: 30px;
}


section{
    background: #111;
    padding: 50px;
    margin-bottom: 20px;
}

.section-title
{
    color: rgb(218, 217, 215);
}

.contact-list{
    color: white;
    padding: 15px;
}


.input-wrapper{
 width: 50px;
}






.contact{
    width: 1510px;
    min-width: 550px;
}





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

}

.contact-form  input  {
    border-radius: 10px;
    min-width: 500px;
    border: none;

}

textarea{
    border: none;
    border-radius: 10px;
    
}

.btn-primary{
    border: none;
    cursor: pointer;
    transition: .4s ease-in;
}

.btn-primary:hover{
    background-color: #363636;

}


.sobre-conteudo h2 h4 p{
   align-items: center;
   display: flex;

}


@media (max-width: 900px ) {
  
    .form-label{
    display: flex;
    justify-content: center;
        width: 100%;
       
    }
    .contact  {
        width: 200px;
    
    }

    .input-field{
        width: 300px;
    }
    #contact{
        grid-template-columns: 1fr;
        width: 520px;
      
    }
    #arruma{
        gap:0;
        margin: 0;
        
      text-align: center;
      justify-content: center;

    }
   

    .ajustes{
        width: 100%

    }

    
    .ajustes input{
       border-radius: 10px;
       text-decoration: none;
       border: none;
       height: 40px;
       align-items: center;
       justify-content: center;
    }
    
}


@media (max-width: 1005px ){
    .ajustes{
        width: 100%

    }

    
    .ajustes input{
       border-radius: 10px;
       text-decoration: none;
       border: none;
       height: 40px;
       align-items: center;
       justify-content: center;
    }
}

.botao{
    width: 210px;
    height: 40px;
    border: none;
    text-decoration: none;
    background-color: #646464;
    color: #fff;
    font-size: 1.5;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s ease-in;
}

.botao:hover{
    background-color: #4b4a4a;
}

.ajustes input{
    border-radius: 10px;
    text-decoration: none;
    border: none;
    height: 40px;
    align-items: center;
    justify-content: center;
 }
 .ajuste-men{
    width: 310px;
    height: 40px;
    border: none;
    text-decoration: none;
    background-color: #424242;
    color: #fff;
    font-size: 1.5;
    border-radius: 10px;
    text-align: center;
    align-items: center;
 }