/************************************************************************ Fontes ********************************************************************/

@font-face {
    font-family: 'grosso';
    src: url(../fontes/Meutas-Bold.otf);
}

@font-face {
    font-family: 'grosso2';
    src: url(../fontes/Fontfabric\ \ MullerNarrowMedium.otf);
}

/****************************************************************************************************************************************************/


/************************************************************************ Header ********************************************************************/


.navbar-nav .nav-link {
    margin: 20px;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 30px;
}

.navbar-nav .nav-link:hover {
    color: #FFD700 !important;
}

.navbar-nav .nav-link.active {
    color: #FFD700 !important;

}

.logo {
    height: 60px;
    margin-top: 10px;
    
}

.navbar {
    background-color: #f8f9fa;
}

.webicon {
    margin-left: 15px;
    width: 28px;
    /* Tamanho padrão */
    height: 28px;
    /* Tamanho padrão */
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Transições suaves */
    fill: #5a5a5aef;
    /* Cor padrão (cinza escuro) */
}

.webicon:hover {
    color: #5a5a5aef;
    transform: scale(1.2);
    /* Aumenta o tamanho */
    filter: brightness(1.9) sepia(5) saturate(5);
    /* Torna a imagem amarela */
}

/******* dropdown *******/

/* Remove a setinha do dropdown */
.navbar .dropdown-toggle::after {
    display: none;
    border: 0;
}

/* Remove as bordas e a sombra do dropdown */
.navbar .dropdown-menu {
    border: none;
    box-shadow: none;
    background-color: #f8f9fa;
    text-align: center;
    /* Centraliza o texto no menu dropdown */
}

/* Centraliza o texto dos itens do dropdown */
.navbar .dropdown-menu .dropdown-item {
    text-align: center;
    font-size: 13px;
    color: #5a5a5aef;
    font-weight: bold;
}

.drop{
    padding: 6px !important;
}



/* deixa a navbar fixa no topo*/
.menu {
    background-color: #f8f9fa;
    color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 15;
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #f8f9fa;
}

/* Centraliza as logos */
.logos {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: -11px;
    margin-top: 10px;

}

/* Centraliza a barra de navegação */
.navbar {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Centraliza os links */
.navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Remove a cor azul ao clicar no item do dropdown */
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active {
    background-color: #f8f9fa;
    /* Cor de fundo desejada */
    outline: none;
    /* Remove o contorno padrão */
    box-shadow: none;
    /* Remove qualquer sombra que possa aparecer */
}

/*********************************************************************************************************************************************************/



/************************************************************************ Conteiner 1 ********************************************************************/

.conteiner1 {
    position: relative;
    height: 820px;
    /* ou a altura que desejar */
    overflow: hidden;
    /* garante que partes da imagem fora do contêiner não sejam visíveis */
}

.conteiner1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* mantém o conteúdo visualmente centrado */
    object-position: center;
    /* centraliza a imagem dentro do contêiner */
}

.caminhaozinho {
    color: #FFD700;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 18.5%;
    right: 88.5%;
}

.lines {
    color: #FFD700;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 18.5%;
    right: 93%;
}

.texto-cima {
    font-size: 18px;
}

.texto-meio {
    font-size: 22px;
}

.texto-baixo {
    font-size: 15px;
}

.highlight {
    text-decoration: underline;
    /* Sublinhado */
    text-decoration-color: #FFD700;
    /* Cor do sublinhado */
}

.texto-sobre-imagem {
    font-family: 'grosso';
    position: absolute;
    top: -6%;
    left: 20%;
    /* Valor para desktop */
    width: 100%;
    max-width: 830px;
    /* Largura máxima para desktop */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    align-items: flex-start;
    /* Alinha o texto à esquerda */
    text-align: left;
    /* Alinha o texto à esquerda */
    color: white;
    /* Cor do texto */
    padding: 20px;
    /* Adiciona um pouco de espaço em torno do texto */
}

