@media (max-width: 997px) {
    .hamburger {
      display: block;
      z-index: 1;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }
  
    .nav-list {
      position: fixed;
      top: 0px;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--cor-8);
      clip-path: circle(100px at 90% -35%);
      transition: 1s ease-out;
  
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0;
  
      pointer-events: none;
    }
    
    .nav-list li {
      padding: 10px;
    }

  
    .nav-list a {
      font-size: 24px;
      opacity: 0;
    }
  
    .nav-list li:nth-child(1) a {
      transition: 0.5s 0.2s;
    }
  
    .nav-list li:nth-child(2) a {
      transition: 0.5s 0.4s;
    }
  
    .nav-list li:nth-child(3) a {
      transition: 0.5s 0.6s;
    }
  
    /* Estilos ativos */
  
    .nav.active .nav-list {
      clip-path: circle(1500px at 90% -15%);
      pointer-events: all;
    }
  
    .nav.active .nav-list a {
      opacity: 1;
    }
  
    .nav.active .hamburger {
      position: fixed;
      top: 26px;
      right: 16px;
      border-top-color: transparent;
    }
  
    .nav.active .hamburger::before {
      transform: rotate(135deg);
    }
  
    .nav.active .hamburger::after {
      transform: rotate(-135deg);
      top: -7px;
    }


    /* PRINCIPAL */

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

    .principal .principal-esquerda {
      color: var(--cor-6);
      width: 100%;
      text-align: center;    
      margin-top: -80px;
    }


    .principal .principal-direita {
      position: relative;
      padding-bottom: 20px;
      top: 40px;
    }

}/* FIM 900px */
 



/* INÍCIO 646px */
@media (max-width: 646px) {

  h2 {
    font-size: 1.3rem;
  }

  .principal .principal-esquerda {
    width: 100%;
    padding: 1px;
  }

  .principal .principal-esquerda h2 {
    font-size: 0.8rem;    
  }

  .principal .principal-esquerda h1 {
    font-size: 1.8rem;    
  }

  .principal .principal-esquerda span, .principal .principal-esquerda p  {
    font-size: 1.3rem;    
  }


.principal .principal-direita {
  margin-bottom: 20px;
}


.principal .principal-direita img {
  max-width: 240px;
}

.principal > svg {
  position: absolute;
  bottom: 12px;
  left: 0;
}


.quem-somos {
  margin-top: -13px;
}


.quem-somos .linha {
  padding: 2px;
  width: 120px;
  margin: 10px auto;
  background-color: var(--cor-8);
}


.quem-somos img {
  position: relative;
  width: 140px;
  margin-top: -40px;
}

.quem-somos h2 {
  margin-top: 20px;
  font-size: 1.3rem;
  color: var(--cor-6);
}


.quem-somos .quem-somos-informacao .box-informacao {
  padding: 20px;
  font-size: 1.7rem;
}


.quem-somos .quem-somos-informacao .box-informacao span:nth-child(1) {
  font-size: 2.7rem;
}

.quem-somos .quem-somos-informacao .box-informacao span:nth-child(2) {
  font-size: 2.7rem;
}


.quem-somos .quem-somos-informacao .box-informacao span:nth-child(3) {
  display: block;
}


.quem-somos .quem-somos-texto p {
  /* color: var(--cor-1); */
  font-weight: bold;
  padding: 0 10px;
  font-size: 1rem;
}


.quem-somos .quem-somos-texto a .btn-quem-somos {
  margin-top: 60px;
  padding: 15px;
  width: 150px;
  font-size: 1rem;
  border-radius: 30px;
  cursor: pointer;
  transition: .2s ease-in;
}

.quem-somos .quem-somos-texto a .btn-quem-somos:hover {
  background: transparent;
  border: 1px solid var(--cor-6);
  color: var(--cor-6);
}

.quem-somos .quem-somos-texto a .btn-quem-somos i {
  display: inline-block;
  padding-left: 10px;
}

.quem-somos .quem-somos-texto .quem-somos-img {
  position: absolute;
  left: 10px;
  z-index: -1;
  bottom: 100px;
}


/* ********** FIM QUEM SOMOS ************ */

.servicos {
  position: relative;
  top: 60px;
}

.servicos svg {
  position: absolute;
  bottom: 60px;
  left: 0;
  z-index: ;
}

.servicos-geral {
  background-color: var(--cor-1);
}

.servicos-geral .box-servicos {
  padding-bottom: 60px;
  width: 270px;
  position: relative;
}


.servicos-geral .box-servicos a {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);

}

