@font-face {
    font-family: fontProjeto;
    src: url(../font/CodecPro-Regular.ttf) format("truetype");
    }
  @font-face {
    font-family: fontExtraBold;
    src: url(../font/CodecCold-ExtraBold.ttf) format("truetype");
    }
    @font-face {
        font-family: fontCodecBold;
        src: url(../font/codec-pro-bold.ttf) format("truetype");
      }
  @font-face {
    font-family: fontCodecRegular;
    src: url(../font/codec-pro-light.ttf) format("truetype");
    }
:root {
        --fontProjeto: fontProjeto;
        --fontExtraBold: fontExtraBold;
        --fontCodecBold: fontCodecBold;
        --fontCodecRegular: fontCodecRegular;
        --fontSizeDiv: clamp(1.5em, 2vw, 30px);
        --fontSizeTitulos: clamp(28px, 4.5vw, 32px);
        --fontSizePadrao: clamp(19px, 18px, 2vw);
}
.displayNone {
    display: none !important;
}
.button-container {
    grid-area: button !important; 
    text-align: center;
    margin-top: 20px;
}
.retangular-button {
    background-color: #CCCCCC;
    color: #000000;
    border: 2px solid #000000;
    padding: 15px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: block;
    font-size: 18px;
    font-family: var(--fontExtraBold);
}

.retangular-button:hover {
    background-color: #999999;
    color: #FFFFFF;
}



section.historia {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 123px;
    padding: 2vw 6vw 2vw 6vw;
}

.historia > div:nth-child(2) {
    display: block;
}


section.historia>div:nth-of-type(n + 2) {
    padding-top: 0;
    font-size: clamp(19px, 5vw, 18px);
    font-family: var(--fontCodecRegular);
    font-weight: 300;
}

section.historia>div.arrowDown {
    grid-area: seta;
    padding: unset;
    height: 50px;
    margin-top: 35px;
    display: flex;
    justify-content: center;
}

section.historia>div.arrowDown>img {
    cursor: pointer;
    height: 100%;
}

section#ettFirst,
section#shift,
section#recruit {
    min-height: 35vh;
    padding: 5vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    color: white;
    font-size: clamp(16px, 5vw, 18px);
}

section#ettFirst>div>div:nth-of-type(1),
section#shift>div>div:nth-of-type(1),
section#recruit>div>div:nth-of-type(1) {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    height: 75px;
    margin-bottom: 3vh;
    opacity: 0;
}

section#ettFirst div>div:nth-of-type(2),
section#shift div>div:nth-of-type(2),
section#recruit div>div:nth-of-type(2) {
    min-height: 80px;
    width: clamp(30vw, 365px, 100%);
    margin-bottom: 1.5vh;
}

section#ettFirst ul,
section#shift ul,
section#recruit ul {
    font-weight: bold;
    list-style: none;
}

section#ettFirst ul li,
section#shift ul li,
section#recruit ul li {
    min-height: 30px;
}

section#ettFirst ul li:before,
section#shift ul li:before,
section#recruit ul li:before {
    content: "";
    display: inline-block;
    background-image: url(../img/check.png);
    height: 17px;
    width: 25px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left 4px;
}

section#ettFirst {
    background-image: url(../img/empresa_3.webp);
}

section#ettFirst>div:nth-of-type(1) {
    width: clamp(30vw, 365px, 100%);
}

section#ettFirst>div>div:nth-of-type(1) {
    background-image: url(../img/logo_ett_new.png);
}

section#shift {
    background-image: url(../img/empresa_4.webp);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    --larguraShift: 320px;
}

section#shift>div>div:nth-of-type(1) {
    background-image: url(../img/logo_shift_new.png);
    min-width: var(--larguraShift);
}

section#shift>div>div:nth-of-type(2) {
    width: var(--larguraShift);
}

section#recruit {
    background-image: url(../img/empresa_5.webp);
}

section#recruit>div>div:nth-of-type(1) {
    background-image: url(../img/logo_connecting_new.png);
}

section.empresas {
    display: grid;
    grid-template-columns: repeat(3, minmax(450px, 1fr));
    grid-template-columns: repeat(3, 1fr);
}

section.empresas>div {
   /* height: clamp(390px, 390px, 390px); */
    background-size: cover;
    overflow: hidden;
    padding: 19px 15px;
}