.texto-sobre-imagem>div {
    margin: 10px 0;
    /* Espaçamento vertical entre os textos */
}

/**********************************************************************************************************************************************************/



/************************************************************************ Conteiner 2 **********************************************************************/

.conteiner2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 colunas */
    gap: 20px;
    /* Espaço entre as divs */
    padding: 200px 300px 0;
    /* Espaço de 200px nas laterais e 0 no fundo */
    margin-top: -180px;
    /* Distância no topo ajustada para 50px */
    box-sizing: border-box;
    /* Inclui padding e border na largura total */
    font-family: 'grosso2';
    font-size: 18px;
    background-color: #f8f9fa;
}

/* Estilo das caixas */
.box {
    margin-top: 10px;
    display: flex;
    align-items: center;
    /* Centraliza verticalmente ícone e texto */
    padding: 30px;
    /* Espaçamento interno */
    text-align: left;
    /* Alinha o texto à esquerda por padrão */
}


/* Estilo dos ícones */

.image-container {
    margin-right: 20px;
    /* Espaço entre o ícone e o texto */
}

.image-container svg {
    width: 50px;
    height: 50px;
}


.iconeamarelo {
    color: #FFD700;
    transition: color 0.3s ease;
    /* Transição suave para a mudança de cor */
}

.iconeamarelo:hover {
    color: #7d60ff;
    /* Cor preta quando o mouse passa por cima */
}

.titulo1 {
    font-family: 'grosso' !important;
}

/*************************************************************************************************************************************************************/



/****************************************************************************** Conteiner 3 *******************************************************************/

.conteiner3 {
    position: relative;
    height: 820px;
    /* ou a altura que desejar */
    overflow: hidden;
    /* garante que partes da imagem fora do contêiner não sejam visíveis */
    background-color: #f8f9fa;
}

.conteiner3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* mantém o conteúdo visualmente centrado */
    object-position: center;
    /* centraliza a imagem dentro do contêiner */

}

.textosobreimagem2 {
    font-family: 'grosso';
    position: absolute;
    top: -1%;
    left: auto;
    /* Remove o alinhamento centralizado */
    right: 8%;
    /* Alinha o contêiner à direita */
    width: 100%;
    max-width: 830px;
    /* Largura máxima para desktop */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    text-align: right;
    /* Alinha o texto à direita */
    color: white;
    /* Cor do texto */
    padding: 30px;
    /* Adiciona um pouco de espaço em torno do texto */
}

.aviaozinho {
    color: #FFD700;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 16%;
    right: 3.8%;
}

.texto-cima2 {
    font-size: 22px;
}

.texto-meio2 {
    font-size: 36px;
}

.texto-baixo2 {
    font-size: 16px;
}

.textosobreimagem2>div {
    margin: 12px 0;
    /* Espaçamento vertical entre os textos */
}



/*************************************************************************************************************************************************************/



/****************************************************************************** Conteiner 4 *******************************************************************/


/************ texto das logos *************/

.conteiner4{
    background-color: #f8f9fa;
    height: 540px;
}

.linha-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
}

.linha-container hr {
    width: 700px;
    /* Tamanho da linha horizontal */
    border: none;
    border-top: 3px solid #FFD700;
    /* Cor amarela para as linhas */
    margin: 0 10px;
}

.linha-container h1 {
    margin: 0;
    padding: 0 10px;
    font-size: 35px;
    font-weight: bold;
    white-space: nowrap;
    /* Garante que o texto não quebre */
    font-family: 'grosso2';
    color: rgba(41, 39, 39, 0.918);
    margin-top: 30px;

}

.linha-horizontal {
    border-top: 3px solid #FFD700;
    /* Cor amarela para as linhas */
    width: 15.75%;
    margin-top: 40px;
}

.linha-baixo{
    width: 35%;

}

/****************************************************************************************************************************************************/



/****************************************************************************** logos *******************************************************************/


