/* Importa a fonte Roboto Mono do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* Aplica a fonte ao elemento body para que ela seja a fonte padrão de todo o site */

* {
  box-sizing: border-box;
}

body {
font-family: 'Roboto Mono', monospace;
margin: 0px;
padding: 0px
}

body.no-scroll {
    overflow: hidden;
}

/* Você pode aplicar a fonte a elementos específicos, como títulos ou parágrafos */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Mono', monospace;
}

p, div, span, button, input, textarea {
  font-family: 'Roboto Mono', monospace;
}

/* Se quiser uma fonte diferente para algum elemento específico, basta sobrescrever */
.algum-elemento-especifico {
  font-family: Arial, sans-serif; /* Exemplo de outra fonte */
}


.texto-horizontal-fundo {
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 10px;
}

.texto-horizontal-fundo-largura {
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  width: 50%; /* Largura base para telas maiores */
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px; /* Adiciona margem inferior entre os retângulos em telas menores */
}

@media (max-width: 768px) {
  .texto-horizontal-fundo-largura {
    width: 100%; /* Ocupa a largura total em telas pequenas */
    padding: 15px; /* Opcional: menos padding em telas menores */
    font-size: 14px; /* Opcional: texto menor para caber melhor */
  }
}


.fonte-44 {
font-size: 44px;
}

.texto-horizontal-fundo-titulo {
  background-color: #D0F0FD;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  width: 100%; /* Largura base para telas maiores */
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px; /* Adiciona margem inferior entre os retângulos em telas menores */
}

.texto-horizontal {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  width: 100%; /* Largura base para telas maiores */
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px; /* Adiciona margem inferior entre os retângulos em telas menores */
}

.frase-pagina-principal {
  padding: 20px;
  width: 90%; /* Largura base para telas maiores */
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px; /* Adiciona margem inferior entre os retângulos em telas menores */
  font-size: 24px;
}

.request-service {
  padding: 20px;
  width: 90%; /* Largura base para telas maiores */
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 18px;
}


.container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* Permite que os retângulos quebrem para a próxima linha em telas menores */
  margin: 10px;
}

.rectangle {
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  width: 300px; /* Largura base para telas maiores */
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px; /* Adiciona margem inferior entre os retângulos em telas menores */
}

.rectangle-numbers {
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  width: 500px; /* Largura base para telas maiores */
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px; /* Adiciona margem inferior entre os retângulos em telas menores */
}

/* Smartphones (até 600px) */
@media (max-width: 600px) {
  .rectangle-numbers {
    width: 100%;           /* Usa a maior parte da tela */
    padding: 15px;        /* Menos padding para economizar espaço */
    font-size: 14px;      /* Reduz o tamanho da fonte, se necessário */
  }
}

/* Tablets (601px até 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .rectangle-numbers {
    width: 100%;           /* Um pouco mais estreito que o desktop */
    padding: 18px;
    font-size: 15px;
  }
}


.rectangle svg {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  fill: #555;
}

.rectangle h3 {
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 5px;
  color: #333;
}

.rectangle p {
  font-size: 0.9em;
  line-height: 1.5;
  color: #666;
  margin-bottom: 0;
  flex-grow: 1;
}

.rectangle p a {
  color: #007bff;
  text-decoration: none;
}

.rectangle p a:hover {
  text-decoration: underline;
}

.rectangle-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 15px;
  font-size: 0.9em;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color 0.3s ease;
  align-self: flex-start;
  text-decoration: none;
  }

.rectangle-button:hover {
  background-color: #0056b3;
}

.rectangle-button:focus {
  outline: none;
  border: 1px solid #007bff;
}

/* Media Query para telas menores que 768 pixels (típico de tablets e alguns celulares) */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Empilha os retângulos verticalmente */
  }

  .rectangle {
    width: 100%; /* Faz os retângulos ocuparem a largura total da tela */
  }
}

/* Media Query para telas ainda menores, como celulares */
@media (max-width: 480px) {
  .rectangle h3 {
    font-size: 1.1em; /* Reduz um pouco o tamanho da fonte do título */
  }

  .rectangle p {
    font-size: 0.85em; /* Reduz um pouco o tamanho da fonte do parágrafo */
  }

  .rectangle-button {
    font-size: 0.8em; /* Reduz um pouco o tamanho da fonte do botão */
    padding: 6px 12px; /* Reduz um pouco o padding do botão */
  }
}

.meu-botao {
  background-color: #007bff; /* Azul */
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer; /* Indica que é clicável */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
  transition: box-shadow 0.3s ease; /* Transição suave para a sombra */
}

.meu-botao:hover {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Sombra mais forte ao passar o mouse */
}

.meu-botao:active {
  background-color: #0056b3; /* Azul mais escuro ao clicar */
  box-shadow: none; /* Remove a sombra ao clicar */
}

.meu-botao:focus {
  outline: none; /* Remove a borda de foco padrão */
  border: 2px solid #007bff; /* Adiciona uma borda de foco personalizada */
}

.search-bar {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  width: 300px; /* Define a largura para 300 pixels */
}

.search-bar input[type="text"] {
  flex-grow: 1;
  padding: 10px;
  border: none;
  font-size: 16px;
}

.search-bar input[type="text"]:focus {
  outline: none;
}

.search-bar button[type="submit"] {
  background-color: #f0f0f0;
  color: #333;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-bar button[type="submit"] svg {
  width: 18px;
  height: 18px;
  fill: #555;
}

.search-bar button[type="submit"]:hover {
  background-color: #e0e0e0;
}

.container-duas-colunas {
  display: flex;
  gap: 5px; /* espaço entre colunas, opcional */
  margin: 10px;
}

.coluna {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f8f8f8;

  /* NOVO: define layout interno em coluna */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coluna-direita {
  flex: 1;
  background-color: #f8f8f8;
  border-radius: 5px;
}
.coluna-esquerda {
  flex: 1;
  background-color: #f8f8f8;
  border-radius: 5px;
}


/* Para adicionar uma margem entre as colunas */
.container-duas-colunas > .coluna:not(:last-child) {
  margin-right: 20px; /* Adiciona uma margem à direita de todas as colunas, exceto a última */
}

/* Para tornar o layout responsivo em telas menores */
@media (max-width: 768px) {
  .container-duas-colunas {
    flex-direction: column; /* Empilha as colunas verticalmente em telas menores */
  }

  .container-duas-colunas > .coluna:not(:last-child) {
    margin-right: 0; /* Remove a margem direita */
    margin-bottom: 20px; /* Adiciona uma margem inferior entre as colunas empilhadas */
  }
}

.container-tres-colunas {
  display: flex; /* Cria um contexto de flexbox */
  margin: 10px;
}

.coluna-tres {
  flex: 1; /* Faz com que cada coluna cresça igualmente para ocupar o espaço disponível */
  padding: 15px; /* Adiciona um espaçamento interno nas colunas (opcional) */
  box-sizing: border-box; /* Garante que o padding não aumenta a largura total da coluna */
  
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 5px;  

  /* NOVO: define layout interno em coluna */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}


/* Para adicionar uma margem entre as colunas */
.container-tres-colunas > .coluna-tres:not(:last-child) {
  margin-right: 20px; /* Adiciona uma margem à direita de todas as colunas, exceto a última */
}

/* Para tornar o layout responsivo em telas menores */
@media (max-width: 960px) { /* Um breakpoint um pouco maior para 3 colunas */
  .container-tres-colunas {
    flex-direction: column; /* Empilha as colunas verticalmente em telas menores */
  }

  .container-tres-colunas > .coluna-tres:not(:last-child) {
    margin-right: 0; /* Remove a margem direita */
    margin-bottom: 20px; /* Adiciona uma margem inferior entre as colunas empilhadas */
  }
}

/* Opcional: Ajustes para telas menores ainda */
@media (max-width: 600px) {
  .coluna-tres {
    padding: 10px; /* Reduz o padding em telas menores */
  }
}


.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.main-nav li {
  margin-right: 20px;
}

.main-nav li:last-child {
  margin-right: 0;
}

.main-nav li a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  display: block;
}

.main-nav li a:hover {
  color: #007bff;
}

/* Estilos para o dropdown de "Resources" */
.resources-dropdown {
  position: relative;
}

.resources-dropdown .dropdown-menu {
  list-style: none;
  padding: 15px;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none; /* Oculto por padrão */
  min-width: 150px;
}

.resources-dropdown:hover .dropdown-menu {
  display: block; /* Exibe ao passar o mouse */
}

.resources-dropdown .dropdown-menu li a {
  color: #333;
  padding: 8px 10px;
  display: flex;
  align-items: center;
}

.resources-dropdown .dropdown-menu .icon {
  margin-right: 8px;
  font-size: 1em;
  color: #e91e63; /* Cor aproximada */
}

/* Estilos para o menu horizontal de "Pricing" */
.pricing-menu {
  /* Não precisa de posicionamento especial */
}

.pricing-menu > a { /* Estilo para o link "Pricing" principal */
  /* Pode ter estilos diferentes se necessário */
}

.pricing-menu .horizontal-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Alinha os itens horizontalmente */
  align-items: center; /* Alinha verticalmente os itens (opcional) */
}

.pricing-menu .horizontal-menu li {
  margin-left: 15px; /* Espaçamento entre os itens de preço */
}

.pricing-menu .horizontal-menu li:first-child {
  margin-left: 10px; /* Ajuste da margem do primeiro item */
}

