:root {
    --primaria: #576D58;
    --secundaria: #FFBB00;
    --background-cinza: #F7F7F7;
    --background-branco: #FFFFFF;
    --nome-sessao: #6C6C6C;
  
    --texto-sessao: #8E8E8E;
    --texto-botao: #000000;
    --texto-contato: #f2f2f2;
  }
  body, 
  html {
      margin: 0px;
      padding: 0px;
      width: auto;
      height: auto;
      font-family: Arial, Helvetica;
      font-size: 1rem;
      font-weight: normal;
      color: var(--texto-sessao);
  }
  .container {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    margin: auto;
    padding: 20px;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
  }
  .col {
    flex: 1 0 0%;
  }
  a {
    text-decoration: none;
    color: var(--texto-botao);
    background-color: var(--secundaria);
  }
  a:hover {
    background-color: var(--primaria);
    color: var(--secundaria);
  }

  .titulo_sessao {
    font-size: 1rem;
    line-height: 15px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    text-transform: uppercase;
    margin: 10px 0px 30px 0px;
    padding-left: 10px;
    border-left: 2px solid var(--secundaria);
    display: block;
  }
  h1 {
    font-size: 2.3rem;
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--nome-sessao);
    line-height: 26px;
    padding-left: 20px;
    margin: 30px 0px 50px 0px;
  }
  .h1-primario {
    border-left: 8px solid var(--secundaria);
  }
  h2 {
    font-size: 2.2rem;
    font-weight: normal;
    font-weight: bold;
    color: var(--primaria);
    padding: 0px;
    margin: 0px 0px 20px 0px;
  }
  h3 {
    font-size: 1.2rem;
    font-weight: normal;
    font-weight: bold;
    color: var(--primaria);
    padding: 0px;
    margin: 20px 0px 40px 0px;
  }
  p, ul li {
    font-size: 1.1rem;
    font-weight: normal;
    line-height: 24px;
    margin: 0px;
  }
  ul {
    margin-left: 20px;
    padding:0px;
    list-style: none; 
  }
  ul li {
    padding: 3px 0px 3px 0px;
  }
  ul li::before {
    content: "\2022";
    color: var(--secundaria); 
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1.1em;
  }
  .btn {
    padding: 10px 20px 10px 20px;
    font-size: 0.8rem;
  }
  .btng {
    padding: 20px 30px 20px 30px;
    font-size: 1.3rem;
  }
  

  
  #nav {
    border-bottom: 2px solid var(--secundaria);
  }
  #nav .row {
    padding-bottom: 0px;
  }
  #nav .nav-brand {
    max-width: 30%;
    float: left;
    position: relative;
  }
  #nav .nav-brand .logo { 
    margin-top: 3px;
    max-width: 180px;
    height: auto;
  }
  #nav .nav-menu {
    width: 70%;
    float: right;
    margin-top: 12px;
  }
  #nav .btn-menu {
    float: right;
    display: none;
    margin-top: 12px;
  }
  #nav .nav-itens {
    float: right;
    width: 100%;
  }
  #nav .nav-itens ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: right;
  }
  #nav ul li {
    float: left;
    margin: 0px;
    padding: 0px;
  }
  #nav ul li::before {
    content: "";
    display: none;
  }
  #nav a {
    background-color: white;
    color: var(--primaria);
    display: block;
    padding: 3px 15px 3px 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }
  #nav a:hover { 
    color: black;
    background-color: var(--secundaria);
  }
  #nav .nav-brand a {
    padding: 0px 0px 0px 0px;
  }
  #nav .nav-brand a:hover {
    background-color: white; 
  }
  
  
  
  
  
  
  
  
  
  #content {
    background-color: var(--background-cinza);
  }
  #content .col-1 {
    flex: 0 0 auto;
    width: 70%;
    text-align: left;
    padding: 0px 60px 0px 0px;
  }
  #content .col-2 {
    flex: 0 0 auto;
    width: 30%;
  }
  #content .col-3 {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    padding: 50px
  }
  #content .quadro {
      text-align: center;
      background-color: var(--primaria);
      padding: 50px;
  }
  #content .icon {
    width: 120px;
    height: auto;
  }
  #content .esocial p {
    margin-bottom: 20px;
  }
  
  
  
#solucoes .row {
    margin-bottom: 40px;
}
#solucoes .row-cols > * {
  flex: 0 0 auto;
  width: 20%;
}
#solucoes .col {
  border: 1px solid #E5E4E4;
  padding: 50px;
  text-align: center;
}
#solucoes .icon {
  width: 60px;
  height: 60px;
}



  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  #contato {
    background-color: var(--primaria);
  }
  #contato h1 {
    color: var(--texto-contato);
  }
  #contato p {
    color: var(--texto-contato);
    margin: 0px;
  }
  #contato h3 { 
    color: var(--secundaria);
    line-height: 22px;
    margin: 0px 0px 20px 0px;
  }
  #contato .col-1 {
    flex: 0 0 auto;
    width: 50%;
    margin: 0px;
    padding: 0px 60px 0px 0px;
    border-right: 1px solid #738674;
  }
  #contato .col-2 {
    padding: 0px 0px 0px 120px;
    flex: 0 0 auto;
    width: 50%;
  }
  #contato img {
    width: 30px;
    height: auto;
    margin-right: 10px;
  }
  #contato .col-3 {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    margin: 50px 0px 40px 0px;
  }
  #contato a { 
    background-color: var(--primaria);
    color: #f2f2f2;
  }
  #contato a:hover { 
    background-color: var(--primaria);
    color: var(--secundaria);
  }
  #contato .ico-whatsapp {
    height: 20px; 
    width: 20px; 
    margin-bottom: -3px;
  }

/* 5 solucoes por linha (inclui Pericias Judiciais) */
#solucoes .row-cols > * {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#solucoes .row-cols .btn {
    display: inline-block;
    white-space: nowrap;
    margin-top: auto;
}