@charset "UTF-8";

/*Celulares*/
 @media(max-width:600px){
    /*Header*/
    nav {
    width: 70%;
    
    }
    #menu a{
      color: black;
    }


    #menu {
        position: fixed;
        height: 100vh;
        top: 0;
        left: -700px;
        padding: 80px 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 100px;
        align-items: flex-start;
        transition: left 0.3s ease-out;
        background-color: #f5f5f5;
        z-index: 4;
    }

    #menu figure{
        align-self: center;
    }

    #menu.active {
        left: 0;
    }

    #menu ul {
        width: 100%;
        flex-direction: column;
        margin-top: 0px;
        padding: 0;
    }

    #menu ul li {
        padding: 0px 0;
        width: 100%; 
    }

    #menu ul li a {
        display: block;
        width: 90%; 
        padding: 10px 0;
        text-align: left; 
        text-decoration: none;
        font-weight: 500;
    }

    #icone-menu {
        position: fixed;
        right: 15px;
        top: 70px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        cursor: pointer;
        z-index: 4;
    }

    #icone-menu.active .linha:nth-child(1) {
        transform: rotate(45deg) translateY(10px);
    }

    #icone-menu.active .linha:nth-child(2) {
        opacity: 0;
    }

    #icone-menu.active .linha:nth-child(3) {
        transform: rotate(-45deg) translateY(-10px);
    }

    #icone-menu .linha,
    #icone-menu  {
        transition: all 0.3s ease-in-out;
    }


    .linha {
        width: 30px;
    }

    .linha
    {
        display: block;
        height: 5px;
        border-radius: 15px;
      background: linear-gradient(
    150deg, 
    var(--dourado-claro) 0%, 
    var(--dourado-medio) 50%, 
    var(--dourado-escuro) 100%
  );
    }

    /*Bandeira*/

    #bandeira{
            width: 100%;
    }

    #bandeira div{
        width: 90%;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -55%);
        justify-content: center;
        align-items: center;
        text-align: center;
        
            
    }


    i {
    font-size: 30px;
   }

    /*========SOBRE==========*/
   .container-perfil {
    flex-direction: column;
    align-items: center;
    padding: 5rem 2rem; 
  }

  .coluna-esquerda {
    align-items: center;
  }

  .imagem-perfil img {
    max-width: 280px;
  }

  .link-voltar {
    order: -1;
    margin-bottom: 1rem;
    align-self: flex-start;
  }

  .coluna-direita {
    text-align: left;
    margin-top: 2rem;
  }

  .nome-cargo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .nome {
    font-size: 1.5rem;
    text-align: center;
  }

  .cargo{
  text-align: center;
}


  .linkedin {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .contato,
  .endereco,
  .biografia {
    text-align: left;
  }

  /* =======ATUAÇÕES =======*/

  .servicos-lista {
        grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    }
    .servico-item{
        flex-direction: column;
        text-align: center;
    }

    .atuacoes-texto-container {
    grid-template-columns: 1fr;
    max-width: 90%;
  }

  
    /* PÁGINA CONTATO */

  #sessao-contato{
      flex-direction: column;
      gap: 50px;
      margin: 80px auto 0;
  }
  #sessao-contato h1{
  font-size: 2em;
  }
    }

    

    



 /* Tablets */
