/* CSS Document */
:root {
  --label-text: #6b7bb1;
}
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  line-height: 1.6;
}
.menu {
  display: flex;
  position: relative;
  justify-content: center;
  background: #003366;
  padding: 10px;
}
.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 05px 20px;
  display: inline-block;
  position: relative;  
}
.menu a:hover {
  background-color: #4d4c4c;
  text-decoration: underline;
  border-radius: 10px;
}
section {
  padding: 20px;
  text-align: center;
}


footer {
  background: #002244;
  color: #fff;
  text-align: center;
  padding: 1px 0;
  position: relative;
  bottom: 0;
  width: 100%;
}
.cta {
  margin: 20px 0;
  background: #ffa500;
  color: #fff;
  padding: 15px;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  border-radius: 5px;
}
.cta:hover {
  background: #cc8400;
}
/* X------ Estilos sub-menu ------X */    
.submenu {
  display: none;
  position: absolute;
  min-width: 200px;
  z-index: 1;
  left: 0;
  top: 100%;  
  background-color: transparent;
}        
.submenu a {
  display: block;
  padding: 10px 15px;
  color: #4d4c4c;
  text-align: left;
  font-weight: normal;
  margin: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9); /* ------ Cor do Fundo do menu----- */
  border-top: 1px solid var(--label-text);
  border-left: 1px solid var(--label-text);
  border-right: 1px solid var(--label-text);
  border-bottom: 1px solid var(--label-text);
  
}
.submenu a:hover {
  /* background: rgba(255, 255, 255, 0.9);  ------ SUB Cor do Fundo do menu----- */
  background: #6b7bb1;
  color: white;  
}      
.has-submenu:hover .submenu {
  display: block;
}
.has-submenu {
  position: relative;
  display: inline-block;
}
/* X------ Imagem do Menu ------X */ 
.img0 {
  width: 150px;
  height:auto;
  position: absolute;
  top: 10%;
  left: 20px;
  opacity: 0.8;
}
.img2 {
  width: 150px;
  height:auto;
  display: none;
  margin: 0 auto;
  opacity: 0.7;  
  padding: 10px;  
}

/* X------ Language ------X */  
.img_01 {  
  position: absolute; 
  top: 80%;    /* Alinha verticalmente */
  transform: translateY(-50%); 
  background-color: transparent;
  opacity: 0.7;  
}
.img_01 a {
  font-size: 12px;            /* Tamanho do texto */
  color: white;               /* Cor do texto */
  font-weight: bold;          /* Opcional: negrito */
  padding: 0px 0px 0px 10px;
}
.img_01 a:hover {
  background-color: transparent;
}
.img_01:last-of-type {
    right: 10px;
}
/* Diminui o tamanho das imagens das bandeiras */
.img_01 img {
    width: 25px;         /* Largura ajustável (ex: 20px, 25px, etc.) */
    height: auto;        /* Mantém a proporção original */
    border-radius: 3px;  /* Bordas levemente arredondadas */
    transition: 0.2s;    /* Efeito suave ao passar o mouse (opcional) */
}

/* Efeito hover (opcional) */
.img_01 img:hover {
  cursor: pointer;
  transform: scale(1.3);   /* Aumenta levemente ao passar o mouse */
  opacity: 1;              /* Opacidade total ao passar o mouse */
}

/* X------------------------------------------ Container em Branco */
.container_01 {
  background: rgb(233,233,233);
  background: linear-gradient(0deg, rgba(233,233,233,1) 0%, rgba(207,207,207,1) 100%); 
  float: left;
  width: 100%;
  height: 50px;
  margin: 0px 0px;
  border-radius: 1px;
  box-shadow: 0px 0px 10px black;
  overflow: hidden;
  border-bottom: 1px solid #F1F1F1;
}
.rodape { 
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
/* X---------------- Diminuição da Tela ------------- */
@media screen and (max-width:900px) {
  header {
    height: 100px;
  }
  .menu a {
    font-size: 13px;
    padding: 2px 5px;
  }
  .submenu {
    min-width: 150px;
  }
  .submenu a {
    text-align: center;
  }
  .img0 {
    width: 120px;
    top: 13%;
    left: 5px;
  }
  .img_01 a {
    font-size: 11px;            /* Tamanho do texto */
  }
  .img_01:last-of-type {
    right: 0px;
  }
  .img_01 img {
    width: 20px;
  }
}
@media screen and (max-width:600px) {
  .menu a {
    font-size: 12px;
  }
  .submenu {
    min-width: 120px;
  }
  .img0 {
    display: none;
  }
  .img2 {
    display: block;
  }
  .img_01 a {
    font-size: 10px;            /* Tamanho do texto */
    padding: 0px 0px 0px 1px;
  }
  .img_01 img {
    width: 15px;
  }
  .rodape{
    font-size: 12px;
  }
}