/* ********** FIM SERVIÇOS ************ */

.projetos-feitos p {
  font-size: 1.3rem;
}


/* **********  PROJETOS JÁ CRIADOS ************ */

.servico-site .servico-site-h2 {
  font-size: 1.5rem;
}

.servico-site-p {
  font-size: 1rem;
}


.servico-site .box-servico-site .box-servico:nth-child( 1 ) {
  background: var(--btn);
  color: var(--cor-6);
}

.servico-site .box-servico-site .box-servico:nth-child( 2 ) {
  background: var(--cor-1);
  color: var(--cor-6);
}

.servico-site .box-servico-site .box-servico:nth-child( 3 ) {
  background: var(--cor-2);
  color: var(--cor-6);
}

.servico-site .box-servico-site .box-servico:nth-child( 4 ) {
  background: var(--cor-4);
  color: var(--cor-6);
}

.servico-site .box-servico-site .box-servico:nth-child( 5 ) {
  background: var(--cor-5);
  color: var(--cor-6);
}


.servico-site .box-servico-site h3 {
  font-size: 1.2rem;
}


.servico-site .box-servico-site h4 {
  font-size: 1rem;
}


.servico-site .box-servico-site .box-servico {
  width: 240px;
}


.servico-site .box-servico-site .box-servico h4 span {
  font-size: 1rem;
}


.servico-site .box-servico-site p {
 display: flex;
 padding: 8px;
 font-size: 0.8rem;
}


.servico-site .box-servico-site .box-servico a button {
  padding: 5px;
  font-size: 0.6rem;
}


.servico-site .box-servico-site .box-servico a button:hover{
  background: var(--cor-1);
  color: var(--cor-6);
  transition: .5s ease-in;
  box-shadow: 1px 1px 5px 1px var(--cor-1);
}



/* **********  NOSSO TRABALHO ************ */


.metodologia-praticas .metodologia-geral .box-metodologia .numero {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  top: 20px;
  left: 10px;
}


.metodologia-praticas .metodologia-geral .box-metodologia .metodologia-i {
  border-radius: 50%;
  height: 130px;
  width: 130px;
} 


/* DÚVIDA */

.duvidas {
  padding: 10px;
}

.duvidas h2 {
  width: 100%;
  text-align: center;
}


.duvidas .linha {
  margin: 75px auto 2px;
}


.duvidas .duvida-direita {
  position: relative;
  top: -80px;
}

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

.rodape .formulario {
  margin: 0 auto;
}


.rodape .formulario input:nth-child(1) {
  width: 95%;  
}


.rodape .informacao-desenvolvedor {
  display: flex;
  flex-direction: column;
  padding: 2px;
}

.rodape .informacao-desenvolvedor img {
  margin-top: 10px;
}

.rodape .informacao-desenvolvedor p {
  text-align: center;
}







/* //////////////////////////
  PÁGINAS 
///////////////////////// */

.principal-layout,
.box-quem-somos,
.mobile-layout {
  display: flex;
  flex-direction: column;
}


.box-quem-somos-img,
.principal-layout-img,
.mobile-layout-img {
  position: relative;
  top: 30px;
  max-width: 170px;
}



.box-quem-somos-texto h1,
.principal-layout-texto h1,
.box-mobile-texto h1 {
    margin-top: 60px;
}



