@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 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: "Novecento Sans";
  src: url(/fonts/Novecento_Sans/Novecentosanswide-Normal.otf);
}
.btn_reuniao{
    background-color: var(--azul_claro);
    color: var(--bege);
    height: fit-content;
    width: fit-content;
    border-radius: 10px;
    align-content: center;
    padding: 7px 5% 7px 5%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    
    margin: 5% 0;
    font-family: 'NeueKabel';
  }



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

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

img{
  max-width: 100%;
  height: auto;
}

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

  --brancoAzulado-fundo:#F7F9FA;
  --azulClaro-bege:#6385AB;
  --bege-azulEscuro:#FEF7E5;
  --azulEscuro-brancoAzulado:#092040;

  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark-mode{
  --brancoAzulado-fundo:#1C1D26;
  --azulClaro-bege:#FEF7E5;
  --bege-azulEscuro:#092040;
  --azulEscuro-brancoAzulado:#F7F9FA;
}

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

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


.Inicio{
    display: flex;
    flex-direction: column;
    padding: 0 7% 0 7%;
}

.Inicio h1{
    font-family: 'Novecento Sans';
    color: var(--azulEscuro-brancoAzulado);
    font-size: 4em;
    font-weight: 400;
    margin-top: 4%;
}

.cardTrabalhista{
    display: flex;
    flex-direction: row;
    background-image: url(/images/areas_atuacao/Trabalhista.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
    margin-top: 10%;
    border-radius: 25px;  
    padding-bottom:10% ;
}

.conteudoCard{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* align-items: center; */
    color: var(--branco_azulado);
    padding-left: 5%;
}

.conteudoCard h3{
    font-size: clamp(2rem, 3.333vw, 5rem);
    font-family: 'Novecento Sans';
    font-weight: 400;
    margin-top: 10%;
    width: 100%;
}

.conteudoCard p{
    font-family: 'NeueKabel';
    font-size: clamp(1rem, 1.917vw, 3rem);
    font-weight: 500;
    margin-top: 2%;
    width: 100%; 
}

.CTA{
    background-color: var(--azulClaro-bege);
    color:var(--bege-azulEscuro);
    border: none;
    font-family: 'NeueKabel';
    padding: 0.6em 0.6em;
    border-radius: 25px;
    font-size: 1.7em;
    width: fit-content;
    margin-top: 5%;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.CTA:hover{
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.cardConsumidor{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--azulEscuro-brancoAzulado);
    margin-top: 10%;
}

.cardConsumidor .CTA{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2% 3%;
    width: fit-content;
}

.text{
    display: flex;
    flex-direction: column;
    width: 60%;
}

.text h3{
    font-size: 3em;
    font-family: 'Novecento Sans';
    font-weight: 400;
    width: 100%;
}

.text p{
    font-family: 'NeueKabel Light';
    font-size: clamp(1.5rem,1.833vw, 3rem);
    width: 100%;
    font-weight: 100;
    margin-top: 7.5%;
}

.text a{
    margin-left: -1.2%;
    width: 60%;
}


.cardCivil{
    display: flex;
    flex-direction: row;
    background-image: url(/images/areas_atuacao/Civil.svg);
    background-size: cover;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-position: center;   
    margin-top: 10%;
    padding-bottom: 10%;
}

.Bancario{
  background-image: url(/images/areas_atuacao/Bancario.svg) !important;

  & h3{
    color: var(--branco_azulado);
  }
  & p{
    color: var(--branco_azulado);
  }
}

.container_footer{
  margin-top: 5%;
}

.subtitulo-inicial{
  display: none;
  color: #092040;
}

.CIVIL{
  display: none;
}
.TRAB{
    display: none;
  }
.BANCO {
  display: none;
}

@media(max-width:976px){
  body{
    background-color: #F5F5F9;
  }

  .titulo-inicial{
    font-size: clamp(1.7rem,6.333vw,4rem) !important;
  }

  .subtitulo-inicial{
    display: block;
  }

  .cardConsumidor{
    background-color: #fff;
    flex-direction: column-reverse;
    padding: 3%;
    border-radius: 15px;
    & .img{
      width: 100%;
    }

    & img{
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: center;
      border-radius: 10px;
      width: 100%;
    }
  }
  .text{
    width: 100%;
    display: block;

    & h3{
      font-size: clamp(1rem,5.333vw,3rem);
    }
    & p{
      margin-top: 1%;
      font-size: clamp(1rem,3vw,3rem);
    }
  }
  br{
    display: none;
  }
  .CTA{
    font-size:clamp(1.3rem,4vw,5rem);
    justify-self: center;
    padding: 2% 10% !important;
    border-radius: 10px;
  }
  .CIVIL{
    display: flex;
  }
  .cardCivil{
    display: none;
  }
  .TRAB{
    display: flex;
  }
  .cardTrabalhista{
    display: none;
  }
  .BANCO{
    display: flex;
  }
}