@font-face {
    font-family: 'NeueKabel';
    src: url(/fonts/NeueKabel/NeueKabel.otf);
}

@font-face {
  font-family: 'NeueKabel Light';
  src: url(/fonts/NeueKabel/NeueKabel-Light.otf);
}

@font-face {
  font-family: 'NeueKabel Book';
  src: url(/fonts/NeueKabel/NeueKabel-Book.otf);
}

@font-face {
  font-family: 'NeueKabel Extra Light';
  src: url(/fonts/NeueKabel/NeueKabel-ExtraLight.otf);
}

@font-face {
  font-family: "TT Chocolate Trial Regular";
  src: url(/fonts/Chocolate/TT\ Chocolates\ Trial\ Regular.otf);
}

@font-face {
  font-family: "TT Chocolate Trial Light";
  src: url(/fonts/Chocolate/tt-chocolates-trial.light.ttf);
}

@font-face {
  font-family: "Novecento Sans";
  src: url(/fonts/Novecento_Sans/Novecentosanswide-Normal.otf);
}

@font-face {
  font-family: "Novecento Sans Light";
  src: url(/fonts/Novecento_Sans/Novecentosanswide-Light.otf);
}


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

/* * {
  outline:  red 1px solid;
} */

/* Variaveis */
:root{
  --bege:#FEF7E5;
  --preto:#000000;
  --azul_escuro:#092040;
  --azul_claro:#6385AB;
  --branco_azulado:#F7F9FA;

  --azulEscuro-bege:#092040;
  --azulClaro-bege:#6385AB;
  --bege-azulEscuro:#FEF7E5;

  --fundo_btn:#6385AB;
  --cor_btn:#F7F9FA;

  --cor_texto:#092040;
  --cor_texto_2:#092040;

  --fundo:#F7F9FA;

  transition: background-color 0.3s ease, color 0.3s ease;
}
html.dark-mode{
  --bege:#FEF7E5;
  --preto:#000000;
  --azul_escuro:#092040;
  --azul_claro:#6385AB;
  --branco_azulado:#F7F9FA;

  --azulEscuro-bege:#FEF7E5;
  --azulClaro-bege:#FEF7E5;
  --bege-azulEscuro:#092040;

  --fundo_btn:#FEF7E5;
  --cor_btn:#092040;

  --cor_texto:#F7F9FA;
  --cor_texto_2:#FEF7E5;

  --fundo:#1C1D26;

  & .claro{
    display:none;
  }
  & .escuro{
    display:inline;
  }
}

.escuro{
  display: none;
}
.claro{
  display:inline;
}

body{
  background-color: var(--fundo);
  font-family:'NeueKabel';
  color:var(--branco_azulado);
  
}

.espacamento{
 margin-inline: 7%;
}


h1{
  font-family: "TT Chocolate Trial Regular";
}
h2, p{
  font-family: 'NeueKabel';
}

.btn_reuniao{
    background-color: var(--fundo_btn);
    color: var(--cor_btn) !important;
    display: grid;
    width: fit-content;
    height: fit-content;
    border-radius: 20px;
    justify-content: center;
    align-content: center;
    align-self: end;
    padding: 7px 5% 7px 5%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
  }
.btn_reuniao:hover{
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}


.inicial{
  /* Grid */
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(11, 1fr);
  grid-column-gap: 17px;
  grid-row-gap: 0px;
  /*----------------------------------------------*/
  background-color: var(--azul_escuro);
  height: 80vh;
  width: 100%;
  border-radius: 0 0 25px 25px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
  background-image: url("/images/pagina_principal/Q_inicial.svg");
  background-repeat: no-repeat;
  background-position-x:right ;
  background-size: contain;
}

.texto_inicial { 
  grid-area: 2 / 2 / 11 / 8;
  color:var(--branco_azulado);
  /* Grid para divs filhos */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  /* ------------------------------------------- */
  & h1{
    grid-area: 1 / 1 / 2 / 2;
    align-self: start;
    font-size: clamp(1.4rem,3.333vw,6rem);
    font-weight: 200;
    margin-bottom: 2%;
  }
  & .corpo_inicial{
    grid-area: 2 / 1 / 4 / 2;
    margin-left:5%;
    margin-bottom: 3%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & h2{
        grid-area: 2 / 1 / 4 / 2;
        font-weight: 100;
        font-size:clamp(1.18rem,1.533vw,2.5rem);
        width: 80%;
        margin-top: 7.5%;
        margin-left: -5%;
    }
    & .valores{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      width: fit-content;
      align-items: center;
      font-size:clamp(0.7rem,1.533vw,2.5rem);

      & .valores1,.valores2,.valores3,.valores4{
        display: flex;
        align-items: center;
        gap:10px;
      }
    }
  }
  & .btn_reuniao{
    background-color: var(--fundo_btn);
    padding: 2% 3% 2% 3%;
    border-radius: 25px;
    font-size: clamp(1.4rem,1.833vw,3rem);
  }
}


