/* Reset básico */
body, h1, h2, h3, p, ul, ol, li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Navegação */
.navbar {
  background: #333;
  padding: 10px;
}

.navbar ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}

.navbar li {
  margin: 0;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

/* Banner e iFrame */
header {
  position: relative;
}

.banner {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
}

/* Conteúdo Dinâmico */
#content-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Ocupa toda a altura disponível */
  overflow: auto; /* Adiciona rolagem se necessário */
  z-index: 1; /* Garante que o conteúdo esteja sobrepondo o banner */
  background: rgba(255, 255, 255, 0.8); /* Transparente para ver o banner abaixo, se necessário */
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Barra preta */
.black-bar-bottom {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 10px;
}

.black-bar a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
}

.links {
    position: relative; /* Define o posicionamento relativo da barra */
    background-color: black;
    height: 40px; /* Altura ajustada */
    padding: 0; /* Remove o padding para alinhamento mais preciso */
}

.links a {
	display: inline-block; /* Faz com que o link se ajuste ao tamanho do texto */
    position: absolute; /* Permite o posicionamento absoluto dos links */
    color: white;
    text-decoration: none;
    line-height: 40px; /* Alinha verticalmente o texto */
    padding: 0 140px; /* Move os textos */
}

.link1 {
    left: 0; /* Posiciona o primeiro link na extremidade esquerda */
}

.link2 {
    left: 50%; /* Posiciona o segundo link no centro horizontal */
    transform: translateX(-50%); /* Centraliza o link */
}

.link3 {
    right: 0; /* Posiciona o terceiro link na extremidade direita */
}

.link1:hover,
.link2:hover,
.link3:hover {
    color: red; /* Muda a cor do texto para vermelho ao passar o mouse */
}

/* Cards */
.cards-section {
  background-color: #FF6600; /* Laranja */
  padding: 20px 0; /* Espaçamento acima e abaixo da seção */
}

.cards {
  display: flex;
  justify-content: center; /* Centraliza os cards horizontalmente */
  flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte se não houver espaço */
  gap: 15px; /* Espaçamento entre os cards */
}

.card {
  width: 100px; /* Ajuste o tamanho conforme necessário */
  height: 100px; /* Ajuste o tamanho conforme necessário */
  border-radius: 10px; /* Arredonda os cantos dos cards */
  overflow: hidden; /* Garante que a imagem dentro do card siga o border-radius */
}

.card a {
  display: block;
  width: 100%;
  height: 100%;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px; /* Arredonda os cantos da imagem dentro do card */
}

.home-content {
    text-align: center;
    padding: 20px;
}

.home-content h1 {
    font-size: 2em;
    margin: 0;
}

.home-content h2 {
    font-size: 1.5em;
    margin-top: 10px;
}

/* Imagens de Publicidade */
.advertising-images {
  background-color: #FF6600; /* Azul claro semelhante ao fundo dos cards */
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 colunas */
  gap: 15px; /* Espaçamento entre as imagens */
}

.advertising-images div {
  margin: 0; /* Remover margens adicionais */
}

.advertising-images img {
  width: 100%; /* Ajusta a largura da imagem para preencher o contêiner */
  height: auto; /* Mantém a proporção da imagem */
  object-fit: cover;
}

footer {
    background-color: black;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .visit-counter {
    flex: 1;
}

footer .footer-text {
    text-align: right; /* Alinha o texto à direita */
    flex: 1;
}