.quem-somos-box-1,
.quem-somos-box-3 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    /* border-bottom: 2px solid var(--cor-2); */
    width: 80%;
    padding-bottom: 30px;
    padding-top: 30px;
}


.quem-somos-box-2,
.quem-somos-box-4 {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 auto;
    /* border-bottom: 2px solid var(--cor-2); */
    width: 80%;
    padding-top: 30px;
    padding-bottom: 30px;
}


.linha-box {
  display: none;
}


.quem-somos-box-img {
    border-bottom: 2px solid var(--cor-2);
    padding-bottom: 30px;
}

.box-img {
    border-bottom: none;
    padding-bottom: 30px;
}



.quem-somos-box-img img {
  width: 150px;
}


.rodape .formulario {
  /* width: 95%; */
  display: flex;
  flex-direction: column-reverse;
}




.rodape .box-formulario {
  width: 100%;
}


.rodape .box-formulario-img {
  width: 100%;
}


.rodape .box-formulario-img img {
  max-width: 80%;
}




.principal-layout {
    display: flex;
    flex-direction: column-reverse;
}



.principal-layout-img {
    text-align: center;
}



.principal-layout-img img {
  position: relative;
  width: 280px;
  right: 70px;
}




.conteudo-layout-personalizado h2,
.conteudo-quem-somos h2,
.conteudo-mobile-layout h2 {
    font-size: 1.5rem;
    padding-bottom: 10px;
}


.conteudo-layout-personalizado p{
  font-size: 0.8rem;
}



.box-sessao-layout {
  display: flex;
  flex-direction: column;
}


.sessao-layout-img {
  width: 100%;
  /* background-color: yellow; */
  /* text-align: center; */
}


.sessao-layout-img img {
  /* position: absolute; */
  width: 60%;
  /* right: 100px; */
}



.sessao-layout-4 .sessao-layout-img img {
  position: absolute;
  top: 30px;
  width: 400px;
  right: -15px;
}


.sessao-layout-1-texto,
.sessao-layout-2-texto,
.sessao-layout-3-texto,
.sessao-layout-4-texto {
    width: 100%;
} 



.sessao-layout-1-texto h2,
.sessao-layout-2-texto h2,
.sessao-layout-3-texto h2,
.sessao-layout-4-texto h2 {
    font-size: 1.5rem;
}


.sessao-layout-1-texto p,
.sessao-layout-2-texto p,
.sessao-layout-3-texto p,
.sessao-layout-4-texto p {
    font-size: 0.8rem;
}




/* //////////////////////////
  FIM PÁGINAS 
///////////////////////// */






}




/* INÍCIO 587px */

@media (max-width: 587px) {

  h2 {
    font-size: 1.3rem;
  }


  .principal {
    position: relative;
    padding: 12px;
    top: 180px;
  }


  .principal .principal-esquerda {
    width: 100%;
    padding-bottom: 220px;
  }

  .principal .principal-esquerda h2 {
    font-size: 0.8rem;    
  }

  .principal .principal-esquerda h1 {
    font-size: 1.8rem;    
  }

  .principal .principal-esquerda span, .principal .principal-esquerda p  {
    font-size: 1.3rem;    
  }


  .principal .principal-esquerda .btn-orcamento {
    position: relative;
    top: 50px;
    right: 30%;
    width: 80px;
    font-size: 0.9rem;
  }



  .principal .principal-direita {
      position: relative;
      top: -240px;
      left: 15%;
  }


  .principal > svg {
    position: absolute;
    bottom: 230px;
    left: 0;
  }


    .quem-somos {
      margin-top: -155px;
  }

    .quem-somos img {
      margin-top: 2px;
  }

  .quem-somos .quem-somos-texto .quem-somos-img {
    position: absolute;
    left: -40px;
    bottom: 50px;
  }


  .servicos svg {
    position: absolute;
    bottom: 58px;
    left: 0;
  }

}