.pricing-menu .horizontal-menu li a {
  color: #333;
  padding: 8px 10px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.pricing-menu .horizontal-menu .icon {
  margin-right: 8px;
  font-size: 1em;
  color: #28a745; /* Cor verde aproximada para "Pricing" */
}

/* Estilos para o botão "Log in" (opcional) */
.login-button a {
  color: #007bff;
  border: 1px solid #007bff;
  border-radius: 5px;
  padding: 8px 12px;
}

/*.dropdown {
  position: relative; 
}*/

.dropdown {
position: fixed;
top: 30px;
left: 20px;
right: 20px;
height: 60px;
}

.dropdown-toggle {
  background-color: black; /* Cor rosa do botão */
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100px;
  justify-content: center;
}

.arrow-down {
  margin-left: 8px;
  font-size: 0.8em;
}

.dropdown-menu {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  position: absolute;
  top: calc(100% + 5px); /* Posiciona abaixo do botão com um pequeno espaço */
  left: 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none; /* Oculto por padrão */
  min-width: 150px; /* Largura mínima do menu dropdown */
}

.dropdown-menu li a {
  text-decoration: none;
  color: inherit; /* opcional: herda a cor do pai */
}


.dropdown.open .dropdown-menu {
  display: block; /* Exibe o menu quando a classe 'open' é adicionada ao dropdown */
}

.dropdown-menu li {
  padding: 8px 15px;
  display: flex;
  align-items: center;
  cursor: pointer; /* Indica que os itens são clicáveis */
}

.dropdown-menu li:hover {
  background-color: #f8f8f8; /* Cor de fundo ao passar o mouse */
}

.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.color-dot.orange {
  background-color: #ff9800; /* Laranja */
}

.color-dot.red {
  background-color: #e91e63; /* Rosa */
}

.color-dot.green {
  background-color: #4caf50; /* Verde */
}

.desktop { display: block; }
.mobile { display: none; }

@media (max-width: 768px) {
.desktop { display: none; }
.mobile { display: block; }
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre os elementos do formulário */
    width: 300px; /* Largura do formulário (ajuste conforme necessário) */
    padding: 20px;
}

input[type="text"],
input[type="password"] {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; /* Garante que padding e borda não aumentem a largura total */
	width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: #007bff; /* Cor de destaque ao focar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra suave ao focar */
}

input::placeholder {
    color: #999; /* Cor do placeholder */
    font-style: italic;
}

button[type="submit"] {
    background-color: #007bff; /* Cor primária do botão */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
}

button[type="submit"]:hover {
    background-color: #0056b3; /* Cor mais escura ao passar o mouse */
}

button[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra de foco para acessibilidade */
}

#pesquisa {
  padding: 8px;
  font-size: 20px;
  width: 100%;
  max-width: 400px;
  margin-bottom: 10px; /* Espaço entre a barra de pesquisa e os resultados */
}

#resultados {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
  display: none; /* Esconde os resultados até que a pesquisa comece */
}

.resultado-item {
  padding: 10px;
}

.resultado-item:not(:last-child) {
  margin-bottom: 10px; /* Espaço entre os resultados */
}

.resultado-item a {
  text-decoration: none;
}

.resultado-item a:hover {
  text-decoration: underline;
}

.resultado-item strong {
  font-size: 16px;
}

.resultado-item p {
  font-size: 14px;
}
.resultado-item:last-child {
  border-bottom: none;
}
.resultado-item:not(:last-child) {
  margin-bottom: 10px; /* Espaço entre os resultados */
  border-bottom: none; /* Remova a linha entre os itens */
}

img {
  width: 100%;
  /*height: auto;*/
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container-imagem-banner {
  height: 500px; /* ou qualquer valor fixo */
}

.imagem-principal {
  width: 100%;
  height: 100%;  
  border-radius: 0px;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}
.AAA_wrapper {
  background-color: #f7f7f7;
  padding: 4rem 2rem;
  max-width: 960px;
  margin: 0 auto;
  color: #2c3e50;
}

.AAA_title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  letter-spacing: 0.05rem;
}

.AAA_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.2rem;
}

.AAA_district {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.AAA_district:hover {
  background-color: #eef2f3;
  transform: scale(1.02);
}

.BBB_wrapper {
  background-color: #f5f6f7;
  padding: 4rem 2rem;
  max-width: 960px;
  margin: 0 auto;
  color: #2c3e50;
  line-height: 1.6;
}

.BBB_title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  letter-spacing: 0.05rem;
}

.BBB_section {
  margin-bottom: 2rem;
}

.BBB_subtitle {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.BBB_stat {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.BBB_sources {
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-top: 0.5rem;
}
.CCC_wrapper {
  background-color: #f4f6f8;
  padding: 4rem 2rem;
  max-width: 960px;
  margin: 0 auto;
  color: #2d3436;
}

.CCC_title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  letter-spacing: 0.03rem;
}

.CCC_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.CCC_city {
  background-color: #ffffff;
  border: 1px solid #dfe6e9;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
}

.CCC_city:hover {
  transform: translateY(-4px);
  background-color: #f0f2f3;
}

.CCC_city-name {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.CCC_population {
  font-size: 0.95rem;
  color: #636e72;
}

.CCC_sources {
  font-size: 0.85rem;
  text-align: center;
  color: #7f8c8d;
  margin-top: 2rem;
}
.DDD_wrapper {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7f9;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  color: #2c3e50;
}

.DDD_title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
}

.DDD_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.DDD_card {
  background-color: #ffffff;
  border: 1px solid #dfe6e9;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}

.DDD_card:hover {
  transform: translateY(-5px);
  background-color: #f1f2f6;
}

.DDD_place-name {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.DDD_location {
  font-size: 0.95rem;
  color: #636e72;
  margin-bottom: 0.5rem;
}

.DDD_description {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #34495e;
}
.EEE_stats-section {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #fcfcfc; /* Fundo muito claro para sensação clean */
	color: #333;
	padding: 60px 20px;
	text-align: center;
	overflow: hidden; /* Para garantir que as animações de entrada fiquem contidas */
}

.EEE_container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.EEE_stats-heading {
	font-size: 2.8em;
	color: #2c3e50; /* Um azul escuro suave */
	margin-bottom: 20px;
	position: relative;
	display: inline-block;
	font-weight: 300; /* Leve para o estilo zen */
}

.EEE_stats-heading::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	background-color: #4CAF50; /* Verde sereno */
	margin: 10px auto 0;
	border-radius: 5px;
}

.EEE_intro-text {
	font-size: 1.15em;
	line-height: 1.6;
	margin-bottom: 50px;
	color: #555;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.EEE_stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.EEE_stat-card {
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04); /* Sombra suave para profundidade */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.EEE_stat-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.EEE_card-icon {
	font-size: 2.5em;
	color: #4CAF50;
	margin-bottom: 15px;
	display: block;
}

.EEE_card-value {
	font-size: 2.6em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 10px;
	line-height: 1.1;
}

.EEE_card-description {
	font-size: 1em;
	color: #777;
	line-height: 1.5;
}

.EEE_market-section {
	margin-top: 80px;
	text-align: left;
	background-color: #f5f5f5;
	padding: 40px;
	border-radius: 12px;
	box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);
}

.EEE_market-heading {
	font-size: 2.2em;
	color: #2c3e50;
	margin-bottom: 25px;
	font-weight: 300;
	text-align: center;
}

.EEE_market-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.EEE_market-item {
	background-color: #e8f5e9; /* Um verde claro */
	color: #2c3e50;
	padding: 10px 20px;
	border-radius: 25px;
	font-size: 1em;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.3s ease;
}

.EEE_market-item:hover {
	background-color: #dcedc8; /* Um verde ligeiramente mais escuro */
}

.EEE_flag {
	font-size: 1.2em;
}

.EEE_disclaimer {
	font-size: 0.9em;
	color: #999;
	margin-top: 60px;
	line-height: 1.5;
	text-align: center;
}

/* Animações (opcional, para um toque extra de modernidade) */
@keyframes EEE_fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.EEE_stats-heading, .EEE_intro-text {
	animation: EEE_fadeInUp 0.8s ease-out forwards;
}
.EEE_stats-grid .EEE_stat-card {
	animation: EEE_fadeInUp 0.8s ease-out forwards;
	/* Adiciona um pequeno delay para cada cartão */
}
.EEE_stat-card:nth-child(1) { animation-delay: 0.2s; }
.EEE_stat-card:nth-child(2) { animation-delay: 0.3s; }
.EEE_stat-card:nth-child(3) { animation-delay: 0.4s; }
.EEE_stat-card:nth-child(4) { animation-delay: 0.5s; }
.EEE_stat-card:nth-child(5) { animation-delay: 0.6s; }
.EEE_stat-card:nth-child(6) { animation-delay: 0.7s; }
.EEE_market-section {
	animation: EEE_fadeInUp 0.8s ease-out forwards;
	animation-delay: 0.8s;
}
.EEE_disclaimer {
	animation: EEE_fadeInUp 0.8s ease-out forwards;
	animation-delay: 0.9s;
}


/* Responsividade */
@media (max-width: 768px) {
	.EEE_stats-heading {
		font-size: 2.2em;
	}
	.EEE_intro-text {
		font-size: 1em;
	}
	.EEE_stats-grid {
		grid-template-columns: 1fr; /* Uma coluna em telas menores */
	}
	.EEE_market-section {
		padding: 30px 15px;
	}
	.EEE_market-item {
		font-size: 0.9em;
		padding: 8px 15px;
	}
}

@media (max-width: 480px) {
	.EEE_stats-heading {
		font-size: 1.8em;
	}
	.EEE_card-value {
		font-size: 2em;
	}
}
:root {
  --iii-primary: #ffffff;
  --iii-secondary: #f0f0f0;
  --iii-accent: #4a90e2;
  --iii-text: #333;
  --UBB-primary: #ffffff;
  --UBB-secondary: #f0f0f0;
  --UBB-accent: #4a90e2;
  --UBB-text: #333;  
}


.botao-talk {
  background-color: #007bff; /* Cor rosa do botão */
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100px;
}



.III_botMessage, .III_userMessage {
  margin: 6px 0;
  padding: 10px;
  border-radius: 8px;
}

.III_botMessage {
  background: #e0e0e0;
  align-self: flex-start;
  white-space: pre-wrap;
}

.III_userMessage {
  background: #d0e6ff;
  align-self: flex-end;
}

.JJJ_container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 90%;
margin: 0 auto;
padding: 16px;
}