section.empresas div.logo {
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

section.empresas div[data-ett1] {
    background-image: url(../new_img/ETT\ TRADUZIDA.png);
    background-repeat: no-repeat;
}

section.empresas div[data-ett] {
    background-image: url(../new_img/GRUPO-ETT.webp);
    background-repeat: no-repeat;
}

section.empresas div[data-shift1] {
    background-image: url(../new_img/SHIFT\ TRADUZIDA.png);
    background-repeat: no-repeat;
}

section.empresas div[data-shift1] div.button>button:hover{
background-color:#bd080f
}

section.empresas div[data-shift1] div.button>button {
    background-color: rgb(145, 25, 30, 255);
}
section.empresas div[data-connecting1] {
    background-image: url(../new_img/CONNECTING\ TRADUZIDA.png);
}

section.empresas div[data-connecting1] div.button>button:hover {
    background-color: #fbb712;

}


section.empresas div[data-connecting1] div.button>button {
    background-color: #ffc537;
}

#surgi > button {
    margin-top: 40%;
}

section.empresas>div>div.conteudo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* transform: translateY(280px); */
    /* -webkit-transform: translateY(280px); */
    -moz-transform: translateY(280px);
    -ms-transform: translateY(280px);
    -o-transform: translateY(280px);
   /* transition: transform 550ms; */
    /* -webkit-transition: transform 550ms; */
    -moz-transition: transform 550ms;
    -ms-transition: transform 550ms;
    -o-transition: transform 550ms;
}

section.empresas div.texto {
    color: black;
    font-family: var(--fontExtraBold);
    max-width: 330px;
}

section.empresas div.itens {
    color: black;
    font-family: var(--fontExtraBold);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

section.empresas div.itens>span::before {
    content: '\2713';
    font-size: 1.1rem;
    margin-right: 5px;
}

section.empresas div.button>button:hover{
 background-color: #0056d7;
}

section.empresas div.button>button {
    color: white;
    padding: 20px 20px;
    letter-spacing: 1.2px;
    font-size: 1.2rem;
    cursor: pointer;
    background-color: #032e6e;
    border: 2px solid white;
}

section.empresas div.button>button:active {
    transform: translate(1px, 1px);
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
}

section.empresas .parceiros,
section.empresas .certificados {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background-color: #000000d4;
    color: whitesmoke;
    padding: 15px;
    transition: transform 350ms;
    -webkit-transition: transform 350ms;
    -moz-transition: transform 350ms;
    -ms-transition: transform 350ms;
    -o-transition: transform 350ms;
    transform: translateY(40vh);
    -webkit-transform: translateY(40vh);
    -moz-transform: translateY(40vh);
    -ms-transform: translateY(40vh);
    -o-transform: translateY(40vh);
}

section.empresas .certificados .file_pdf {
    background-image: url(https://rio123.io/img/icon-file-pdf.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 50px;
    min-width: 50px;
    cursor: pointer;
}

section.empresas .parceiros div[data-parceiro]>div:nth-of-type(1) {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 50px;
    min-width: 50px;
    cursor: pointer;
}

section.empresas .parceiros div[data-parceiro="leader"]>div:nth-of-type(1) {
    background-image: url(https://leaderetalent.com.br/images/icon.png);
}

section.empresas .parceiros div[data-parceiro="rio"]>div:nth-of-type(1) {
    background-image: url(https://rio123.io/img/logos/new_logo_black.png);
    background-size: 60px;
    filter: invert(1);
    -webkit-filter: invert(1);
}


section.empresas .certificados>.close,
section.empresas .parceiros>.close {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -10px;
    top: -20px;
    color: white;
    background: #3c3c3c;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    cursor: pointer;
}

section.empresas .certificados.show,
section.empresas .parceiros.show {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

section.empresas div[data-ett] div.button>button:hover {
    background-color:#05439f;
}

section.empresas div[data-ett] div.button>button {
    background-color: #032e6e;
}

section.empresas div[data-connecting] div.button>button:hover{
 background-color: #ffb500;
}

section.empresas div[data-connecting] div.button>button {
    background-color: #f3bc34;
}

section.empresas div[data-shift] div.button>button:hover {
  	background-color: rgb(193 14 22)
}

section.empresas div[data-shift] div.button>button {
    background-color: rgb(145,25,30,255);
    margin-top: 150px;
}

section.empresas>div:hover>div.conteudo {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
}

section.empresas div[data-ett] div.logo {
    background-image: url(../new_img/ETT\ LOGO\ SEM\ FUNDO.png);
}

section.empresas div[data-shift] {
    background-image: url(../new_img/GRUPO-SHIFT.webp);

    background-repeat: no-repeat;
}

section.empresas div[data-shift] div.logo {
    background-image: url(../new_img/Shift\ LOGO\ SEM\ FUNDO.png);
}

section.empresas div[data-connecting] {
    background-image: url(../new_img/GRUPO-CONNECTING.webp);
}

section.empresas div[data-connecting] div.logo {
    background-image: url(../new_img/First\ Connecting\ LOGO\ SEM\ FUNDO.png);
}

section#valores {
    background-image: url(../img_menor/PÁGINA\ O\ GRUPO\ 5.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    min-height: 35vh;
    padding: 5vw;
    color: white;
    font-family: var(--fontExtraBold);
}

section#valores>div:nth-of-type(1) {
    font-size: clamp(22px, 10vw, 28px);
    text-align: center;
    min-height: 55px;
    margin-bottom: -5vh;
}

section#valores>div:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 6vw;
    row-gap: 3vh;
    align-items: stretch;
}

section#valores>div:nth-of-type(2)>div {
    max-width: 225px;
    text-align: center;
    border: 3px solid rgb(250,180,43,255);
    padding: 15px;
    opacity: 0;
    position: relative;
}

section#valores>div:nth-of-type(2)>div>div:first-of-type {
    font-size: clamp(18px, 10vw, 20px);
    min-height: 63px;
    line-height: 25px;
}

section#valores>div:nth-of-type(2)>div>div:last-of-type {
    font-family: var(--fontCodecRegular);
    /* font-size: clamp(19px, 18px, 2vw); */
    max-width: 550px;
    line-height: 1.3;
}
section#valores>div>div>div>.titulo {
    position: relative;
}