.imagem_inicial {
  grid-area: 2 / 8 / 11 / 10;
   background-color: var(--branco_azulado);
   border-radius: 30px;
   background-image: url("/images/pagina_principal/Argalji_principal.svg");
   background-size: cover;
   background-position-x:center;
   background-repeat: no-repeat;
  }

.corpo_serviços{
  /*height: 120vh;*/
  display: grid;
}

.container_serviços{

  & .titulo_serviços{
    color:var(--cor_texto);
    font-family: "Novecento Sans";
    font-size: clamp(1rem,2.833vw,3.5rem);
    font-weight: 200;
    margin:  70px 0 70px 0;
  }
  & .serviços{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 5%;
    grid-row-gap: 5%;
    /*height: 90vh;*/

    & .direito_imobiliario, .direito_civil, .direito_trabalhista, .direito_consumidor /*.direito_bancario .acoes_civis*/{
      display: grid;
      position: relative;
      overflow: hidden;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 21px;
      grid-row-gap: 21px;
      background-color: var(--azul_escuro);
      border-radius: 25px;
      padding: 7%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    & .direito_imobiliario::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:url(/images/pagina_principal/imagem_civil.png);
      background-size:cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;

    }
    & .direito_imobiliario:hover::before{
      opacity: 1;
    }

    & .direito_imobiliario{
      grid-area: 1 / 1 / 2 / 2;
    }

    & .direito_civil::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size:cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      background-image:url(/images/pagina_principal/imagem_imobiliario.png);
    }

    & .direito_civil:hover::before{
      opacity: 1;
    }

    & .direito_civil{
      grid-area: 1 / 2 / 2 / 3;
    }

    & .direito_trabalhista::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size:cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      background-image:url(/images/pagina_principal/imagem_empresarial.png);
    }

    & .direito_trabalhista:hover::before{
      opacity:1;
    }

    & .direito_trabalhista{
      grid-area: 2 / 1 / 3 / 2;
    }

    & .direito_consumidor::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size:cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      background-image:url(/images/pagina_principal/imagem_consumidor.png);
    }

    & .direito_consumidor:hover::before{
      opacity: 1;
    }

    & .direito_consumidor{
      grid-area: 2 / 2 / 3 / 3;
    }
    /*
    & .direito_bancario::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size:cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      background-image:url(/images/pagina_principal/imagem_civil.png);
    }

    & .direito_bancario:hover::before{
      opacity: 1;
    }
     
    & .direito_bancario {
      grid-area: 3 / 1 / 4 / 2;
    }
    */
    & .direito1{
      grid-area: 1 / 1 / 2 / 4;
      font-family: "TT Chocolate Trial Regular";
      font-size: clamp(1.2rem,2.5vw,4rem);
      font-weight:100;
      position: relative;
    }
    & .direito2{
      grid-area: 2 / 1 / 3 / 4;
      padding-right: 3%;
      font-family: "NeueKabel Light";
      font-weight: 100;
      font-size:clamp(0.63rem,1.3vw,2rem);
      position: relative;
    }
    & .direito3{
      grid-area: 1 / 4 / 2 / 5;
      & img{
        transform: scale(0.8);
      }
    }
  }
}

.direito_bancario {
    display: grid;
    position: relative;
    overflow: hidden;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: var(--azul_escuro);
    border-radius: 25px;
    padding: 7%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

    & .direito3 {
      transform: scale(0.6);
    }
    & .direito2{
      margin-top: -5%;
    }
}

.direito_bancario::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size:cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      background-image:url(/images/pagina_principal/Bancario.svg);
    }

.direito_bancario:hover::before{
    opacity: 1;
}
     
.direito_bancario {
    grid-area: 3 / 1 / 4 / 2;

    & .direito1 {
      grid-area: 1 / 1 / 2 / 5 !important;
    }
}