.JJJ_card {
background-color: #f8f8f8;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.1rem;
color: #333;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
padding: 10px;
text-align: center;
}

.JJJ_card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.JJJ_card:visited,
.JJJ_card:focus,
.JJJ_card:active {
text-decoration: none;
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
.JJJ_card {
aspect-ratio: auto;
height: auto;
padding: 20px;
}
}

/* Mais colunas em telas maiores */
@media (min-width: 768px) {
.JJJ_container {
grid-template-columns: repeat(5, 1fr);
}
}

:root {
  --LLL_bg: #f9f9f8;
  --LLL_text: #2c2c2c;
  --LLL_accent: #8bb8a8;
  --LLL_muted: #7a7a7a;
  --LLL_font: 'Helvetica Neue', sans-serif;
}

/*body.LLL_body {
  background: var(--LLL_bg);
  color: var(--LLL_text);
  font-family: var(--LLL_font);
  line-height: 1.7;
  padding: 4rem 1rem;
}*/

.LLL_container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.LLL_container h1,
.LLL_container h2,
.LLL_container h3 {
  font-weight: 500;
  margin-bottom: 1rem;
}

.LLL_container h1 {
  font-size: 2.4rem;
  color: var(--LLL_accent);
  margin-bottom: 2rem;
}

.LLL_container h2 {
  font-size: 1.6rem;
  color: var(--LLL_accent);
  margin-top: 3rem;
}

.LLL_container h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  color: var(--LLL_text);
}

.LLL_container p {
  margin-bottom: 1.5rem;
}

.LLL_list {
  margin-bottom: 2rem;
  padding-left: 1.5rem;
}

.LLL_list li {
  margin-bottom: 0.75rem;
  color: var(--LLL_muted);
}

@media (max-width: 600px) {
  body.LLL_body {
	padding: 2rem 1rem;
  }

  .LLL_container h1 {
	font-size: 1.8rem;
  }

  .LLL_container h2 {
	font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  button {
    width: 100%;
    height: 50px;
    font-size: 14px;
  }
}

.MMM_container {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.MMM_title {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.MMM_highlight {
  background-color: #e0f2f1;
  padding: 0.5rem 1rem;
  border-left: 4px solid #009688;
  margin: 1.5rem 0;
}

.MMM_section {
  margin-bottom: 2rem;
}

.MMM_row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .MMM_row {
	flex-direction: row;
  }

  .MMM_col {
	flex: 1;
  }
}

.MMM_cta {
  background-color: #009688;
  color: white;
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 500;
  margin-top: 2rem;
}

:root {
  --NNN_primary-color: #2c3e50;
  --NNN_secondary-color: #7f8c8d;
  --NNN_highlight-color: #2980b9;
  --NNN_background-color: #f9f9f9;
}

.NNN_container {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
}

.NNN_title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  color: var(--NNN_highlight-color);
}

.NNN_intro {
  font-size: 1rem;
  text-align: center;
  color: var(--NNN_secondary-color);
  margin-bottom: 40px;
}

.NNN_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.NNN_card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.NNN_card:hover {
  transform: translateY(-5px);
}

.NNN_card h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--NNN_highlight-color);
}

.NNN_card p {
  font-size: 0.95rem;
  color: var(--NNN_secondary-color);
}

@media (max-width: 600px) {
  .NNN_title {
	font-size: 1.5rem;
  }

  .NNN_intro {
	font-size: 0.95rem;
  }
}

.container-teste {
  display: flex;
  gap: 5px;
  padding: 20px;
  flex-wrap: wrap; /* Permite que os itens quebrem linha */
}

.item-teste {
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  flex: 1;
  box-sizing: border-box;
}

/* Estilo para telas menores (ex: celulares) */
@media (max-width: 768px) {
  .item-teste {
    width: 100%;
	flex: none;
  }
}
:root {
	--OOO_bg: #f9f9f9;
	--OOO_text: #333;
	--OOO_card: #ffffff;
	--OOO_border: #e0e0e0;
	--OOO_radius: 12px;
	--OOO_shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.OOO_container {
	max-width: 900px;
	margin: auto;
	padding: 20px;
}

.OOO_title {
	text-align: center;
	font-size: 24px;
	margin-bottom: 20px;
}

.OOO_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--OOO_card);
	border-radius: var(--OOO_radius);
	overflow: hidden;
	box-shadow: var(--OOO_shadow);
}

.OOO_table th,
.OOO_table td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid var(--OOO_border);
}

.OOO_table th {
	background: #f0f0f0;
}

@media (max-width: 768px) {
.OOO_table thead {
	display: none;
}

.OOO_table tr {
	display: block;
	margin-bottom: 15px;
	background: var(--OOO_card);
	border-radius: var(--OOO_radius);
	box-shadow: var(--OOO_shadow);
}

.OOO_table td {
	display: flex;
	justify-content: space-between;
	padding: 10px 15px;
	border-bottom: 1px solid var(--OOO_border);
}

.OOO_table td::before {
	content: attr(data-label);
	font-weight: bold;
	color: #666;
}

.OOO_table td:last-child {
	border-bottom: none;
}
}
.PPP_container {
  max-width: 800px;
  margin: 0 auto;
}

.PPP_post {
  padding: 2rem;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.PPP_post:hover {
  background-color: #fafafa;
}

.PPP_title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.PPP_date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 1rem;
  display: block;
}

.PPP_content {
  font-size: 1rem;
}

@media (max-width: 600px) {
  .PPP_title {
    font-size: 1.5rem;
  }
}

/* Container centralizado vertical e horizontalmente */
.QQQ_container {
  max-width: 600px;
  width: 100%;
  min-height: 80vh; /* para garantir espaço vertical */
  margin: auto; /* centraliza horizontalmente */
  background-color: #fafafa;  
  border-radius: 12px;
  /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);*/
  padding: 2rem;
  text-align: center;
  
  /* Flexbox para centralizar conteúdo verticalmente */
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* Tipografia */
.QQQ_title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #222;
}

.QQQ_text {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #555;
}

.QQQ_info {
  text-align: left;
  font-size: 1rem;
  color: #444;
  margin-bottom: 2rem;
}

.QQQ_info p {
  margin: 0.5rem 0;
}

.QQQ_link {
  color: #0077aa;
  text-decoration: none;
}

.QQQ_link:hover {
  text-decoration: underline;
}

.QQQ_quote {
  font-style: italic;
  color: #888;
  font-size: 1rem;
  margin-top: 2rem;
}

/* Responsividade */
@media (max-width: 480px) {
  .QQQ_container {
    padding: 1.5rem 1rem;
    min-height: auto; /* deixa a altura natural em telas pequenas */
  }

  .QQQ_title {
    font-size: 1.5rem;
  }

  .QQQ_text {
    font-size: 1rem;
  }

  .QQQ_info {
    font-size: 0.9rem;
  }

  .QQQ_quote {
    font-size: 0.9rem;
  }
}

.container-titulo-centraliza {
display: flex;
justify-content:center;
align-content: center;	
}

.container-titulo-centraliza-byellow {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  border-radius: 5px;
  padding: 0.3rem;
  box-sizing: border-box;
}

/* Adaptação para ecrãs pequenos (mobile) */
@media (max-width: 768px) {
  .container-titulo-centraliza-byellow {
    width: 90%;            /* Ocupa quase toda a largura disponível */
    flex-direction: column; /* Garante boa apresentação com vários elementos */
    font-size: 1rem;        /* Opcional: reduz o tamanho do texto */
  }
}

:root {
  --RRR-primary: #2c3e50;
  --RRR-accent: #3498db;
  --RRR-bg: #f9f9f9;
  --RRR-text: #333;
}

.RRR_container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.RRR_heading {
  text-align: center;
  color: var(--RRR-primary);
  margin-bottom: 2rem;
}

.RRR_city {
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e0e0e0;
}

.RRR_city h3 {
  margin-bottom: 0.5rem;
  color: var(--RRR-accent);
}

.RRR_city p {
  margin: 0;
}

.RRR_footer {
text-align: center;
margin-top: 3rem;
font-style: italic;
color: #888;
}
:root {
  --SSS-primary: #1a2b3c;
  --SSS-accent: #2e86ab;
  --SSS-bg: #f5f7f8;
  --SSS-text: #2c2c2c;
}

.SSS_wrapper {
  max-width: 820px;
  margin: auto;
  padding: 2.5rem 1.5rem;
}

.SSS_heading {
  text-align: center;
  font-size: 2rem;
  color: var(--SSS-primary);
  margin-bottom: 2.5rem;
}

.SSS_museum {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
}

.SSS_museum h3 {
  color: var(--SSS-accent);
  margin-bottom: 0.5rem;
}

.SSS_museum p {
  margin: 0;
}

.SSS_footer {
  text-align: center;
  margin-top: 3rem;
  font-style: italic;
  color: #777;
}
/* TTT_style.css */