section#valores>div>div>div>.titulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px; /* Ajuste a posição vertical conforme necessário */
    width: 100%; /* Ajuste o tamanho do traço */
    height: 1px; /* Ajuste a espessura do traço */
    background-color: #FAB42B; /* Cor do traço */
}
section#consultores {
    min-height: 35vh;
    padding: 6vw;
}

section#consultores>div:nth-of-type(1) {
    font-size: clamp(16px, 16vw, 24px);
    text-align: center;
    min-height: 25px;
    /* margin-bottom: 3vh; */
    font-family: var(--fontExtraBold);
}

section#consultores>div:nth-of-type(2) {
    font-family: var(--fontExtraBold);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 3vw;
    row-gap: 3vh;
    align-items: stretch;
}

section#consultores > div:nth-of-type(2) > div {
    background-repeat: no-repeat;
    background-size: cover; /* Ajuste para 'cover' para cobrir o quadrado */
    background-position: center; /* Centraliza a imagem */
    --larguraConsultor: 135px;
    width: var(--larguraConsultor);
    max-width: var(--larguraConsultor);
    height: calc(var(--larguraConsultor) * 1.3);
    padding: 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


section#consultores>div:nth-of-type(2)>div:nth-of-type(1) {
    background-image: url(../img_menor/ÁREAS\ DE\ ATUAÇÃO.png);
    /*background-image: url(/img/consulores_1.webp); */
}

section#consultores>div:nth-of-type(2)>div:nth-of-type(2) {
    background-image: url(../img_menor/ÁREAS\ DE\ ATUAÇÃO\ 2.png);
    /*background-image: url(/img/consulores_2.webp); */
}

section#consultores>div:nth-of-type(2)>div:nth-of-type(3) {
    background-image: url(../img_menor/ÁREAS\ DE\ ATUAÇÃO\ 3.png);
    /* background-image: url(/img/consulores_3.webp); */
}

section#consultores>div:nth-of-type(2)>div:nth-of-type(4) {
    background-image: url(../img_menor/ÁREAS\ DE\ ATUAÇÃO\ 4.png);
    /* background-image: url(/img/consulores_4.webp); */
}