.gallery img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.gallery img:hover {
  transform: scale(1.1);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 colunas */
    gap: 10px;
    max-width: 1200px;
    /* Largura máxima da galeria */
    margin: 0 auto;
    place-items: center;
    /* Centraliza as imagens dentro de cada célula */
    background-color: #f8f9fa;
}

.gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.img-solucao{
    width: 140px !important;
}

.img-taruma{
    width: 200px !important;
}

.img-ruviaro{
    width: 180px !important;
}

.img-safelab{
    width: 180px !important;

}

.img-eudora{
    width: 140px !important;
}

.img-rgf{
    width: 180px !important;
}

.img-blc{
    width: 180px !important;
}


.img-tct{
    width: 100px !important;
}

.img-jem{
    width: 180px !important;
    height: 80px;


}

.img-beleza {
    width: 160px !important;
}

.img-berenice {   
    width: 130px !important;
}

.img-boticario {
    width: 200px !important;
    height: 60px !important;

}

.img-cca {
    width: 160px !important;

}

.img-dfl {
    margin-top: 10px;
    width: 150px !important;

}

.img-jones {
    margin-top: 30px !important;
    width: 210px !important;

}

.img-lovato {
    width: 110px !important;

}

.img-kobber {
    margin-top: 10px; 
    width: 150px !important;

}

.img-oui {
    margin-top: 30px !important;
    width: 140px !important;

}

.img-truss {
    width: 130px !important;
    margin-top: 35px;

}

.img-grupo {
    width: 170px !important;
    margin-top: 20px;
}

.img-vult {
    margin-top: 20px;
    width: 150px !important;
}

.img-quality {
    width: 110px !important;

}


.img-saggezza {
    width: 140px !important;
}

/****************************************************************************************************************************************************/



/****************************************************************************** Conteiner 5 *******************************************************************/

.conteiner5 {
    position: relative;
    height: 870px;
    /* ou a altura que desejar */
    overflow: hidden;
    /* garante que partes da imagem fora do contêiner não sejam visíveis */
}

.conteiner5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* mantém o conteúdo visualmente centrado */
    object-position: center;
    /* centraliza a imagem dentro do contêiner */
}

.texto-sobre-imagem3 {
    font-family: 'grosso';
    top: -3%;
    right: 41%;
    position: absolute;
    width: 100%;
    max-width: 830px;
    /* Largura máxima para desktop */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    align-items: flex-start;
    /* Alinha o texto à esquerda */
    text-align: left;
    /* Alinha o texto à esquerda */
    color: white;
    /* Cor do texto */
    padding: 20px;
    /* Adiciona um pouco de espaço em torno do texto */
}

.texto-sobre-imagem>div {
    margin: 10px 0;
    /* Espaçamento vertical entre os textos */
}

.texto-cima3 {
    font-size: 24px;
}

.texto-meio3 {
    font-size: 38px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.texto-baixo3 {
    font-size: 18px;
}

.caixinha {
    color: #FFD700;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 23.8%;
    right: 91%;
}

/****************************************************************************************************************************************************/



/****************************************************************************** Container 6 ***********************************************************/
.conteiner6 {
    display: flex;
    justify-content: center;
    /* Centraliza os cards horizontalmente */
    background-color: #f8f9fa;
    /* Cor de fundo */
}


.card {
    width: 30rem;
    /* Largura dos cards */
    padding: 20px;
    /* Espaçamento interno dos cards */
    background-color: #f8f9fa !important;
    /* Cor de fundo */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza o conteúdo no card */
    text-align: center;
    /* Centraliza o texto dentro dos cards */
    border: 0 !important;

}


.card svg {
    width: 50px;
    /* Tamanho do ícone */
    height: 50px;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    /* Espaçamento entre o título e o parágrafo */
    text-align: center;
    /* Centraliza o título */
    font-family: 'grosso';
}

.card-text {
    font-size: 22px;
    text-align: justify;
    /* Justifica o texto */
    font-family: 'grosso2';
}









/****************************************************************************************************************************************************/


/****************************************************************************** Footer ***********************************************************/





/****************************************************************************************************************************************************/