:root {
    --TTT_primary-color: #4CAF50; /* Um verde suave para um toque zen */
    --TTT_secondary-color: #607D8B; /* Cinza azulado para contraste */
    --TTT_background-light: #F9F9F9;
    --TTT_background-dark: #FFFFFF;
    --TTT_text-color: #333333;
    --TTT_border-color: #EEEEEE;
    --TTT_shadow-light: rgba(0, 0, 0, 0.05);
}

/* TTT_style.css */

:root {
    --TTT_primary-color: #5B7C99; /* A calming blue for a zen touch, replacing green */
    --TTT_secondary-color: #8C9CAE; /* A slightly lighter blue-gray for contrast */
    --TTT_background-light: #F9F9F9;
    --TTT_background-dark: #FFFFFF;
    --TTT_text-color: #333333;
    --TTT_border-color: #EEEEEE;
    --TTT_shadow-light: rgba(0, 0, 0, 0.05);
}

.TTT_container {
    width: 90%;
    max-width: 1200px;
    background-color: var(--TTT_background-dark);
    padding: 30px;
    border-radius: 8px;
    /*box-shadow: 0 4px 15px var(--TTT_shadow-light);*/
    text-align: center;
}

.TTT_header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--TTT_border-color);
}

.TTT_h1 {
    font-size: 2.8em;
    color: var(--TTT_primary-color);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.TTT_p_intro {
    font-size: 1.1em;
    color: var(--TTT_secondary-color);
}

.TTT_category-section {
    margin-bottom: 40px;
    text-align: left;
}

.TTT_h2 {
    font-size: 2em;
    color: var(--TTT_primary-color);
    border-bottom: 2px solid var(--TTT_primary-color);
    padding-bottom: 10px;
    margin-bottom: 30px;
    display: inline-block;
}

.TTT_event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.TTT_event-card {
    background-color: #FFFFFF;
    border: 1px solid var(--TTT_border-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px var(--TTT_shadow-light);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.TTT_event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.TTT_event-title {
    font-size: 1.5em;
    color: var(--TTT_primary-color);
    margin-bottom: 10px;
    font-weight: 600;
}

.TTT_event-detail {
    font-size: 0.95em;
    margin-bottom: 5px;
    color: var(--TTT_text-color);
}

.TTT_event-detail strong {
    color: var(--TTT_secondary-color);
    margin-right: 5px;
}

.TTT_event-description {
    font-size: 0.9em;
    color: #666666;
    margin-top: 15px;
    line-height: 1.5;
    flex-grow: 1; /* Allows the description to take up available space */
}

/* Responsiveness */
@media (max-width: 768px) {
    .TTT_body {
        padding: 15px;
    }

    .TTT_container {
        padding: 20px;
    }

    .TTT_h1 {
        font-size: 2.2em;
    }

    .TTT_h2 {
        font-size: 1.7em;
    }

    .TTT_event-grid {
        grid-template-columns: 1fr;
    }
}

:root {
    --UUU_color-primary: #8B4513; /* Soft earthy brown */
    --UUU_color-secondary: #D2B48C; /* Beige/sand tone */
    --UUU_color-text: #333;
    --UUU_color-light-bg: #F8F8F8;
    --UUU_color-white: #FFFFFF;
    --UUU_color-grey-text: #666;
    --UUU_font-serif: 'Playfair Display', serif;
    --UUU_font-sans-serif: 'Lato', sans-serif;
    --UUU_padding-section: 60px;
    --UUU_max-width-content: 1000px;
    --UUU_border-radius: 4px;
}

/* UUU_Container Global */
.UUU_container {
    max-width: var(--UUU_max-width-content);
    margin: 0 auto;
    padding: 0 20px;
}

/* UUU_Header */
.UUU_header {
    background-color: var(--UUU_color-white);
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.UUU_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--UUU_max-width-content);
    margin: 0 auto;
    padding: 0 20px;
}

.UUU_logo {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--UUU_color-primary);
    text-decoration: none;
}

.UUU_nav-list {
    list-style: none;
    display: flex;
    gap: 30px;
}

.UUU_nav-link {
    text-decoration: none;
    color: var(--UUU_color-text);
    font-weight: 400;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}

.UUU_nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--UUU_color-primary);
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.UUU_nav-link:hover {
    color: var(--UUU_color-primary);
}

.UUU_nav-link:hover::after {
    width: 100%;
}

/* UUU_Main Content */
.UUU_main-content {
    overflow-x: hidden; /* Prevents unwanted horizontal scroll */
}

/* UUU_Hero Section */
.UUU_hero-section {
    position: relative;
    /*height: 600px; /* Adjustable */
    background-image: url('https://source.unsplash.com/random/1600x900/?portugal-culture-fado'); /* Random cultural image, replace with your own */
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: black;
}

/*.UUU_hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #f8f8f8;	
}*/

.UUU_hero-content {
    position: relative;
    z-index: -1;
    padding: 20px;
    max-width: 800px;
}

.UUU_hero-title {
    font-size: 3.5em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.UUU_hero-subtitle {
    font-size: 1.3em;
    margin-bottom: 30px;
    font-weight: 300;
}

/* UUU_Buttons */
.UUU_button {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--UUU_border-radius);
    text-decoration: none;
    font-weight: 700;
}

.UUU_button-primary {
    background-color: var(--UUU_color-primary);
    color: var(--UUU_color-white);
    border: 2px solid var(--UUU_color-primary);
}


.UUU_button-secondary {
    background-color: transparent;
    color: var(--UUU_color-white);
    border: 2px solid var(--UUU_color-white);
}


/* UUU_Sections General */
.UUU_section-padding {
    padding: var(--UUU_padding-section) 0;
}

.UUU_bg-light {
    background-color: var(--UUU_color-light-bg);
}

.UUU_section-title {
    font-size: 2.5em;
    color: var(--UUU_color-primary);
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.UUU_section-title::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: var(--UUU_color-secondary);
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
}

.UUU_section-text {
    font-size: 1.1em;
    color: var(--UUU_color-grey-text);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 20px auto;
}

/* UUU_Intro Section specific styling */
.UUU_intro-text {
    font-size: 1.2em; /* Slightly larger text for the intro */
    line-height: 1.8;
    margin-bottom: 25px;
    color: var(--UUU_color-text);
}

/* UUU_Habits Section */
.UUU_habits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust columns for more items */
    gap: 30px;
    margin-top: 50px;
}

.UUU_habit-item {
    background-color: var(--UUU_color-white);
    padding: 30px;
    border-radius: var(--UUU_border-radius);
}

.UUU_habit-title {
    font-size: 1.6em;
    color: var(--UUU_color-primary);
    margin-bottom: 15px;
}

.UUU_habit-description {
    color: var(--UUU_color-grey-text);
    font-size: 0.95em;
}


/* UUU_Features Section (Cultural Experiences) */
.UUU_features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.UUU_feature-item {
    background-color: var(--UUU_color-white);
    padding: 30px;
    border-radius: var(--UUU_border-radius);
    text-align: center;
}

.UUU_feature-icon {
    font-size: 3em;
    margin-bottom: 20px;
    display: block;
}

.UUU_feature-title {
    font-size: 1.5em;
    color: var(--UUU_color-primary);
    margin-bottom: 15px;
}

.UUU_feature-description {
    color: var(--UUU_color-grey-text);
    font-size: 0.95em;
}

/* UUU_CTA Section */
.UUU_cta-section {
    background-color: var(--UUU_color-primary);
    color: var(--UUU_color-white);
}

.UUU_cta-title {
    font-size: 2.8em;
    margin-bottom: 20px;
}

.UUU_cta-text {
    font-size: 1.2em;
    margin-bottom: 40px;
    font-weight: 300;
}

/* UUU_Text Utilities */
.UUU_text-center {
    text-align: center;
}

/* UUU_Footer */
.UUU_footer {
    background-color: var(--UUU_color-text);
    color: var(--UUU_color-white);
    padding: 30px 0;
    font-size: 0.9em;
}

.UUU_footer-text {
    margin-bottom: 15px;
}

.UUU_social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.UUU_social-icon {
    color: var(--UUU_color-white);
    text-decoration: none;
    font-size: 1.2em;
    border: 1px solid var(--UUU_color-white);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.UUU_social-icon:hover {
    background-color: var(--UUU_color-white);
    color: var(--UUU_color-text);
}

/* UUU_Responsiveness */
@media (max-width: 768px) {
    .UUU_nav {
        flex-direction: column;
        gap: 20px;
    }

    .UUU_nav-list {
        flex-direction: column;
        gap: 15px;
    }

    .UUU_hero-title {
        font-size: 2.5em;
    }

    .UUU_hero-subtitle {
        font-size: 1.1em;
    }

    .UUU_section-title {
        font-size: 2em;
    }

    .UUU_habits-grid,
    .UUU_features-grid {
        grid-template-columns: 1fr;
    }

    .UUU_habit-item,
    .UUU_feature-item {
        margin: 0 20px; /* Add some side padding on mobile */
    }

    .UUU_cta-title {
        font-size: 2.2em;
    }
}

@media (max-width: 480px) {
    .UUU_hero-title {
        font-size: 2em;
    }

    .UUU_hero-subtitle {
        font-size: 1em;
    }

    .UUU_button {
        padding: 10px 20px;
    }

    .UUU_section-padding {
        padding: 40px 0;
    }

    .UUU_section-title {
        font-size: 1.8em;
    }
}

/* VVV_Reset and Variables */
:root {
    --VVV_color-primary: #006699; /* Deep Ocean Blue */
    --VVV_color-secondary: #66CCCC; /* Aqua/Light Blue */
    --VVV_color-text: #333;
    --VVV_color-light-bg: #F0F8FF; /* Off-white, subtle blue tint */
    --VVV_color-white: #FFFFFF;
    --VVV_color-grey-text: #555;
    --VVV_font-serif: 'Playfair Display', serif;
    --VVV_font-sans-serif: 'Lato', sans-serif;
    --VVV_padding-section: 60px;
    --VVV_max-width-content: 1000px;
    --VVV_border-radius: 4px;
}


/* VVV_Container Global */
.VVV_container {
    max-width: var(--VVV_max-width-content);
    margin: 0 auto;
    padding: 0 20px;
}

/* VVV_Section General */
.VVV_section-padding {
    padding: var(--VVV_padding-section) 0;
}

.VVV_water-sports-section {
    background-color: var(--VVV_color-white); /* Main background */
}

/* VVV_Titles */
.VVV_section-main-title {
    font-size: 3em;
    color: var(--VVV_color-primary);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.2;
}

.VVV_section-title {
    font-size: 2.2em;
    color: var(--VVV_color-primary);
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
    /*position: relative;*/
}

.VVV_section-title::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: var(--VVV_color-secondary);
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
}

