/* Fundo aplicado ao body */
body {
    width: 100%;
    height: 100vh; /* Ocupa toda a altura da tela */
    margin: 0;
    padding: 0;
    background-image: url('Fundo5.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 45px 45px 0;
}

.qvplaceholder, .qvobject {
	flex: 1 1 auto;
	height: 400px;
	margin: 45px 0px 0 10px;
}

.btn-info{
	background-color: #1E90FF;
}

#popup {
	background-color: #c3534b;
	color: #FFFFFF;
	position: fixed;
	max-width: 250px;
	padding: 10px;
	margin: 10px;
	bottom: 0;
	right: 0;
	display: none;
	border-radius: 10px;
	z-index: 6;
	font-family: sans-serif;
}

.close {
	cursor: pointer;
	background: 0 0;
	border: 0;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
	position: absolute;
	right: 9px;
	top: 7px;
}

.close:hover {
	opacity: .5;
}

#popupText {
	margin-right: 23px;
}
/* Cabecalho da Pagina */
.fundo_cima{
  background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgb(216, 216, 216) 100%);
  display: flex;
}

.rotulo {
    display: flex;
    justify-content: center;
    padding: 20px 10px;
}

.nome_orgao {
  font-size: clamp(1em, 1em + 1vw, 1.5em);
  font-weight: bold;
  color: #888B8C;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  /*justify-content: center;*/
  line-height: 1;
}

.nome_orgao a{
  color: #888B8C;
  text-decoration: none;
  display: flex;
}
#barra{
	  border-left: 4px solid #888B8C;
}
.sit{
  height: -1000px;
  color: #fff;

}
/* Configuração Painel de Menu/Home */
.Menu_Home {
    width: 70%;
    height: 80%;
    background-image: url('Fundo5.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Mantém a imagem fixa ao rolar */
    position: relative;
	
}


/* Adiciona uma camada de cor semi-transparente para melhorar a legibilidade */
.Menu_Home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Ajuste a opacidade conforme necessário */
	border-radius: 12px; /* Bordas arredondadas */
    z-index: 1;
}

/* Mantém o conteúdo acima da camada escura */
.Menu_Home * {
    position: relative;
    z-index: 2;
}
/* Se quiser que os botões fiquem centralizados */
.Menu_Home .slider-buttons {
    text-align: center;
    margin-top: 20px;
}

/* Ajuste para centralizar a imagem */
#img_menu {
    max-width: 100%; /* Responsivo */
    height: auto;
    border-radius: 12px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    display: block;
    margin: 0 auto 20px auto; /* Centraliza horizontalmente */
	margin-top: 20px;
	margin-left: 40px;
}

/* Efeito ao passar o mouse */
#img_menu:hover {
    transform: scale(1.05); /* Aumenta levemente */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3); /* Destaque maior */
}
/* Container dos botões */
.button-container {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza */
    gap: 20px; /* Espaço entre os botões */
	max-width: 100%; /* Responsivo */
    height: auto;
    display: block;
    margin: 0 auto 20px auto; /* Centraliza horizontalmente */
	margin-top: 20px;
	margin-left: 10px;
}

/* Estilização dos links */
.button-container a {
    text-decoration: none; /* Remove o sublinhado dos links */
    color: inherit; /* Herda a cor do texto do botão */
}

