* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    text-align: center;
    /* background-color: #f4f4f4; */
}
header {
    /* background-color: #0056b3; */
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.logo {
    max-width: 100px;
    margin-right: 20px;
}
.title {
    flex-grow: 1;
    text-align: center;
}
.content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.banner {
    max-width: 500px;
    height: auto;
}
.banner1 {
    max-width: 500px;
    height: auto;
}
.container {
    flex: 1;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    text-align: left;
}
a {
      text-decoration: none;
      color: green;
}
/* topo */
  .topo {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 3 colunas iguais */
      align-items: center;
      background-color: white; 
      color: orange;
      padding: 10px 20px;
    }

    /* .col-esquerda {
      image-align: left;
    } */

    .col-esquerda img {
      height: 60px;
    }

    .col-centro {
      text-align: center;
    }

    .col-centro h1, 
    .col-centro h2, 
    .col-centro h3 {
      margin: 2px 0;
    }

    /* .col-direita {
      text-align: right;
    } */

    .col-direita img {
      height: 80px;
    }



.button{
    display: inline-block;
    margin: 5px;
    padding: 5px 5px;
    background-color: green;
    color: white;
    text-decoration: none;
    border-radius: 5px;  
}
/* MENU LINKS */
.menu {
  background-color: orange;
  margin-bottom: 15px;
}

.menu ul {
  list-style-type: none;
  display: flex;
  justify-content: center; /* 👉 centraliza os links */
  gap: 15px;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 0; /* garante alinhamento perfeito */
}

.menu a {
  text-decoration: none;
  color: green;
  font-weight: bold;
}

.menu a:hover {
  text-decoration: underline;
}
select {
    display: inline-block;
    margin: 5px;
    padding: 5px 5px;
    background-color: white;
    color: green;
    text-decoration: none;
    border-radius: 5px;  
}
#myInput {
    display: inline-block;
    margin: 5px;
    padding: 5px 5px;
    background-color: white;
    color:green;
    text-decoration: none;
    border-radius: 5px;  
}

a.button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background-color: green;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
a.button:hover {
    background-color: green;
}
li {
    padding: 20px;
    margin-left: 20px;
}
#myLi {
    padding: 5px;
    margin-left: 15px;
}
h1,h2,h3 {
    color: black;
}
h4 {
    color: green;
}
#Preto{
    color: green;
}
#regulartable {
	margin-bottom:15px;
	border:#cccccc 1px solid;
	width:100%;

}
#regulartable th{
	padding-top:8px;
	padding-bottom:8px;

}
#regulartable td{ 
	font-family: 'PT Sans', sans-serif;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
}
#regulartable td{
	padding-top:5px;
	padding-bottom:5px;
    padding-left:20px;
}
.regulartable-odd{
	background-color:#f7f7f7;
}
.regulartable-even{
	background-color:#ffffff;
}
.regulartable-highlight-odd{
	color: #222222;
	background-color:#ddd;
	text-shadow:0 0 0 transparent,#ffffff 0px 1px 0px;
}
.regulartable-highlight-even{
	color: #222222;
	background-color:#eee;
	text-shadow:0 0 0 transparent,#ffffff 0px 1px 0px;
}
.regularstandard{
	text-align: center;
	color: #000000;
font-size: 12px;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	text-shadow:0 0 0 transparent,#ffffff 0px 1px 0px;
	border-bottom:#cccccc 1px solid;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ffffff, #f7f7f7); /* for firefox 3.6+ */
	padding: 0px;
}
footer {
    background-color: orange;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 500px) {
    .content {
        flex-direction: column;
        align-items: center;
    }
    .banner {
        width: 100%;
    }
    .menu ul {
        flex-direction: column;
        gap: 10px;
    }
}

  .table-wrapper {
    width: 100%;
     
    overflow-x: auto;
  }
  /*--------novo--------------*/
  .jomec2025 {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #222;
  line-height: 1.6;
}
  .jogo {
  /*max-width: 1040px;*/
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #222;
  line-height: 1.6;
}

.banner-container {
  text-align: center;
  margin-bottom: 2rem;
}

.jomec-banner {
  width: 100%;
  max-width: 1000px;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.jomec-content h2 {
  /*color: #004aad;*/
  color: green;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 1rem;
}

.jomec-content h3 {
  /*color: #004aad;*/
  color: green;
  margin-top: 2rem;
}

.jomec-content p {
  margin-bottom: 1rem;
}

.info-list {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 2rem;
}

.info-list li {
  background: #f6f8fb;
  padding: 0.6rem 1rem;
  /*border-left: 4px solid #004aad;*/
  border-left: 4px solid #FFA500;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.more-info {
  margin-top: 2rem;
  font-style: italic;
  background: #f0f4ff;
  padding: 1rem;
  border-left: 5px solid #004aad;
  border-radius: 4px;
}

.menu {
  background-color: orange;
  margin-bottom: 15px;
  position: relative;
}

/* lista principal */
.menu ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 0;
}

.menu li {
  position: relative;
}

.menu a {
  text-decoration: none;
  color: green;
  font-weight: bold;
  padding: 8px 12px;
  display: block;
}

.menu a:hover {
  text-decoration: underline;
}

/* submenu */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: orange;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 180px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 100;
}

.menu li:hover > .submenu {
  display: block;
}

/* === BOTÃO HAMBÚRGUER === */
.menu-toggle {
  display: none;
  cursor: pointer;
  color: green;
  font-weight: bold;
  padding: 10px 15px;
  background-color: orange;
  border: none;
  text-align: center;
  font-size: 1.1rem;
}

/* === ESTILO RESPONSIVO === */
@media (max-width: 768px) {
  .menu ul {
    display: none; /* esconde o menu */
    flex-direction: column;
    align-items: center;
    background-color: orange;
    width: 100%;
  }

  .menu ul.show {
    display: flex; /* mostra quando ativo */
  }

  .menu-toggle {
    display: block; /* mostra o botão */
  }

  .menu li {
    width: 100%;
    text-align: center;
  }

  .submenu {
    position: static; /* submenu aparece em bloco */
    box-shadow: none;
    border-radius: 0;
  }

  .menu li:hover > .submenu {
    display: none; /* no mobile não aparece ao hover */
  }

  .menu li.open > .submenu {
    display: block; /* mostra submenu ao clique */
  }
}