/* VVV_Text Styles */
.VVV_intro-text {
    font-size: 1.2em;
    line-height: 1.8;
    color: var(--VVV_color-text);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.VVV_section-text {
    font-size: 1.1em;
    color: var(--VVV_color-grey-text);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 20px auto;
}

.VVV_final-cta {
    margin-bottom: 25px; /* Add more space before the last line if desired */
}

/* VVV_Activities Grid */
.VVV_activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.VVV_activity-item {
    background-color: var(--VVV_color-light-bg); /* Lighter background for activity cards */
    padding: 30px;
    border-radius: var(--VVV_border-radius);
}


.VVV_activity-title {
    font-size: 1.5em;
    color: var(--VVV_color-primary);
    margin-bottom: 15px;
}

.VVV_activity-description {
    color: var(--VVV_color-grey-text);
    font-size: 0.95em;
}

/* VVV_Responsiveness */
@media (max-width: 768px) {
    .VVV_section-main-title {
        font-size: 2.5em;
    }

    .VVV_section-title {
        font-size: 1.8em;
    }

    .VVV_intro-text {
        font-size: 1.1em;
    }

    .VVV_activities-grid {
        grid-template-columns: 1fr;
    }

    .VVV_activity-item {
        margin: 0 15px; /* Add some side padding on mobile */
    }

    .VVV_section-padding {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .VVV_section-main-title {
        font-size: 2em;
    }

    .VVV_section-title {
        font-size: 1.6em;
    }

    .VVV_section-text {
        font-size: 1em;
    }

    .VVV_activity-title {
        font-size: 1.3em;
    }

    .VVV_activity-description {
        font-size: 0.9em;
    }
}

.XXX_container {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1.5rem;
line-height: 1.7;
}

.XXX_title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
color: #1f1f1f;
text-align: center;
}

.XXX_section {
margin-bottom: 2rem;
}

.XXX_section h2 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #3a3a3a;
border-left: 3px solid #d0d0d0;
padding-left: 0.5rem;
}

.XXX_section p,
.XXX_section ul {
font-size: 1rem;
margin: 0.5rem 0;
color: #444;
}

.XXX_section ul {
padding-left: 1.5rem;
list-style: disc;
}

.XXX_footer {
text-align: center;
font-size: 0.9rem;
color: #999;
margin-top: 3rem;
}

@media (max-width: 600px) {
.XXX_title {
font-size: 1.5rem;
}

.XXX_section h2 {
font-size: 1.1rem;
}
}


.ZZZ_wrapper {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.ZZZ_title {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2rem;
  color: #1c1c1c;
}

.ZZZ_section {
  margin-bottom: 2.5rem;
}

.ZZZ_section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: #333;
  border-left: 4px solid #e2e2e2;
  padding-left: 0.6rem;
}

.ZZZ_section p,
.ZZZ_section ul {
  font-size: 1rem;
  color: #444;
  margin: 0.4rem 0 1rem;
}

.ZZZ_section ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.ZZZ_highlight {
  font-weight: 600;
  color: #000;
}

.ZZZ_footer {
  font-size: 0.9rem;
  color: #888;
  text-align: center;
  margin-top: 3rem;
}

@media (max-width: 600px) {
  .ZZZ_title {
	font-size: 1.5rem;
  }

  .ZZZ_section h2 {
	font-size: 1.1rem;
  }
}

.ABB_wrapper {
max-width: 880px;
margin: 0 auto;
padding: 2rem 1.5rem;
}

.ABB_title {
font-size: 2rem;
font-weight: 600;
text-align: center;
margin-bottom: 2rem;
color: #1f1f1f;
}

.ABB_section {
margin-bottom: 2.5rem;
}

.ABB_section h2 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #333;
border-left: 4px solid #e2e2e2;
padding-left: 0.6rem;
}

.ABB_section p,
.ABB_section ul {
font-size: 1rem;
color: #444;
margin: 0.4rem 0 1rem;
line-height: 1.6;
}

.ABB_section ul {
padding-left: 1.5rem;
list-style: disc;
}

.ABB_highlight {
font-weight: 600;
color: #111;
}

.ABB_footer {
font-size: 0.9rem;
color: #999;
text-align: center;
margin-top: 3rem;
}

@media (max-width: 600px) {
.ABB_title {
font-size: 1.6rem;
}

.ABB_section h2 {
font-size: 1.1rem;
}
}
:root {
  --DBB-bg: #f5f7fa;
  --DBB-card: #ffffff;
  --DBB-primary: #6b4fa0;
  --DBB-text: #2d2d2d;
  --DBB-muted: #777;
  --DBB-accent: #e1dbf3;
  --DBB-radius: 14px;
}

.DBB_wrapper {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.DBB_title {
  text-align: center;
  font-size: 2.4rem;
  color: var(--DBB-primary);
  margin-bottom: 50px;
  letter-spacing: 0.5px;
}

.DBB_card {
  background: var(--DBB-card);
  border-radius: var(--DBB-radius);
  padding: 30px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.DBB_card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background-color: var(--DBB-primary);
  border-top-left-radius: var(--DBB-radius);
  border-bottom-left-radius: var(--DBB-radius);
}

.DBB_card h2 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: var(--DBB-primary);
}

.DBB_card p,
.DBB_card ul {
  margin: 0 0 15px 0;
}

.DBB_card ul {
  padding-left: 20px;
  list-style-type: disc;
}

.DBB_highlight {
  background-color: var(--DBB-accent);
  border-left: 4px solid var(--DBB-primary);
  padding: 20px;
  border-radius: var(--DBB-radius);
  margin-top: 20px;
  font-weight: 500;
}

.DBB_link {
  color: var(--DBB-primary);
  text-decoration: none;
}

.DBB_link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .DBB_card {
	padding: 20px;
  }

  .DBB_title {
	font-size: 1.8rem;
  }

  .DBB_card h2 {
	font-size: 1.2rem;
  }
}

:root {
  --EBB-bg: #f8f9fa;
  --EBB-card: #ffffff;
  --EBB-accent: #e2ecf4;
  --EBB-border: #dee2e6;
  --EBB-text: #2f2f2f;
  --EBB-muted: #666;
  --EBB-primary: #4e6e81;
  --EBB-radius: 14px;
}

.EBB_wrapper {
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px;
}

.EBB_title {
  text-align: center;
  font-size: 2.2rem;
  color: var(--EBB-primary);
  margin-bottom: 40px;
}

.EBB_card {
  background-color: var(--EBB-card);
  border-radius: var(--EBB-radius);
  padding: 30px;
  margin-bottom: 30px;
  border-left: 6px solid var(--EBB-primary);
}

.EBB_card h2 {
  font-size: 1.4rem;
  color: var(--EBB-primary);
  margin-top: 0;
}

.EBB_card ul {
  padding-left: 20px;
}

.EBB_infoBox {
  background-color: var(--EBB-accent);
  padding: 20px;
  border-radius: var(--EBB-radius);
  margin-top: 20px;
  border-left: 4px solid var(--EBB-primary);
}

.EBB_table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.95rem;
}

.EBB_table th, .EBB_table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--EBB-border);
  text-align: left;
}

.EBB_table th {
  background-color: var(--EBB-accent);
  color: var(--EBB-primary);
}

.EBB_link {
  color: var(--EBB-primary);
  text-decoration: none;
}

.EBB_link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .EBB_wrapper {
	padding: 10px;
  }

  .EBB_card {
	padding: 20px;
  }

  .EBB_title {
	font-size: 1.6rem;
  }

  .EBB_card h2 {
	font-size: 1.2rem;
  }
}

:root {
  --FBB-bg: #fdfdfd;
  --FBB-primary: #3a4d39;
  --FBB-secondary: #6b9080;
  --FBB-card: #ffffff;
  --FBB-border: #e0e0e0;
  --FBB-muted: #888;
  --FBB-radius: 14px;
  --FBB-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.FBB_container {
  max-width: 1100px;
  margin: 60px auto;
  padding: 20px;
}

.FBB_heading {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: var(--FBB-primary);
}

.FBB_card {
  background: var(--FBB-card);
  border-radius: var(--FBB-radius);
  padding: 30px;
  margin-bottom: 30px;
  border-left: 6px solid var(--FBB-secondary);
}

.FBB_card h2 {
  margin-top: 0;
  font-size: 1.4rem;
  color: var(--FBB-secondary);
}

.FBB_card p, .FBB_card ul {
  margin: 15px 0;
}

.FBB_card ul {
  padding-left: 20px;
}

.FBB_tip {
  background-color: #f0f5f3;
  padding: 15px 20px;
  border-radius: var(--FBB-radius);
  border-left: 4px solid var(--FBB-secondary);
  color: var(--FBB-muted);
  font-size: 0.95rem;
}

.FBB_sectionTitle {
  font-size: 1.8rem;
  margin-top: 60px;
  margin-bottom: 20px;
  text-align: center;
  color: var(--FBB-secondary);
}

@media (max-width: 700px) {
  .FBB_heading {
	font-size: 1.8rem;
  }

  .FBB_card {
	padding: 20px;
  }

  .FBB_sectionTitle {
	font-size: 1.4rem;
  }
}

.GBB_container {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}

.GBB_header {
text-align: center;
margin-bottom: 40px;
}

.GBB_header h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: #2c3e50;
}