.acoes_mobile {
  display: none;
}

.acoes_civis {
    display: grid;
    position: relative;
    overflow: hidden;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: var(--azul_escuro);
    border-radius: 25px;
    padding: 7%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.acoes_civis::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size:cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      background-image:url(/images/pagina_principal/Acoes.png);
    }

.acoes_civis:hover::before{
    opacity: 1;
}
     
.acoes_civis {
    grid-area: 3 / 2 / 4 / 2;

    & .direito1 {
      grid-area: 1 / 1 / 2 / 5 !important;
    }
}

.btn_mobile {
  display: none;
} 

/* --- Animação --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.corpo_diferencial{
  height: 65vh;
  display: grid;
  block-size: auto;
  margin: 12vh 0 12vh 0;
}
.container_diferencial{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-image: url(/images/pagina_principal/imagem_diferencial.png);
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  padding: 4%;

  & .active{
    display:grid !important;
  }

  & .diferencial{
    color:var(--bege);
  }

    & .descricao-texto{
      grid-area: 1 / 1 / 2 / 2;
      display: none;
      animation: fadeIn 0.5s ease-in-out;
    }

    & .descricao_diferencial{
      grid-area: 1 / 1 / 2 / 2;
      align-self: baseline;
      font-family: "NeueKabel";
      font-weight: 300;
      margin-bottom: 3%;
      & .titulo{
        font-family: "Novecento Sans";
        font-weight: 200;
        font-size: clamp(1.6rem,3.333vw,6rem);
        letter-spacing: 3px;
        
      }

    }
    & .texto_diferencial{
      font-size: clamp(1rem,1.667vw,3rem);
      font-weight: 100;
      font-family: "NeueKabel Light";
      padding-right: 3%;
    }
    & .btn_reuniao{
      font-size:clamp(1rem,1.667vw,3rem);
    }

  & .espaços_diferencial{
    grid-area: 1 / 2 / 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 17px;
    grid-row-gap: 17px;

    & .A{
      grid-area: 1 / 1 / 2 / 2;
    }
    & .B{
      grid-area: 1 / 2 / 2 / 3;
    }    
    & .C{
      grid-area: 2 / 1 / 3 / 2;
      z-index: 2;
    }
    & .D{
      grid-area: 2 / 2 / 3 / 3;
      z-index: 2;
    }    
    & .container{
      background-color: var(--bege);
      border-radius: 25px;
      display: grid;
      cursor: pointer;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 17px;
      padding:10%;

      & .texto_container{
        grid-area: 1 / 1 / 2 / 2;
        color:var(--azul_escuro);
        font-family: "TT Chocolate Trial Regular";
        font-size: clamp(1rem,2.25vw,3rem);
      }
      & .imagem_container{
        grid-area: 2 / 1 / 3 / 2;
        align-content: end;
      }
        & .icon-active{
        display: none;
      }
      & .icon-default{
        display: block;
      }
    }
    & .container.active{
      background-color: var(--azul_escuro);
      
      & .texto_container{
        color: var(--bege);
      }
      & .icon-active{
        display: block;
      }
      & .icon-default{
        display: none;
      }
    }

  }
}

/*.corpo_processos{
  
  margin-top: 12vh;

  & .titulo_processos{
    color:var(--cor_texto);
    font-family: "Novecento Sans";
    font-size: 3rem;
  }

  & .caixa{
      background-color: var(--azul_escuro);
      width: fit-content;
      padding:1% 5% 1% 5%;
      border-radius: 15px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      position: absolute;
    }

  & .caixas_cima{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: 3% 0 5% 0;

    

    & .conversar_especialista{
      grid-area: 1 / 3 / 2 / 5;
      left: 30%;
      
    }
    & .acompanhamento_processo{
      grid-area: 1 / 5 / 2 / 7;
      left:64%;
    }
  }
  & .containerSeta{
    height:50px;
    width:100%;
  }
  & .seta_azul{
    width: 95vw;
    position: absolute;
    left: 0;
    display: block;
  }

  
  & .caixas_baixo{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: 3% 0 0 0;

    & .marque_diagnostico{
      grid-area: 1 / 1 / 2 / 3;
      background-color: var(--fundo_btn);
      color:var(--cor_btn);
      cursor: pointer;
      position:absolute;
      max-width: fit-content;
      left: 15%;

    }
    & .juridica_personalizada{
      grid-area: 1 / 3 / 2 / 5;
      left:46.5%;
    }
  }
} */

