/* CSS */
/* ====================================================== */


/* ====================================================== */
/* BARRA PRINCIPAL DE NAVEGAÇÃO
/* ====================================================== */


/* ====================================================== */
/*				CABEÇALHO 
/* ====================================================== */



.cabecalho {
	display: flex;
    position: relative;
	justify-content: space-between; 
    align-items: ;
    background-color: #eeeeee;
}


.texto-cabecalho {
    color: #333;
    background-color: transparent;
	width: auto;
    height: auto; 
    margin: auto; 
}



/* ====================================================== */


.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}


.navbar-inverse {
    background-color: #09445b;
    border-color: #080808;
	margin-bottom: 1.5cm;
}


.navbar-inverse .navbar-brand {
    color: white;
}

.navbar-inverse .navbar-nav>li>a {
    color: white;
}

/* ====================================================== */
/* PADRONIZAÇÃO DO LOGO DA AGERGS

/* ====================================================== */

.logo-agergs {
	display: block;
    text-align: center;
    /* MUDANÇA: Mais espaço (1.5cm) abaixo do logo */
    margin-bottom: 0.0m; 
	margin-top: 0.5cm;
    }
	
.logo-agergs img {
     width: 1.5cm;
     height: auto; 
     margin: auto; 
    }

/* ESTILOS DOS BOTÕES DO HUB */
/* ====================================================== */

/* O 'wrapper' é o link (tag <a>) que envolve o botão.
   Isso garante que toda a área seja clicável e controla o espaçamento. */
.hub-button-wrapper {
    display: block; /* Faz o link preencher o espaço da coluna */
    text-decoration: none; /* Remove o sublinhado do link */
    padding: 10px; /* Cria um espaçamento (gutter) entre os botões */
}

.hub-button-wrapper:hover {
    text-decoration: none; /* Garante que não apareça sublinhado ao passar o mouse */
}

/* Este é o 'truque' para criar um quadrado responsivo.
   padding-top: 100% força a altura do elemento a ser igual à sua largura. */
.hub-button-square {
    width: 100%;
    padding-top: 100%; /* Isso força a proporção 1:1 (quadrado) */
    position: relative; /* Necessário para posicionar o título dentro dele */
    
    background-color: #f0f0f0; /* Cor de fundo padrão */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    
    /* Propriedades para a imagem de fundo */
    background-size: cover; /* Faz a imagem cobrir todo o quadrado */
    background-position: center center; /* Centraliza a imagem */
    background-repeat: no-repeat;
    
    /* Efeito de transição suave */
    transition: all 0.3s ease;
}

/* Efeito de 'hover' no quadrado: ele cresce um pouco e a sombra aumenta */
.hub-button-wrapper:hover .hub-button-square {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Estilização do título do botão */
.hub-button-title {
    position: absolute; /* Posiciona o título 'dentro' do quadrado */
    bottom: 0; /* Alinha na parte inferior */
    left: 0;
    right: 0;
    
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: white; /* Cor do texto */
    
    /* Fundo semi-transparente para garantir a leitura sobre qualquer imagem */
    background-color: rgba(0, 0, 0, 0.6); 
    padding: 8px;
    
    /* Arredonda apenas os cantos inferiores para combinar com o botão */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* ====================================================== */
/* ⬇️ ADICIONE SUAS IMAGENS AQUI ⬇️ */
/* ====================================================== */
/* ====================================================== */
/* 					LOGO AGERGS
/* ====================================================== */

/* ====================================================== */
/* 				IMAGENS DOS BOTÕES
/* ====================================================== */

/* Substitua 'path/to/image.png' pelo caminho real da sua imagem.
   Pode ser uma URL (https://...) ou um caminho local ('img/icone1.png') */

#btn-1 {
    background-image: url('Evolução tarifaria.jpg');
    /* Exemplo: background-image: url('https://portal.agergs.rs.gov.br/img/logo.png'); */
}

#btn-2 {
    background-image: url('Convenios Saneamento.png');
}

#btn-3 {
    background-image: url('subestações.jpg');
}

#btn-4 {
    background-image: url('DECFEC.jpg');
}

#btn-5 {
    background-image: url('Viagens Regulatórias2.png');
}

#btn-6 {
    background-image: url('Gota Roxa.png');
}