.GBB_intro {
text-align: center;
max-width: 800px;
margin: 0 auto 30px;
font-size: 1.1rem;
color: #555;
}

.GBB_card_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}

.GBB_card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.GBB_card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.GBB_card h2 {
font-size: 1.25rem;
margin-bottom: 8px;
color: #34495e;
}

.GBB_card p {
font-size: 0.95rem;
line-height: 1.5;
color: #555;
}

.GBB_tips {
background: #ffffff;
padding: 24px;
margin-top: 40px;
border-left: 4px solid #8e44ad;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.GBB_tips h3 {
margin-top: 0;
color: #8e44ad;
}

.GBB_footer {
text-align: center;
margin-top: 60px;
font-size: 0.9rem;
color: #888;
}

@media (max-width: 600px) {
.GBB_header h1 {
font-size: 1.5rem;
}
}

:root {
--hbb-bg: #f9f9f7;
--hbb-card: #ffffff;
--hbb-text: #333;
--hbb-accent: #3a7c7c;
--hbb-muted: #888;
--hbb-border: #e6e6e6;
}

.HBB_container {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}

.HBB_header {
text-align: center;
margin-bottom: 40px;
}

.HBB_header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
color: var(--hbb-accent);
}

.HBB_intro {
text-align: center;
color: var(--hbb-muted);
font-size: 1.1rem;
margin-bottom: 50px;
}

.HBB_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.HBB_card {
background-color: var(--hbb-card);
border: 1px solid var(--hbb-border);
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 8px rgba(0,0,0,0.04);
transition: transform 0.2s ease;
}

.HBB_card:hover {
transform: translateY(-5px);
}

.HBB_card h2 {
font-size: 1.4rem;
margin-top: 0;
color: var(--hbb-accent);
}

.HBB_card p {
font-size: 1rem;
line-height: 1.6;
}

.HBB_tips {
background-color: var(--hbb-card);
border-left: 4px solid var(--hbb-accent);
padding: 20px;
margin-top: 60px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.HBB_tips h3 {
margin-top: 0;
color: var(--hbb-accent);
}

.HBB_footer {
text-align: center;
color: var(--hbb-muted);
font-size: 0.9rem;
margin-top: 80px;
}

@media (max-width: 600px) {
.HBB_header h1 {
font-size: 2rem;
}

.HBB_intro {
font-size: 1rem;
}
}

:root {
--ibb-bg: #f9f9f7;
--ibb-text: #333;
--ibb-muted: #aaa;
--ibb-highlight: #2c7a7b;
--ibb-card-bg: #fff;
--ibb-border: #e0e0e0;
}

.IBB_search_wrapper {
display: flex;
justify-content:center;
align-content: center;
}

.IBB_search_input {
width: 100%;
max-width: 500px;
padding: 14px 18px;
font-size: 1rem;
border: 1px solid var(--ibb-border);
border-radius: 12px;
background-color: var(--ibb-card-bg);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
outline: none;
transition: border-color 0.3s ease;
}

.IBB_search_input:focus {
border-color: var(--ibb-highlight);
}

.IBB_container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}

.IBB_card {
text-decoration: none;
background-color: var(--ibb-card-bg);
padding: 20px;
border-radius: 14px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
color: var(--ibb-text);
border: 1px solid var(--ibb-border);
transition: transform 0.2s ease, box-shadow 0.2s ease;
font-weight: 500;
text-align: center;
}

.IBB_card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
color: var(--ibb-highlight);
}

@media (max-width: 600px) {
.IBB_card {
padding: 16px;
font-size: 0.95rem;
}
}

.banner {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
border-radius: 5px;
/*background: #000;*/
background: #ddd url('imagens/portugal_banner_1.jpeg') center center / cover no-repeat;
}

.banner img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
border-radius: 12px;
border-radius: 5px;
}

.banner img.active {
opacity: 1;
z-index: 0;
}

.JJJ_container-block {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.JJJ_container-block > * {
  flex: 1 1 calc(20% - 12.8px); /* 20% da largura menos metade do gap (16px / 2 = 8px * 1.6) */
  box-sizing: border-box;
  min-width: 0; /* Evita overflow */
}

/* Mobile: 2 cards por linha */
@media (max-width: 768px) {
  .JJJ_container-block > * {
    flex: 1 1 calc(50% - 8px); /* 50% da largura menos metade do gap */
  }
}

.JJJ_card-block {
  background-color: #f8f8f8;
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;  
  font-size: 1rem;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  padding: 10px;
  min-height: 150px; /* altura controlada */
}
.JBB_container {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
}

.JBB_header {
text-align: center;
font-size: 2rem;
font-weight: bold;
margin-bottom: 40px;
color: #3b5742;
}

.JBB_grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}

.JBB_card {
background-color: #fff;
border-radius: 20px;
padding: 25px 30px;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.JBB_card:hover {
transform: translateY(-4px);
}

.JBB_card h2 {
margin-top: 0;
font-size: 1.3rem;
color: #406650;
}

.JBB_card p, .JBB_card ul {
margin: 10px 0;
font-size: 1rem;
}

.JBB_card ul {
padding-left: 20px;
list-style: disc;
}

.JBB_icon {
font-size: 1.3rem;
margin-right: 8px;
}

.JBB_fullwidth_card {
grid-column: span 2;
}

.JBB_footer {
margin-top: 50px;
text-align: center;
font-size: 0.9rem;
color: #666;
padding-top: 30px;
border-top: 1px solid #d9e2da;
}

@media (max-width: 768px) {
.JBB_grid {
grid-template-columns: 1fr;
}

.JBB_fullwidth_card {
grid-column: span 1;
}
}

.LBB_container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

.LBB_card {
background-color: #fff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
padding: 30px;
margin-bottom: 30px;
transition: box-shadow 0.3s ease;
}

.LBB_card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.LBB_title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 10px;
color: #222;
}

.LBB_icon {
font-size: 1.4rem;
margin-right: 8px;
}

.LBB_sectionTitle {
font-size: 1.4rem;
font-weight: 500;
margin-top: 30px;
margin-bottom: 15px;
color: #444;
}

.LBB_list {
list-style: none;
padding: 0;
margin: 0;
}

.LBB_list li::before {
content: "✔️";
margin-right: 8px;
}

.LBB_contact {
background: #eef2f0;
padding: 20px;
border-radius: 12px;
font-size: 0.95rem;
text-align: center;
}

.LBB_link {
color: #0c6b58;
text-decoration: none;
font-weight: 500;
}

.LBB_link:hover {
text-decoration: underline;
}

:root {
--mbb-bg: #f5f7f6;
--mbb-white: #ffffffcc;
--mbb-primary: #1c605b;
--mbb-accent: #3e8e7e;
--mbb-font: 'Helvetica Neue', sans-serif;
}

.MBB_wrapper {
max-width: 900px;
margin: auto;
}

.MBB_block {
background: var(--mbb-white);
border-radius: 20px;
padding: 30px 25px;
margin-bottom: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(4px);
}

.MBB_heading {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 15px;
color: var(--mbb-primary);
}

.MBB_subheading {
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 10px;
color: var(--mbb-accent);
}

.MBB_icon {
font-size: 1.3rem;
margin-right: 8px;
}

.MBB_list {
list-style: none;
padding-left: 0;
margin-top: 10px;
}

.MBB_list li::before {
content: "✓";
color: var(--mbb-accent);
margin-right: 8px;
}

.MBB_footer {
text-align: center;
font-size: 0.95rem;
background-color: #e2f0eb;
border-radius: 16px;
padding: 20px;
color: #2a2a2a;
}

.MBB_link {
color: var(--mbb-primary);
text-decoration: none;
font-weight: 500;
}

.MBB_link:hover {
text-decoration: underline;
}

@media (max-width: 600px) {
.MBB_heading {
font-size: 1.5rem;
}

.MBB_subheading {
font-size: 1.1rem;
}
}

:root {
--nbb-bg: #f6f9f8;
--nbb-white: #ffffff;
--nbb-accent: #dff1ed;
--nbb-highlight: #b5e3d8;
--nbb-dark: #1e2e2e;
--nbb-primary: #247c6e;
--nbb-font: 'Segoe UI', sans-serif;
}

.NBB_container {
max-width: 1000px;
margin: auto;
}

