/* variavel com a cor padrao da empresa */
:root {
    /* --minha-cor: yellow; dodo*/
    --minha-cor: #00FF00;
    --hover-cor: #A9A9A9;
  }

/* como aplicar a variavel de cor
    color: var(--minha-cor); 
    color: var(--hover-cor);   
 */

/* GERAL DA PAGINA */
body, html {
    margin: 0;
    padding: 0;
    background-color:rgb(248, 250, 250);
    width: 100%; 
    height: 100%;
    font-family: Arial, sans-serif;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Estilo para o cabeçalho */
header {
    /* position: fixed; */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
}

/* Estilo para o conteúdo principal */
main {
    padding-top: 60px; /* Altura do cabeçalho + espaço extra */
}

.content {
    /* Estilos para o conteúdo da página */
    background-color: black;
}

.footer {
    /* Estilos para o rodapé da página */
    background-color: black;
}

.top-bar {
    background-color: #333; /* Cor de fundo da barra no topo */
    color: white; /* Cor do texto na barra no topo */
    padding: 10px; /* Espaçamento interno da barra no topo */
    text-align: center; /* Centraliza o conteúdo */
}
/* --- GERAL DA PAGINA --- */

/* CABECALHO */
.fundodivA {
    background-image: url('/imagens/fundo_60ef3c635dc67.jpg'); 
    background-size: cover;
    background-position: center;
    color: white;
    padding: 10px; 
    text-align: center;
}

/* --- CABECALHO --- */

.image-container {
    width: 300px; /* Largura fixa da div */
    height: 200px; /* Altura fixa da div */
    border: 1px solid #ccc; /* Apenas para visualização */
    display: flex; /* Usando flexbox para centralizar a imagem */
    align-items: center; /* Alinhar verticalmente */
    justify-content: center; /* Alinhar horizontalmente */
}

.image-container img {
    max-width: 100%; /* A imagem não excederá a largura da div */
    max-height: 100%; /* A imagem não excederá a altura da div */
    width: auto; /* Restaurar a largura automática para manter a proporção */
    height: auto; /* Restaurar a altura automática para manter a proporção */
}

#example1 {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px 8px #888888;
}

#example2 {
    /* border: 1px solid; */
    /* padding: 10px;  */
    /* box-shadow: 5px 10px 18px #888888; */
    /* background-color: #f0f0f0; */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
                /* -5px -5px 10px rgba(255, 255, 255, 0.3); */
      /* box-shadow: 10px 10px 5px #aaaaaa; */
}

#example3 {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px 18px red;
}

.limitarcontener {
    width: 200px;
    /* border: 1px solid #ccc; */
    overflow: hidden; /* Oculta o texto que excede o contêiner */
    white-space: nowrap; /* Impede a quebra de linha no texto */
    text-overflow: ellipsis; /* Adiciona reticências (...) para indicar texto truncado */
}

.full-width {
    position: relative;
    width: 100%; 
    height: 600px; 
    background-image: url('/imagens/fundopesquisa.jpg'); 
    background-color: #f0f0f0; 
    background-size: cover; 
    background-position: center; 
    border: none; 
    padding-top: 480px;
}

.inner-div {
    position: absolute; 
    bottom: 0;
    width: 100%;    
}

.info-box {
    display: block;
    min-height: 90px;
    background: #d2d6de;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 2px;
    margin-bottom: 15px;
}
.modal-header {
    border-bottom-color: #f05959;
    background-color: #f05959;
    color: white;
}
.modal-footer {
    border-top-color: #c78080;
    background-color: #c78080;
}

.div1{
    padding-top: 15px;    
    padding-right: 50px;  
    padding-bottom: 15px; 
    padding-left: 70px;   
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */	
}

/* Estilos para o botão */
.centered-button {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.button {
    border: none;
    color: white;
    display: inline-block;
    font-size: 16px;
    margin: 7px 0px 0px 0px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 4px;
    height: 50px;
    background-color: #3f403f;
}
.button:hover {
    opacity: 0.7;
}

.button-centro-div {
    display: inline-block;
    font-size: 16px;
    margin: 0px;
    height: 50px;   
    /* border: 1px solid black;  */
    justify-content: center;   
    margin-bottom: 20px ;
}

.button1 {
    border: none;
    color: white;
    display: inline-block;
    font-size: 16px;
    /* margin: 7px 0px 0px 0px; */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 4px;
    height: 50px;
    background-color: #3f403f;
}

.button1:hover {
    opacity: 0.7;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: #555555;
    color: white;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: white;
    color: black;;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Cor da Empresa e formatacao dos icones sociais */
/* desativei pq coloquei na pagian config */
/* .empresa-cor { */
    /* color: var(--minha-cor); */
     /* yellow;     */
/* } */

.icon-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #000; 
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Sombra branca */
}
.icon-container i {
    font-size: 24px;
}
.icon-container:hover {
    box-shadow: 0 0 20px #FFFFFF; /* Sombra branca com mais destaque no hover */
}	

.div-social{
    text-align: center; 
    display: flex; 
    justify-content: center;
}
.div-social i {
    font-size: 16px;
    margin-right: 10px;
}  
.div-social:hover {
    opacity: 0.7;
}	      
    
/* Cor da Empresa e formatacao dos icones sociais */

.social-icons {
    list-style: none;
    padding: 0;
    display: flex;
}

.social-icons li {
    margin: 0 10px;
    transition: transform 0.3s ease; /* Transição de tamanho ao passar o mouse */
}

.social-icons i {
    font-size: 24px;
    color: #333;
}

.social-icons li:hover {
    transform: scale(1.2); /* Aumentar o tamanho ao passar o mouse */
}

select {
    font-size: 14px; 
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    background-color: black; 
    color: white; 
    border: 1px solid white; 
    padding: 5px;
    border-radius: 5px;
    width: 120px; 
    height: 50px;
}

.select-grande {
    width: 180px; 
}

.div-select{
    text-align: center; 
    vertical-align: middle; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}

@media screen and (max-width: 768px) {

     select {
        font-size: 12px; 
        width: 300px;  
        height: 30px;
        margin-bottom: 10px;
    } 

    .select-grande {
        font-size: 12px; 
        width: 300px;  
        height: 30px;  
        margin-bottom: 10px;  
    }

    .button {
        text-align: center;
        font-size: 12px;
        height: 30px; 
        display: flex;
        border: none;
        margin: 10px 0px 0px 200px;
    }

    .button1 {
        font-size: 12px;  
        margin: 0px;   
        height: 30px;  
    }

    .button-centro-div {     
        display: flex; 
        width: 100%;
        height: 30px;   
        justify-content: center;   
        /* margin-bottom: 20px ; */
        margin: 0px;
        overflow: hidden;
    }
    
    .full-width {
        padding-top: 250px;
    }
}