.titulo_processos{
  color:var(--cor_texto);
  font-family: "Novecento Sans";
  font-size: clamp(1.3rem,3.333vw,6rem);
  font-weight: 100;
  letter-spacing: 4px;
  margin-bottom: 4%;
}

.timeline{
  --altura:350px;
  

  position: relative;
  width: 100%;
  height: var(--altura);


  & .marque_diagnostico{
    background-color: var(--azulClaro-bege) !important;
    color:var(--bege-azulEscuro) !important;
    transition: max-height 0.2s ease-in-out !important;
    justify-content: flex-start !important;
    height: 100%;
  }
  &.marque_diagnostico.aberta{
    justify-content: flex-start !important;
  }

  & .bola{
      height: 15px;
      width: 15px;
      border-radius: 100%;
      background-color: var(--azulEscuro-bege);
      z-index: 2;
      position: absolute;
      left:43%
    }


  & ol{
    display: flex;
    list-style-type: none;
    & li{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      position: relative;
      width: 100%;
      height:var(--altura);
    }
  }

  & .caixa-timeline{
    background-color:#092040 ;
    color:var(--bege);
    max-width: 320px;
    border-radius: 10px;
    padding: 25px 20px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    overflow:hidden;
    margin-right: 10%;

    max-height: fit-content;

    transition: max-height 0.4s ease-in-out;

    & h2{
      font-size: clamp(0.5rem,1.267vw,1.5rem);

    }

    & p{
      transition: max-height 0.4s ease-in-out;
      max-height: 0;
      transform: translateY(100px);
      transition: transform 0.4s ease-in-out;
      font-size: clamp(0.4rem,1.1vw,1.4rem);
    }

    

  }

  .caixa-timeline.aberta {
    max-height: 300px;
    & p{
      max-height: 300px;
      transform: translateY(0);
      margin-top: 3%;
      text-align: left;
    }
}

}

.timeline ol li:nth-child(even) {
  justify-content:flex-end;
  transform: translateY(-190px);
  & .bola{
    top:103%
  }
}
.timeline ol li:nth-child(odd) {
  transform: translateY(200px);
  & .bola{
    bottom:104%
  }
}

.timeline::after{
  content:'';
  position:absolute;
  height: 5px;
  width: 100%;
  background-color: var(--azulEscuro-bege);
  top: 50%;
}

.timeline::before{
  content: '';
  position: absolute;
  right: 0;
  top: 0.45%;
  align-self: anchor-center;
  transform: rotate(45deg);
  width: 2vw;
  height: 2vw;
  background-color: transparent;
  border-top: 6px solid var(--azulEscuro-bege);
  border-right: 6px solid var(--azulEscuro-bege);
  border-radius: 5px;
  margin-top: 3px;
}

@media(max-width:768px){
  .timeline ol li:nth-child(even) {
  justify-content:flex-end;
  transform: translateY(-290px);
  z-index: 0;

}
.timeline ol li:nth-child(odd) {
  transform: translateY(90px);
  & .bola{
    bottom:101.4%
  }
}
.timeline ol li:last-child{
  display: block !important;
}


.caixa-timeline{
  position: absolute;
  min-width: 120px;
  padding: 10px 5px !important;
}
}

.valores{
  display: none !important  ;
}

/* .timeline{
  display:flex;
  position: relative;
  height: 300px;
  gap:30px;

  

  & .container_timeline{
    position: relative;
    width: 350px;
    height: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    & .bola{
      height: 15px;
      width: 15px;
      border-radius: 100%;
      background-color: #092040;
      z-index: 2;
      position: absolute;
      left:45%;
    }
    & .text-box{
      margin: 5%;
      background-color: #092040;
      border-radius: 25px;
      padding: 7% 7%;
      font-weight: 100;
      font-family: "NeueKabel";
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

      & h2{
        font-size: 1rem;
      }
      & small{
        display: none;
      }
    }
    & .text-box.ativo{
      background-color: #000;

    }
  }
  
  & .baixo{
    top:50%;

    & .bola{
      top:-7.5px;
    }
  }
  & .cima{
    top:0;
    justify-content: end;

    & .bola{
      bottom:-7.5px;
    }
  }
  
}

.marque_diagnostico{
  background-color: #6385AB !important;
}

.timeline::after{
  content:'';
  position:absolute;
  height: 5px;
  width: 100%;
  background-color: #092040;
  top: 50%;
  margin-top: -3px;
}

.timeline::before{
  content: '';
  position: absolute;
  right: 0;
  align-self: center;
  transform: rotate(45deg);
  width: 2vw;
  height: 2vw;
  background-color: transparent;
  border-top: 6px solid #001f3f;
  border-right: 6px solid #001f3f;
  border-radius: 5px;
}

.container_teste{
  background-color: #1C1D26;
} */



