@import url('https://fonts.googleapis.com/css2?family=Traveling+Typewriter&display=swap');



    body {

      margin: 0;
      padding: 0;
      font-family: 'Traveling Typewriter', monospace;
      background-color: #fff;
	  background-image: url("img/bg03.webp");
	  background-repeat: no-repeat;
	  background-size: 80%;
            background-attachment: fixed; /* Esta propriedade mantém o background fixo */
            background-size: cover; /* Ajusta o tamanho da imagem para cobrir toda a tela */
            background-position: top center; /* Centraliza a imagem */
	
      width: 1024px;
      margin: 0 auto;
    }



 header {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #333;
  z-index: 1000;
  max-width: 1024px; /* Ajuste a largura máxima conforme necessário */
  margin: 0 auto; /* Centraliza o header na página */
  padding: 10px 0; /* Espaçamento interno para o menu */
  display: flex; /* Alinha o conteúdo horizontalmente */
  align-items: center; /* Centraliza verticalmente o conteúdo */
}

header nav {
  display: flex;
  align-items: center;
  width: 100%;
}

header .logo {
  width: 155px;
  height: 60px;
  margin: 10px; /* Espaçamento entre a imagem e o menu */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Faz os itens do menu ficarem em linha */
  align-items: center;
  flex-grow: 1; /* Faz o menu ocupar o espaço restante */
  justify-content: center; /* Centraliza o menu */
}

nav ul li {
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  padding: 5px 10px;
  font-size: 20px;
  position: relative;
}

nav ul li a:hover {
  color: #ffcc00;
}

nav ul li a:hover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 3px;
  background-color: #ffcc00;
}



    .dropdown {

      position: relative;

    }



    .dropdown-content {

      display: none;

      position: absolute;

      top: 100%;

      left: 0;

      background-color: #f9f9f9;

      padding: 10px;

      border-radius: 15px;

    }



    .dropdown:hover .dropdown-content {

      display: block;

    }



    .dropdown-content a {

      display: block;

      color: #333;

      text-decoration: none;

      padding: 5px 0;

    }



    .dropdown-content a:hover {

      color: #000;

      background-color: #fff;

    }

@font-face {
  font-family: 'bxsec';
  src: url('tt.otf') format('opentype');
  /* Outros formatos de fonte podem ser adicionados aqui para suporte cruzado */
}



/* Section */
.section {
    text-align: left;
    margin: 0px;
    padding: 10px;
    background-image: url("img/b1.png");
}

.section h2 {
    font-family: 'bxsec', sans-serif; /* Fallback para fontes sans-serif */
    color: #FFFFFF; /* Branco em formato hexadecimal */
}

.section-divider {
    border-top: 1px solid #ccc;
    margin: 2px;
}

.section p {
    line-height: 1.7;
    text-align: justify;
    color: #fff;
    position: relative;
}

.imagem-direita {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
    width: 300px; /* Ajuste o valor conforme necessário */
}

.section ul {
    line-height: 1.7;
    padding-left: 20px;
}

.section ul li {
    position: relative;
    padding-bottom: 5px;
}

.section ul li a {
    color: #FFFFFF; /* Texto branco */
    text-decoration: none;
}

.section ul li a:hover {
    color: #FFFF00; /* Texto amarelo ao passar o mouse */
    text-decoration: none;
}

.section p img {
    max-width: 100%;
}



    /* section-duo */



    .section-duo {

      display: flex;
		color: #ffffff;
      justify-content: space-between;
	  background-image: url("img/b1.png");
	  padding: 10px;

    }



    .section-duo .column {

      flex-basis: 88%;

    }



    .section-duo .column-b {

      padding: 20px 2px;

    }



    .section-duo p {

      line-height: 1.7;

      text-align: justify;

    }



    .section-duo ul {

      line-height: 1.7;

      padding-left: 20px;

    }



    .section-duo ul li {

      position: relative;

      padding-bottom: 5px;



    }



    .section-duo ul li a {

      
		color: #FFFFFF; /* Texto branco */
      text-decoration: none;

    }



    .section-duo ul li a:hover {

      text-decoration: underline;

      color: #FF0000;

    }



    .section-duo p img {

      max-width: 100%;

    }



    .img-triplo {

      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      align-items: center;

      gap: 10px;

    }



    .img-triplo a {

      flex-basis: calc(33% - 5px);

    }



    .img-triplo a img {

      width: 310px;

      height: auto;

    }