section#consultores>div:nth-of-type(2)>div:nth-of-type(5) {
    background-image: url(../img_menor/ÁREAS\ DE\ ATUAÇÃO\ 5.png);
   /* background-image: url(/img/consulores_5.webp); */
}
section#consultores>div:nth-of-type(2)>div:nth-of-type(1),
section#consultores>div:nth-of-type(2)>div:nth-of-type(2),
section#consultores>div:nth-of-type(2)>div:nth-of-type(3),
section#consultores>div:nth-of-type(2)>div:nth-of-type(4),
section#consultores>div:nth-of-type(2)>div:nth-of-type(5) {
    background-size: cover;
}
#feedback {
    background-color: #333; /* Cinza mais forte */
    color: #ffffff; /* Cor do texto branco */
    padding: 50px 0;
}
.containerBalao {
    max-width: 1000px;
    margin: 0 auto;
}
.balao {
    background-color: #fff;
    color: #333; /* Cor do texto nos balões */
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 60px;
   font-weight:700;
    text-align: left;
    position: relative;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    font-family: var(--fontExtraBold);
    box-sizing: border-box; /* Faz com que o padding seja incluído no tamanho total do balão */
    flex: 1 0 30%; /* Cresce para preencher o espaço, não encolhe, base de 30% */
}
.baloes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
}
.balao::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 15px 0;
    border-color: #fff transparent transparent;
}
div.itens span {
    font-family: var(--fontExtraBold);
}
#move-down {
    margin-top: 130px; /* Ajuste este valor conforme necessário */
}
#valores > div > div > div:first-child {
    margin-bottom: -25px; /* Ajuste este valor para aproximar o texto do título */
}
#valores {
    margin-bottom: -55px;
}
.balao p {
    text-align: center;
    line-height: 1.3;
}
section#consultores>div:nth-of-type(2)>div {
    min-width: 170px;
}

@media screen and (max-width: 768px) {
  section#consultores {
  padding: 15vw;
  }
  
}

@media screen and (min-width: 1920px) {
      #inicial > section.historia.container > div:nth-child(2) {
        line-height: 1.7 !important;
    }
  
      section.historia>div:nth-of-type(n + 2) {
        font-size: clamp(26px, 5vw, 18px);
    }
  

  .historia {
        width: 100% !important;
    }
    .historia .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    section.historia {
        grid-template-columns: 1fr 2fr;
    }

  #inicial > section.historia.container {
      padding-right: 80px !important;
  }
 

    section.historia>div:nth-of-type(n + 2) { 
        font-size: clamp(27, 5vw, 18px);
    }
  }
@media screen and (min-width: 1800px) {
      #inicial > section.historia.container > div:nth-child(2) {
        line-height: 1.7 !important;
    }
  
      section.historia>div:nth-of-type(n + 2) {
        font-size: clamp(22px, 5vw, 18px);
    }
  
  .baloes {
        margin-left: 20px;
    }
  .historia {
        width: 100% !important;
    }
    .historia .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    section.historia {
        grid-template-columns: 1fr 2fr;
    }
 
  #inicial > section.historia.container {
      padding-right: 80px !important;
  }


    section.historia>div:nth-of-type(n + 2) { 
        font-size: clamp(27, 5vw, 18px);
    }
  }
@media only screen and (max-width: 900px) {
    section.empresas {
        display: flex;
        flex-direction: column;
    }

  

    section.empresas>div>div.conteudo {
        transform: translate(0);
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
    }
}

@media only screen and (max-width: 812px) {
    section.historia {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 6vw;
    }

    section.historia> :nth-of-type(1) {
        min-height: 315px;
    }
}

@media only screen and (max-width: 660px) {
    section.historia {
        grid-template-areas: "imagem" "p1" "p2" "p3";
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 317px) {
    section#consultores>div:nth-of-type(2)>div {
        --larguraConsultor: 60vw;
    }
}

@media only screen and (max-width: 1078px) {
    section.empresas div.button>button {
        padding:8px 20px;
        font-size: 1rem;
    }


}

@media only screen and (max-width: 767px){
    .balao{
        width: 60%;
    }
} 

.historia-texto{
margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

}

@media (max-width: 812px) {
    #inicial {
        display: flex;
    align-items: center;
    }


}
  
@media screen and (max-width: 640px) {
  section.historia > div:nth-of-type(1) img{
  width:100% !important;
  }
  section#consultores{
  padding:23vw 5vw 13vw;
  }
  #procuraApoio{
  padding:10vw 5vw;
  }
  
  #inicial{
  flex-direction:column
  }
  
  #podemosAjudar a{
  grid-template-rows:1fr;
  }
  
  .containerBalao h2{
  text-align: center;
    margin-bottom: 40px;
    line-height: 1.2;
  }
  .containerBalao{
  	padding: 0px 20.7px;
  }
  .balao{
  margin-bottom:10px;
  }
  
  #feedback{
  padding:35px 0 15px 0px !important;
  }
}