.corpo_casosFrequentes{
  margin-top: 5%;

  & .titulo_casos{
    color:var(--cor_texto);
    font-family: "Novecento Sans";
    font-size: clamp(1.4rem, 3.333vw, 6rem);
    letter-spacing: 6px;
  }

  & .container_casos{
    display: grid;
    /*
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    */
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-top: 5%;
    

    & .casos{
      grid-area: 1 / 1 / 2 / 2;
      margin-left: 5%;
      display: grid;
      width: 120%;

      & ul{
        gap: 50px;
        display: flex;
        flex-direction: column;
      }
      & li{
        color:var(--cor_texto);
        list-style: circle;

        & h2{
          font-size: clamp(1.2rem, 1.6vw, 3rem);
          font-family: 'NeueKabel';
        }
        & p{
          font-size: clamp(1rem,1.4vw,2rem);
          font-family: 'NeueKabel';
        }
      }
    }
    & lado_direito {
      justify-items: center;
    }
    & .img_casos{
      /*grid-area: 1 / 2 / 2 / 3;*/
      border-radius: 25px;
      transform: scale(0.8);
      transform-origin: top right;
    }
  }
  
}

#casos_frequentes {
  
      & .btn_reuniao{
      /*align-self:flex-start;*/
      font-size: clamp(1.4rem, 1.833vw, 3rem);
      justify-self: center;
      padding: 2% 20%;
    }
}


.corpo_casosSucessos{
  margin-top: 6%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  
  & .img_sucesso{
    grid-area: 1 / 1 / 2 / 2;
    border-radius: 25px;
    transform: scale(0.8);
    transform-origin: top left;
  }
  & .sucessos{
    grid-area: 1 / 2 / 2 / 3;
    color:var(--cor_texto_2);
    text-align: center;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    transform: scale(0.8);
    transform-origin: top left;
    

    & .sucesso{
      font-size: clamp(6rem,10vw,18rem);
      font-family: "Novecento Sans";
      font-weight: 100;
      
    }
  }
}

.sucessos p{
  font-size: 1.4em;
  white-space: nowrap;
}

.sucessoMin{
  font-size: 0.6em;
}

.corpo_quemSomos{
  color: var(--cor_texto);
  font-family: "Novecento Sans";
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /*grid-template-rows: repeat(5, 1fr);*/
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  & .quemSomos1{
    grid-area: 1 / 1 / 3 / 2;
    font-size: clamp(3rem,4.167vw,7rem);
    align-self: end;
  }
  & .quemSomos2{
    grid-area: 1 / 2 / 3 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    & .wrapper{
      width: 40%;
      height: auto;
      margin-bottom: 5%;
    }
    & img{
      max-width: 100%;
      display: block;
    }

    & .texto_founder{
      font-family: "NeueKabel";
      font-size: 1.5rem;
      display: block;
    }
  }
  & .quemSomos3{
    /*grid-area: 3 / 1 / 6 / 2;*/
    grid-area: 1 / 1 / 2 / 2;
    margin-top: 6%;

    & .titulo_quemSomos{
      font-family: "Novecento Sans";
      font-size: clamp(1rem, 5.333vw, 3rem);
    }
    & p{
      margin-left:3%;
      margin-top:3%;
      font-size: clamp(1.2rem, 2vw, 2.5rem);
    }

    & .subtitulo{
      font-family: "Novecento Sans Light";
    }

    & .btn_reuniao{
      margin-left: 3%;
      margin-top: 5%;
      font-size: 1.4rem;
      padding: 2.3% 3% 2.3% 3%;

    }
  }
  & .quemSomos4{
    /*grid-area: 3 / 2 / 6 / 3;*/
    grid-area: 1 / 2 / 2 / 3;

    & .img_mobile {
      display: none;
    }
  }
}