.NBB_section {
background: var(--nbb-white);
border-left: 6px solid var(--nbb-primary);
border-radius: 10px;
padding: 30px 25px;
margin-bottom: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.NBB_alt {
border-left-color: var(--nbb-highlight);
background: var(--nbb-accent);
}

.NBB_title {
font-size: 1.9rem;
font-weight: 600;
color: var(--nbb-primary);
margin-bottom: 15px;
}

.NBB_subtitle {
font-size: 1.4rem;
font-weight: 500;
margin: 20px 0 10px;
color: #2f4f4f;
}

.NBB_list {
margin: 0;
padding-left: 20px;
}

.NBB_list li {
margin-bottom: 8px;
}

.NBB_languages {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-weight: 500;
margin-top: 10px;
}

.NBB_lang {
background: var(--nbb-highlight);
color: #1e1e1e;
padding: 6px 12px;
border-radius: 12px;
font-size: 0.9rem;
}

.NBB_footer {
text-align: center;
font-size: 1rem;
margin-top: 40px;
color: var(--nbb-dark);
}

.NBB_link {
color: var(--nbb-primary);
text-decoration: none;
font-weight: 600;
}

.NBB_link:hover {
text-decoration: underline;
}

@media (max-width: 600px) {
.NBB_title {
font-size: 1.5rem;
}

.NBB_subtitle {
font-size: 1.2rem;
}
}

:root {
    --OBB_primary-bg: #fdfdfd; /* Fundo muito claro, quase branco */
    --OBB_text-color: #333; /* Texto escuro para contraste */
    --OBB_accent-color: #79867C; /* Verde acinzentado suave para detalhes */
    --OBB_light-grey: #e8e8e8; /* Cinzento claro para bordas e separadores */
}

/*.OBB_podcast-container {
    max-width: 800px;
    width: 100%;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
}*/

/*.OBB_header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--OBB_light-grey);
}*/

.OBB_title {
    font-family: var(--OBB_font-heading);
    font-size: 2.8em;
    color: var(--OBB_accent-color);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.OBB_tagline {
    font-size: 1.1em;
    color: #666;
    font-style: italic;
}

.OBB_episode-card {
    background-color: var(--OBB_primary-bg);
    border: 1px solid var(--OBB_light-grey);
    border-radius: 6px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.OBB_episode-title {
    font-family: var(--OBB_font-heading);
    font-size: 1.8em;
    color: var(--OBB_text-color);
    margin-top: 0;
    margin-bottom: 20px;
}

.OBB_audio-player {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 25px auto;
    display: block;
    outline: none;
}

/* Estilização para o player de áudio nativo (funcionalidade limitada entre browsers) */
.OBB_audio-player::-webkit-media-controls-panel {
    background-color: var(--OBB_accent-color);
    border-radius: 5px;
}

.OBB_audio-player::-webkit-media-controls-play-button,
.OBB_audio-player::-webkit-media-controls-current-time-display,
.OBB_audio-player::-webkit-media-controls-time-remaining-display,
.OBB_audio-player::-webkit-media-controls-timeline,
.OBB_audio-player::-webkit-media-controls-volume-slider {
    color: #fff;
}

.OBB_description {
font-size: 1em;
color: #555;
margin-bottom: 25px;
text-align: justify;
}

.OBB_download-link {
display: inline-block;
background-color: var(--OBB_accent-color);
color: #fff;
padding: 12px 25px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
border: none;
}

.OBB_download-link:hover {
background-color: #5F6B62;
}

.OBB_footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--OBB_light-grey);
font-size: 0.9em;
color: #777;
}

/* Responsividade Básica com prefixo OBB_ */
@media (max-width: 768px) {
.OBB_podcast-container {
padding: 25px;
}

.OBB_title {
font-size: 2.2em;
}

.OBB_episode-title {
font-size: 1.5em;
}
}

@media (max-width: 480px) {
body {
padding: 0px;
}

.OBB_podcast-container {
padding: 15px;
}

.OBB_title {
font-size: 1.8em;
}

.OBB_tagline {
font-size: 0.9em;
}

.OBB_episode-card {
padding: 20px;
}

.OBB_episode-title {
font-size: 1.3em;
}

.OBB_download-link {
padding: 10px 20px;
font-size: 0.9em;
}
}

.container-podcast {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	background-color: white; /* Um cinza azulado muito claro */
	color: #334e68; /* Azul escuro suave para o texto */
	overflow: hidden;
	position: relative;
}

.container-podcast-interno {
	background-color: #f0f4f8;
	padding: 40px;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: center;
	max-width: 400px;
	width: 90%;
	transition: transform 0.3s ease-in-out;
}

p.description {
	font-size: 1em;
	color: #7b8e9e;
	margin-bottom: 30px;
	line-height: 1.6;
}

audio {
	width: 100%;
	max-width: 300px;
	margin-top: 20px;
	outline: none;
	border-radius: 5px;
	/* Estilos para o player de áudio nativo */
	-webkit-appearance: none; /* Para browsers WebKit */
	background-color: #e2e8f0; /* Fundo do player */
	padding: 8px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Estilos específicos para o controlo de volume e progresso - opcional, dependendo do browser */
audio::-webkit-media-controls-panel {
	background-color: #ffffff;
	border-radius: 5px;
	box-shadow: none;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider {
	color: #5b799e; /* Cor dos ícones e texto */
}

.container-podcast-central {
margin: 0;
display: flex;
justify-content: center; /* centraliza horizontalmente */
align-items: center;     /* centraliza verticalmente */
}

.podcast-button {
display: inline-block;
background-color: #1db954; /* Spotify green */
color: white;
font-size: 16px;
font-weight: 600;
padding: 12px 20px;
border: none;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease, transform 0.2s ease;
}

.podcast-button:hover {
background-color: #17a44f;
transform: translateY(-2px);
}

.podcast-button:before {
content: "🔊 ";
font-size: 18px;
vertical-align: middle;
}

.container-footer-menu {
	display:flex;
	align-content: center;
	justify-content: center;
	margin: 10px;
}

.footer-menu ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-menu ul li {
display: inline;
margin: 0 10px;
}

.footer-menu ul li a {
color: black;
text-decoration: none;
}

.footer-menu ul li a:hover {
text-decoration: underline;
}
.container-texto-privacy {
background-color: #f8f8f8;	
border-radius: 5px;
padding: 20px;
margin: 20px;
}

.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
display: none;
/* Oculto inicialmente */
}

.cookie-banner.visible {
display: block;
}

.cookie-banner button {
background-color: #28a745;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-left: 10px;
}

.cookie-banner button:hover {
background-color: #218838;
}

.cookie-banner .cookie-text {
margin: 0 20px;
/* Adiciona margem de 20px em ambos os lados */
display: inline-block;
/* Garante que a margem seja respeitada */
}

details {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fff;
  transition: all 0.3s ease;
  margin: 10px;
}

summary {
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  outline: none;
  color: #3B5742;
}

details[open] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

summary::marker {
  display: none;
}

summary::after {
  content: "+";
  float: right;
  transition: transform 0.3s;
}

details[open] summary::after {
  content: "-";
}

.details.p {
  margin: 0.5rem 0 0 0;
  color: #333;
}

.container-conteudo-acordeao {
flex-direction: column;
justify-content: left;
margin: 10px;
}

a {
text-decoration: none;
color: inherit; /* opcional: mantém a cor herdada do texto */
}

.container-conteudo-pagina-links {
display: flex; 
flex-direction: column;
justify-content: left;
padding: 10px;
background-color: #f4f4f4;
border-radius: 5px;
margin: 10px;
}

.container-conteudo-pagina-links-central {
display: flex; 
flex-direction: column;
justify-content: left;
padding: 10px;
}

.container-dentro-acordeao {
display: flex; 
flex-direction: column;
justify-content: left;
padding: 10px;
background-color: #f4f4f4;
border-radius: 5px;
}
.slider-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
gap: 20px;
padding-bottom: 10px;
scrollbar-width: none; /* Firefox */
}

.slider-container::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}

.slide {
flex: 0 0 calc(100% - 33%); /* 1 slide + 1/3 do próximo */
scroll-snap-align: start;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
background-color: #fff;
}

.slide img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}

@media (max-width: 768px) {
.slide {
flex: 0 0 90%; /* Ajusta para telas menores */
}
}


.search_json_container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.search_json_input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.search_json_results {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.search_json_result {
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.search_json_result h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: #0077cc;
}

.search_json_result small {
  color: #666;
}

.search_json_result p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .search_json_input {
	font-size: 1rem;
  }
}

.search_json_link {
text-decoration: none;
color: #0077cc;
}
.search_json_link:hover {
text-decoration: underline;
}

.post_json_date {
  color: #777;
  margin-bottom: 1rem;
}
.post_json_content p {
  line-height: 1.6;
  margin-bottom: 1rem;
}
	
.container-botao-talk-central {
display: flex;
justify-content: center;
padding: 20px;
}

.back_button {
  background-color: #f0f0f0;
  border: none;
  color: #333;
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  margin: 20px 0;
}

.back_button:hover {
  background-color: #e0e0e0;
}

.container-desktop-main {
margin: 0px;
display: flex;
gap: 3px;

position: fixed;
top: 30px;
left: 20px;
right: 20px;
height: 60px; /* ajuste conforme necessário */

}

.container-desktop-esquerda {
  flex: 1; /* não cresce, não encolhe, base de 10% */
  justify-content: center;
  text-align: center;
  background-color: black;
  color: #f2f2f2;
  border-radius: 5px;
  display: flex;    
}

.container-desktop-meio {
  flex: 8; /* não cresce, não encolhe, base de 10% */
  justify-content: center;
  text-align: center;  
  background-color: black;
  color: #f2f2f2;
  border-radius: 5px;  
  display: flex;  
  gap: 44px;
  
}

.container-desktop-direita {
  flex: 1; /* não cresce, não encolhe, base de 10% */
  justify-content: center;
  text-align: center;  
  background-color: black;
  color: #f2f2f2;
  border-radius: 5px;
  display: flex;  
}  

.margem-topo {
  display: flex;
  flex-direction: column;
  margin-top: 100px;           
}

/* Telas pequenas (celulares grandes) */
@media (max-width: 768px) {
  .margem-topo {
    margin-top: 100px;
  }
}


.margem-topo-chat {
  display: flex;
  flex-direction: column;
  margin-top: 100px;           
}