@media (min-width:601px) and (max-width: 768px) {
    /*Header*/
    nav {
        width: 70%;
    }

     #menu a{
      color: black;
    }

    #menu {
        position: fixed;
        height: 100vh;
        top: 0;
        left: -700px;
        padding: 80px 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 100px;
        align-items: flex-start;
        transition: left 0.3s ease-out;
        background-color: #f5f5f5;
        z-index: 4;
    }

    #menu figure{
        align-self: center;
    }

    #menu.active {
        left: 0;
    }

    #menu ul {
        width: 100%;
        flex-direction: column;
        margin-top: 0px;
        padding: 0;
    }

    #menu ul li {
        padding: 0px 0;
        width: 100%; 
    }

    #menu ul li a {
        display: block;
        width: 90%; 
        padding: 10px 0;
        text-align: left; 
        text-decoration: none;
        font-weight: 500;
    }

    #icone-menu {
        position: fixed;
        right: 15px;
        top: 70px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        cursor: pointer;
        z-index: 4;
    }

    #icone-menu.active .linha:nth-child(1) {
        transform: rotate(45deg) translateY(10px);
    }

    #icone-menu.active .linha:nth-child(2) {
        opacity: 0;
    }

    #icone-menu.active .linha:nth-child(3) {
        transform: rotate(-45deg) translateY(-10px);
    }

    #icone-menu .linha,
    #icone-menu  {
        transition: all 0.3s ease-in-out;
    }


    .linha {
        width: 30px;
    }

    .linha {
        display: block;
        height: 5px;
        border-radius: 15px;
        background-color: #B49465;
    }


    /*Bandeira*/
    #bandeira div{
        width: 65%;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -55%);
        justify-content: center;
        align-items: center;
        text-align: center;
        
    }

     i {
    font-size: 40px;
   }


    /*========SOBRE==========*/
   .container-perfil {
    flex-direction: column;
    align-items: center;
    padding: 5rem  2rem;
  }

  .coluna-esquerda {
    align-items: center;
  }

  .imagem-perfil img {
    max-width: 280px;
  }

  .link-voltar {
    order: -1;
    margin-bottom: 1rem;
    align-self: flex-start;
  }

  .coluna-direita {
    text-align: left;
    margin-top: 2rem;
  }

  .nome-cargo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .nome {
    font-size: 1.5rem;
    text-align: center;
  }

   .cargo{
  text-align: center;
}

  .linkedin {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .contato,
  .endereco,
  .biografia {
    text-align: left;
  }


  /*=====ATUACAO======*/
  
  .servicos-lista {
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    }

    .atuacoes-texto-container {
    grid-template-columns: 1fr;
    max-width: 90%;
  }

   /* PÁGINA CONTATO */
 
    #sessao-contato{
        flex-direction: column;
        gap: 50px;
        margin: 80px auto 0;
    }
    #sessao-contato h1{
    font-size: 2em;
    }
}


 /* Computadores */
@media (min-width:769px) and (max-width: 1064px) {

  nav a{
    font-size: 1.1rem;
  }

    /*Bandeira*/
    #bandeira div{
        width: 95%;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -55%);
        justify-content: center;
        align-items: center;
        text-align: center;
            
    }

     i {
    font-size: 40px;
   }



   /*========SOBRE==========*/
   .container-perfil {
    flex-direction: column;
    align-items: center;
    padding: 5rem 2rem;
  }

  .coluna-esquerda {
    align-items: center;
  }

  .imagem-perfil img {
    max-width: 280px;
  }

  .link-voltar {
    order: -1;
    margin-bottom: 1rem;
    align-self: flex-start;
  }

  .coluna-direita {
    text-align: left;
    margin-top: 2rem;
  }

  .nome {
    font-size: 1.5rem;
    
  }

  .nome-cargo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }



  .linkedin {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .contato,
  .endereco,
  .biografia {
    text-align: left;
  }

   /*=====ATUACAO======*/
   
  .servicos-lista {
        grid-template-columns: repeat(auto-fit,minmax(280px,2fr));
      }

      /* PÁGINA CONTATO */

    #sessao-contato{
        margin: 150px auto 0;
    }

    #sessao-contato h1{
    font-size: 3em;
    }

    #container-form, #txt-contato{
    width: 40%;
    }
  
    
}



/*Telas grandes*/
@media (min-width:1065px)  {

  nav a{
    font-size: 1.3rem;
  }
    /*Bandeira*/
    
    #bandeira{
            width: 100vw;
            
    }
      #bandeira div{
        width: 35%;
        top: 55%;
        left: 90%;
        transform: translate(-90%, -55%);
        text-align: right;
        justify-content: flex-end;
        align-items: flex-end;          
    }

    #bandeira div h1{
        font-size: 3em
    }

    #bandeira div p{
        font-size: 1.25em;
    }

    .icones i {
    font-size: 40px;
   }

   #conteudo-sobre{
    width: 50%;
  }

  /*=====ATUACAO======*/
    .servicos-lista {
    grid-template-columns: repeat(auto-fit,minmax(280px,2fr));
    }

 #sessao-contato{
        margin: 150px auto 0;
    }

    #sessao-contato h1{
    font-size: 4em;
    }

    #container-form, #txt-contato{
    width: 40%;
    }
    
  
}