.corpo_FAQ{
  color: var(--cor_texto);
  font-size: clamp(1rem,2vw,2.5rem);

  & .titulo_FAQ{
  font-family: "Novecento Sans";
  /*font-size: 3rem;*/
  font-size: clamp(1rem, 5.333vw, 3rem);
  font-weight: 100;
  letter-spacing: 4px;
  }

  & ul{
    margin-top: 5%;
    gap:25px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10%;
  }

  & .pergunta{
    display: flex;
    align-items: center;
    cursor: pointer;
    width: auto;
    margin-left: 5%;

    & img{
      margin-right: 3%;
      transition: transform 0.3s ease;
    }
  }
  & .resposta{
    margin-left: 10%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

}

#final{
  height: 595px;
  background-image: url(../images/pagina_principal/imagem_final.svg);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 17px;
  padding: 7% 0 7% 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  & .corpo_final{
    grid-area: 1 / 2 / 2 / 10;

    & h1{
      font-family: "TT Chocolate Trial Light";
      font-weight: 100;
      font-size: 3.2rem;
    }
    & .btn_reuniao{
      display: none;
      /*
      font-size: 2rem;
      padding: 15px 2% 15px 2%;
      margin-top:6%;
      margin-left: 3%;
      */
    }
  }
}

.popup.diagnostico{
  margin-top: 0;
}


.escuros{
  display: none;
}

@media (max-width: 768px) {


  .inicial {
  background-image: none;
  display: flex;
  flex-direction: column;
  padding: 20px;
  padding-bottom: 40px;
  max-height: 100vh;
  border-radius: 0 0 10px 10px;
  }

  .texto_inicial { 
  grid-area: 2 / 2 / 10 / 10;
    
    & h1 {
      font-family: "Novecento Sans";
      margin-bottom: 3%;
      margin-top: 7.5%;
    }

    & .corpo_inicial{
      margin-left: 0%;
      justify-content: space-evenly;

      & h2 {
        width: 95%;
        margin-top: 5%;
        margin-left: 0;

        & br {
          display: none;
        }
      }
 

      & .valores {
        display: none;
      }
    }

    & .btn_reuniao {
    width: 100%;
    justify-items: center;
    padding: 4%;
    border-radius: 10px;
    align-self: start;
    }
  }

  .btn_reuniao {
    width: 100%;
    justify-items: center;
    margin-top: 7.5%;
  }

  .imagem_inicial {
    width: 95%;
    height: 100%;
    background-image: url(/images/pagina_principal/Q_inicial.png);
    background-position-y: 10%;
    margin-top: 15%;
    align-self: center;
    background-size: cover;
  }

  .titulo_serviços {
    display: none;
  }

  .serviços {
    margin-top: 10%;
  }

  .acoes_desktop {
    display: none;
  }

  .acoes_mobile{
    display: block;
  }

  .direito_imobiliario, .direito_civil, .direito_trabalhista, .direito_consumidor {
    border-radius: 10px !important;
    padding-bottom: 5% !important;
  }
  
  .direito_bancario, .acoes_civis {
    border-radius: 10px;
    display: flex;
    justify-content: center;
  }

  .direito1{
    text-align: center;
  }

  .direito2 {
    grid-area: 2 / 1 / 3 / 5 !important;
    display: none;
  }

  .direito3 {
    display: none;
  }

  .serviços {
    height: 40vh;

    
    & .direito1 {
      grid-area: 1 / 1 / 2 / 5 !important;
    }

    & direito2 {
      grid-area: 2 / 1 / 3 / 5 !important;
    }
  }



  .direito_imobiliario, .direito_civil, .direito_trabalhista, .direito_consumidor {
    gap: 0px !important;
    display: flex !important;
    justify-content: center;
  }

.direito1{
  align-self: center;
  justify-self: center;
}

.acoes_civis .direito1{
  & br {
    display: none;
  }
}
/*
.direito_imobiliario .direito1{
  margin-top: 30%;
}

.direito_civil .direito1{
  margin-top: 22%;
  
}

.direito_trabalhista .direito1{
  margin-top: 15%;
}

.direito_consumidor .direito1{
  margin-top: 30%;
}

.direito_bancario .direito1{
  margin-top: 35%;
}

.acoes_civis .direito1{
  margin-top: 3%;
}
*/

  .container_diferencial{
    margin-top: 5%;
  }

  #FAQ{
    padding-top: 35%;
  }

  .btn_mobile {
    display: block;
    width: 100%;
    justify-items: center;
    padding: 4%;
    border-radius: 10px;
    margin-top: 7%;
  }



  /* teste grid serviços
  .serviços {
    grid-template-columns: repeat(5, 1fr);
  }

  .direito_imobiliario {
    grid-area: 1 / 1 / 2 / 3;
  }

  .direito_civil {
    grid-area: 1 / 3 / 2 / 6;
  }

 .direito_trabalhista {
    grid-area: 2 / 1 / 3 / 4;
  }

  .direito_consumidor {
    grid-area: 2 / 4 / 3 / 6;
  }

  .direito_bancario {
    grid-area: 3 / 1 / 3 / 3;
}

.acoes_civis {
    grid-area: 3 / 3 / 4 / 6;
}
*/