/* Telas pequenas (celulares grandes) */
@media (max-width: 768px) {
  .margem-topo-chat {
    margin-top: 100px;
  }
}


.container-hero {
  background-image: url('imagens/slide4.jpeg');
  /*background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('imagens/food.jpeg');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  margin: 0px;
}	

.container-hero-about {
  background-image: url('imagens/slide1.jpeg');
  /*background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('imagens/slide1.jpeg');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  margin: 0px;
}

.container-hero-services {
  background-image: url('imagens/slide3.jpeg');
  /*background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('imagens/slide3.jpeg');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  margin: 0px;
}

.container-hero-links {
  background-image: url('imagens/slide4.jpeg');
  /*background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('imagens/slide4.jpeg');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  margin: 0px;
}

.conteudo {
width: 60%;           /* Centraliza horizontalmente dentro do container pai (caso tenha largura definida) */
}

.conteudo p {
font-size: 24px;           /* Centraliza horizontalmente dentro do container pai (caso tenha largura definida) */
}

.conteudo h1 {
font-size: 44px;           /* Centraliza horizontalmente dentro do container pai (caso tenha largura definida) */
}

.blog_side_container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.blog_side_content {
  flex: 3;
  padding-right: 20px;
}

.blog_side_sidebar {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.blog_side_widget {
  margin-bottom: 30px;
}

.blog_side_widget h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Media query para telas médias (tablets) */
@media (max-width: 768px) {
  .blog_side_container {
    flex-direction: column;
  }

  .blog_side_content {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .blog_side_sidebar {
    padding: 15px;
  }
}

/* Media query para telas pequenas (celulares) */
@media (max-width: 480px) {
  .blog_side_container {
    padding: 10px;
  }

  .blog_side_sidebar {
    padding: 10px;
  }

  .blog_side_widget h2 {
    font-size: 16px;
  }
}

.hero-card {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background-color: #f4f4f4;
  color: black;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  font-family: 'Aleo', serif;
}

.hero-card p {
font-size: 30px;
}

@media (max-width: 768px) {
  .hero-card {
    bottom: 20px;
    left: 20px;
    padding: 15px;
    max-width: 90%;
  }

  .hero-card p {
    font-size: 22px;
  }
}

.rservice_open-chat {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: auto;
  display: inline-block;
  margin: 0px;
  max-width: 220px;
}

.rservice_chat-widget {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 100%;
  max-width: 360px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 999;
}

.rservice_chat-header {
  background: #007bff;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rservice_close-chat {
  background: #007bff;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
align-items: flex-end;
}

/* Media query para ecrãs com largura até 600px (telemóveis) */
@media (max-width: 600px) {
  .rservice_close-chat {
    flex-direction: column;       /* Os elementos internos passam a estar em coluna */
    padding: 8px 12px;            /* Menos espaço interno em ecrãs pequenos */
    text-align: center;           /* Centraliza o texto */
    gap: 8px;                     /* Espaço entre elementos filhos */
  }
}


.rservice_chat-header button {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.rservice_chat-body {
  padding: 12px;
  height: 300px;
  overflow-y: auto;
  font-size: 14px;
  background: var(--rservice_light);
}

.rservice_chat-message {
  margin-bottom: 10px;
}

.rservice_chat-message.rservice_user {
  text-align: right;
  color: var(--rservice_primary);
}

.rservice_chat-input {
  border-top: 1px solid #ddd;
  padding: 10px;
}

.rservice_chat-input input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .rservice_chat-widget {
	right: 10px;
	left: 10px;
	bottom: 70px;
	max-width: none;
  }
}

.aaa_container_titulo_pagina {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 70px;
margin-right: 70px;
width: 70%;
display:flex;
justify-content: center;
flex-direction: column;
}

.tituloh1_pagina h1 {
font-size: 70px;
margin-top: 0px;
margin-bottom: 0px;
}

.titulop_pagina p {
font-size: 40px;
margin-top: 0px;
margin-bottom: 0px;
}

.aaa_container-titulo {
border-radius: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 70px;
margin-right: 70px;
width: 70%;
display:flex;
justify-content: center;
flex-direction: column;
}
.titulop p {
font-size: 40px;
margin-top: 0px;
margin-bottom: 0px;
}

.container_texto_solution {
display:flex;
flex-direction: column;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 70px;
margin-right: 70px;
}

.container_botao button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
font-family: 'Roboto Mono', monospace;
}

.container_botao1 button {
padding: 10px 20px;
background-color: white;
color: black;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
margin-left: 20px;
font-family: 'Roboto Mono', monospace;
}


/* Smartphones (até 600px) */
@media (max-width: 600px) {
  .aaa_container_titulo_pagina,
  .aaa_container-titulo,
  .container_texto_solution {
    margin-left: 20px;
    margin-right: 20px;
    width: 90%;
  }

  .tituloh1_pagina h1 {
    font-size: 46px;
  }

  .titulop_pagina p,
  .titulop p {
    font-size: 24px;
  }

  .container_botao button {
    font-size: 14px;
    padding: 8px 16px;
  }
}

/* Tablets (601px até 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .aaa_container_titulo_pagina,
  .aaa_container-titulo,
  .container_texto_solution {
    margin-left: 40px;
    margin-right: 40px;
    width: 80%;
  }

  .tituloh1_pagina h1 {
    font-size: 50px;
  }

  .titulop_pagina p,
  .titulop p {
    font-size: 32px;
  }

  .container_botao button {
    font-size: 15px;
    padding: 9px 18px;
  }
}
.container-contact {
display: flex;
justify-content: center;
margin: 50px 200px 50px 200px;
}
.container-contact-item1 {
display: flex;
justify-content: left;
flex-direction: column;
flex: 7;
}
.container-contact-item2 {
display: flex;
justify-content: left;
flex-direction: column;
flex: 3;
}
/* Tablet (<= 1024px) */
@media (max-width: 1024px) {
  .container-contact {
    margin: 40px 100px;
  }
}

/* Dispositivos médios (<= 768px) */
@media (max-width: 768px) {
  .container-contact {
    flex-direction: column;
    margin: 30px 50px;
  }

  .container-contact-item1,
  .container-contact-item2 {
    flex: none;
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Dispositivos pequenos / smartphones (<= 480px) */
@media (max-width: 480px) {
  .container-contact {
    margin: 20px 20px;
  }

  .container-contact-item1,
  .container-contact-item2 {
    margin-bottom: 15px;
  }
}

#III_openBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--iii-accent);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  #III_openBtn {
    width: 40%;
    height: 50px;
    font-size: 14px;
  }
}

#III_chatWidget {
  display: none;
  flex-direction: column;
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 90%;
  max-width: 360px;
  height: 400px;
  background: var(--iii-primary);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
}

#III_chatHeader {
  padding: 16px;
  background: var(--iii-accent);
  color: white;
  font-weight: bold;
  text-align: center;
  position: relative;
}

#III_closeBtn {
  position: absolute;
  right: 12px;
  top: 12px;
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

#III_chatBody {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

#III_chatInput {
  display: flex;
  border-top: 1px solid #ccc;
}

#III_inputField {
  flex: 1;
  padding: 12px;
  border: none;
  outline: none;
}

#III_sendBtn {
  padding: 12px;
  background: var(--iii-accent);
  color: white;
  border: none;
  cursor: pointer;
}


@media (max-width: 768px) {
  #III_openBtn {
    width: 40%;
    height: 50px;
    font-size: 14px;
  }

  #III_chatWidget {
    /* Adjustments for the chat widget on smaller screens if needed */
    width: 95%; /* Make it slightly wider to fit smaller screens better */
    right: 2.5%; /* Center it roughly */
    left: 2.5%;
    max-width: unset; /* Remove max-width constraint for smaller screens */
  }

  #III_chatInput {
    /* Ensure the input container is flexible */
    flex-wrap: nowrap; /* Prevent wrapping, keep input and button on one line */
  }

  #III_inputField {
    /* Allow the input field to take up most of the space */
    flex: 1;
    padding: 10px; /* Slightly reduce padding for smaller screens */
    font-size: 14px; /* Adjust font size */
  }

  #III_sendBtn {
    /* Specific adjustments for the send button */
    padding: 10px 15px; /* Adjust padding to control its width */
    width: auto; /* Allow width to be determined by content/padding */
    font-size: 14px; /* Adjust font size */
    flex-shrink: 0; /* Prevent the button from shrinking too much */
  }
}

.lt_search_container {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lt_search_input {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.lt_search_results_container {
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.lt_search_item {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

.lt_search_item:last-child {
    border-bottom: none;
}

.lt_search_item h3 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 18px;
}

.lt_search_item p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.lt_search_item .lt_search_region {
    font-style: italic;
    color: #007bff;
    font-size: 13px;
    margin-bottom: 5px;
}

.lt_no_results {
    color: #999;
    text-align: center;
    padding: 20px;
}

.chat_link_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: auto;
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.chat_link_message {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-radius: 10px;
  max-width: 80%;
  word-wrap: break-word;
}

.chat_link_user {
  align-self: flex-end;
  background-color: #d9eaf7;
}

.chat_link_bot {
  align-self: flex-start;
  background-color: #e9ecef;
}

.chat_link_form {
  padding: 1rem;
  border-top: 1px solid #ccc;
  background: white;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  
}

.chat_link_input {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.chat_link_button {
  padding: 0.75rem 1rem;
  margin-left: 0.5rem;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.chat_link_button:hover {
  background-color: #1565c0;
}

@media (max-width: 600px) {
  .chat_link_container {
	padding: 0.5rem;
  }

  .chat_link_form {
	flex-direction: column;
	gap: 0.5rem;
  }

  .chat_link_button {
	width: 100%;
	margin: 0;
  }
}