/* Estilização dos botões */
.button-container button {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    background-color: white; /* Fundo branco */
    border: 3px solid #007089; /* Borda azul */
    color: #f7941e; /* Texto laranja */
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    width: 250px; /* Largura fixa */
    height: 60px; /* Altura fixa */
	margin-top: 40px; /* Espaçamento vertical entre os botões */
	display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px; /* Bordas arredondadas */
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

/* Hover nos botões */
.button-container button:hover {
    background-color: #f7941e; /* Laranja no hover */
    color: white; /* Texto branco */
    border-color: #f7941e;
}

/* Estilização dos botões específicos */
.button_Metodologia,
.button_Monitore_o_PPA,
.button_Avaliacao_do_PPA {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    background-color: #fff; /* Fundo branco */
    border: 2px solid #007089; /* Borda azul */
    color: #f7941e; /* Texto laranja */
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 0;
    border-radius: 15px; /* Cantos arredondados */
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10%; /* Espaço entre botões */
    width: 70%; /* Ocupa toda a largura da coluna */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-left: 80%;
}

.button_Metodologia:hover,
.button_Monitore_o_PPA:hover,
.button_Avaliacao_do_PPA:hover {
    text-decoration: none;
    background-color: #f1f1f1; /* Efeito hover leve */
}

.button_Metodologia {
    margin-top: 40%;
}

/* Botões do Menu/home */

#container_dinamico {
    display: none; /* Esconde inicialmente o container */
}

.custom-button {
    display: inline-block;
	font-family: 'Montserrat'
    padding: 10px;
    border: 1px solid #000;
    background-color: #79C096;
	border-radius:100px 100px 100px 100px;
    text-align: center;
    position: relative;
	margin-top: 5%;
	width: 100%;
	height: 100px;
  }

  .custom-button img {
    position: absolute;
	border-radius:100px 0px 0px 100px;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
  }

  .custom-button span {
    margin-left: 30%;
    display: block;
  }
 
 /* Customização das Páginas do Qlik*/
.paginas-qlik {
    text-align: center;
}

.paginas-custom {
    width: 96vw; /* Ocupa 98% da largura da viewport */
    height: 96vh; /* Ocupa 98% da altura da viewport */
    border: none; /* Remove borda do iframe */
    overflow: hidden; /* Remove a barra de rolagem do iframe */
}
 
/* Customização das Imagens e Botões da Metodologia*/
.image-slider {
    text-align: center;
}

.img-custom {
    margin-top: 20px;
    max-width: 80%; /* Ajuste a largura conforme necessário */
    height: auto; /* Mantém a proporção */
}

.slider-buttons button.btn {
    background-color: #2071B7 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    transition: 0.3s !important;
}

.btn-primary  {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
}

.slider-buttons button:hover {
    background-color: #0056b3; /* Azul mais escuro ao passar o mouse */
}

/*Elementos Complementares*/
.divisoria {
  background: linear-gradient(to right, #39A6DE, #2071B7); /* Degradê azul */
  height: 5px; /* Ajuste a altura para uma linha mais visível */
  width: 95%; /* Pode ajustar para cobrir mais ou menos da tela */
  margin: 20px auto; /* Centraliza a divisória */
  border-radius: 5px; /* Arredondamento suave */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.titulo-secao {
  text-align: center; /* Centraliza o texto */
  font-size: 28px; /* Tamanho do texto */
  font-weight: bold; /* Deixa o texto em negrito */
  color: #2071B7; /* Azul escuro para destaque */
  margin-top: 20px; /* Espaçamento abaixo da divisória */
  text-transform: uppercase; /* Deixa o título todo em maiúsculo */
  letter-spacing: 2px; /* Aumenta o espaçamento entre as letras */
  font-family: 'Montserrat', sans-serif; /* Mantém a tipografia elegante */
}


/* Espaço antes do rodapé */
.espaco-rodape {
    height: 40px; /* Ajuste conforme necessário */
}

/* Rodapé */
.footer {
    background-color: rgba(34, 145, 208, 0.8); /* Azul com transparência */
    padding: 20px 0;
    text-align: center;
    color: white;
    backdrop-filter: blur(5px); /* Deixa o fundo mais suave */
}

/* Container do rodapé */
.rodape-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

/* Texto do rodapé */
.rodape-texto a {
	font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: white;
    transition: 0.3s;
}
.rodape-texto a:hover {
    color: #f1f1f1;
}

/* Logos */
.rodape-logo-semit img,
.rodape-logo-prefeitura img {
    max-height: 60px;
    transition: 0.3s;
}
.rodape-logo-semit img:hover,
.rodape-logo-prefeitura img:hover {
    transform: scale(1.1);
}