.new-section .image-container img {

  width: 100%;

  height: auto;
 background-color: rgba(255, 255, 255, 0.8);

}



.image-container {

  position: relative;

}



.text-overlay {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: rgba(255, 255, 255, 0.8);

  padding: 40px;

  text-align: center;
  
  max-width: 600px; /* Define a largura máxima */
        margin: 0 auto; /* Centraliza o elemento horizontalmente */
        padding: 20px; /* Adiciona um espaçamento interno */
        background-color: rgba(0, 0, 0, 0.5); /* Cor de fundo com transparência */
        color: #ffffff; /* Cor do texto */

}

.text-overlay a {
            display: inline-block;
            padding: 10px 20px; /* Espaçamento interno do botão */
            background-color: #007bff; /* Cor de fundo do botão */
            color: #ffffff; /* Cor do texto */
            text-decoration: none; /* Remove sublinhado do link */
            transition: background-color 0.3s ease; /* Transição suave para mudança de cor */
        }

        .text-overlay a:hover {
            background-color: #0056b3; /* Cor de fundo ao passar o mouse */
        }



    footer {

      background-color: #fff;

      padding: 20px 0;

      text-align: center;

    }



    footer a {

      color: #0000FF; /* Azul em hexadecimal */

      text-decoration: none;

    }



    footer a:hover {

      text-decoration: underline;

      color: #FF0000;

    }



    .copyleft {

      display: inline-block;

      transform: rotate(180deg);

      font-size: 20px;

    }



    /* Responsivo */



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

      body {

        width: auto;

      }



      header {

        padding: 10px 0;

      }



      nav ul li {

        display: block;

        margin: 10px 0;

      }



      .dropdown-content {

        top: 0;

        left: 100%;

        transform: translateX(-100%);

      }



      nav ul li a {

        font-size: 16px;

      }



      .section-duo {

        flex-direction: column;

      }



      .section-duo .column {

        flex-basis: 100%;

      }

	  

	  }

	  /* Galeria de Palestrantes */

    .gallery {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 20px;

    }



    .gallery-item {

      position: relative;

      overflow: hidden;

      cursor: pointer;

    }



    .gallery-item img {

      max-width: 100%;

      height: auto;

      transition: transform 0.3s ease;

    }



    .gallery-item:hover img {

      transform: scale(1.1);

    }



    .overlay {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: rgba(0, 0, 0, 0.7);

      color: #fff;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      opacity: 0;

      transition: opacity 0.3s ease;

    }



    .gallery-item:hover .overlay {

      opacity: 1;

    }



    .speaker-icon {

      width: 35px;

      height: auto;

      margin-top: 10px;

    }

	

.table {

  display: flex;

  flex-direction: column;

  border: 1px solid #ccc;

  border-radius: 5px;

  overflow: hidden;
  
  color: #fff

}



.table-row {

  display: flex;

  justify-content: space-between;

  padding: 8px 16px;

  border-bottom: 1px solid #ccc;

}



.table-header {

  background-color: #0187fe;

  font-weight: bold;

}



.table-cell {

  flex-basis: 33.33%;

  text-align: center;

}	



.table-cell-center {

  flex-basis: 66.66%;

  background-color: #0187fe;

  text-align: center;

  padding: 5px;

}

  

#link-topo{

	text-decoration: none;

	color: #ffffff;

	background-color: #000000;

	padding: 10px;

	position: fixed;

	right: 40px;

	bottom: 10px;

	transform: rotate(270deg);

}



#link-topo a {

	text-decoration: none;

	

}