.titulo_processos {
  display: none;
}

  .timeline {
    display: none;
    gap: 0px;
    height: 150px;

    & .text-box {
      margin: 0% !important;
      border-radius: 10px !important;
      text-align: left !important;

      & h2 {
        font-size: 0.5rem !important;
      }
    }

    & .baixo {
      justify-content: center;
    }

    & .cima {
      justify-content: center;
    }

    .bola{
      left: 145%;
      width: 13px;
      height: 13px;

      margin-right: 0;
    }

  }
  .timeline::before{
    display: none;
  }

  .timeline ol{
    gap: 2em;
  }


  #trasnp .texto_container{
    margin-left: -3%;
  }

  .corpo_diferencial {
    margin: 7% 0px 10% 0px;
  }
  .container_diferencial {
    display: flex;
    flex-direction: column;
    padding: 8%;

    & .container {
      grid-row-gap: 0px !important;
    }

    & .texto_container {
      font-family: "Novecento Sans" !important;
    }

     & .btn_reuniao {
      display: none !important;
     }
  }

  .container_casos {
    display: flex !important;
    flex-direction: column;

    .img_casos {
      display: none;
    }

    .casos {
      width: 95% !important;
      margin-left: 10%;
      margin-bottom: 6%;

      & ul {
        gap: 30px !important;
      }
    }
  }

  .corpo_casosFrequentes {
      & .btn_reuniao {
        width: 100%;
        justify-items: center;
        padding: 4% !important;
        border-radius: 10px !important;
        display: block !important;
        align-self: center;
        font-family: 'NeueKabel';
        margin-left: 0%;
        text-align: center;
      }
  }

  .corpo_casosSucessos {
    height: 35vh;
    display: flex !important;
    /*justify-content: flex-end;*/
    align-items: center;
    align-content: center;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    margin-right: -3%;
  }


  .img_sucesso {
    width: 22vh;
    transform: scale(1) !important;
    /*transform: translate(-10em, -5em) !important;*/
    margin-top: 5%;
  }

  .sucessos {
    transform: scale(0.4) !important;
    /*margin-top: 12em;*/
    transform-origin: right !important;
    margin-right: 5%;

    & p {
      font-size: 1.7em;
    }
  }


  .texto_diferencial {
    padding-bottom: 5%;
  }
  
  .corpo_quemSomos {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 70vh;

      & .quemSomos3 {
        width: 100%;
        & .btn_reuniao {
            width: 100%;
            justify-items: center;
            padding: 4%;
            border-radius: 10px;
            font-family: 'NeueKabel';
            margin-left: 0%;
            text-align: center;
        }
      }
}
  .quemSomos4 img {
    scale: 1;
    /*margin-top: -8em;*/
  }

  .quemSomos4 {
    & .img_desktop {
      display: none;
    }
    & .img_mobile {
      display: block !important;
      width: 120%;
      margin-left: -10%;
    }
  }

  .corpo_FAQ .pergunta img {
    width: 2%;
  }

  .corpo_FAQ ul {
    gap: 10px;
  }

  .corpo_final h1 {
    font-size: 1em;
  }
  
  #final {
    height: 140px;
    background-size: cover;
    padding: 6% 0%;
    margin: -1% 0%;
    border-radius: 10px 10px 0px 0px;

    & .corpo_final {
      & h1 {
        font-size: 1.1rem;

      }

      & .btn_reuniao {
        font-size: 0.8rem;
        padding: 2% 3%;
        margin-top: 2%;
        margin-left: 0%;
        width: fit-content;
        border-radius: 10px;
      }
      
    }
  }

}