.whatsapp-container { position: fixed;  right: 20px; z-index: 1000; min-width:140px;max-width:140px;max-height:31px;text-align: center;max-height:32px;
    transition: all 0.3s ease-in-out; /* Transición suave para hover */
} 
.whatsapp-button { 
    /*display: flex; justify-content: space-between; background-color: #25D366;padding: 5px; color: white; border-radius: 30px; text-decoration: none; margin-left: 5px;
margin-right: 5px;*/
display: flex; justify-content: space-between; align-items: center; /* Asegura que los elementos estén centrados verticalmente */ 
background-color: #25D366; padding: 5px; color: white; border-radius: 30px; text-decoration: none; margin-left: 5px; margin-right: 5px;

} 
.whatsapp-button img { width: 30px; height: 30px;  margin-left: 5px; border-radius: 50%; } 
.whatsapp-button span { font-size: 11.5px;margin-right: 5px;}
.whatsapp-container :hover {
    transform: scale(1.05); /* Escala el botón ligeramente */
    color: #262b6f;
}
/*.fixed-btn { 
    position: fixed; bottom: 20px; right: 20px; background-color: #febb00; color: #fff; border: none; height: 40px;font-size: 17px; font-weight: bold;
    padding: 10px 20px; cursor: pointer; border-radius: 5px; z-index: 1000; /* Asegurarse de que esté por encima de otros elementos 
} */
 #containerwpe{
    bottom: 20px;
 }

#containerwpi{
    bottom: 65px;
}


header {
  display: flex;
  height: 15vh;
  background-color: white;
  color: #004d7a;
  align-items: center;
  padding: 0 10%;
  
}

.logo {
  width: 25%;
  max-height: 80%;
  font-size: 1.5em;
  font-weight: bold;
}
.logo img{
   max-height: 70%;
   max-width: 80%;
}
.menu {
  width: 70%;
}

.menu ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  gap: 20px;
  font-size: 1.05em;
  font-family: 'Georgia', serif;
}
.menu ul li {
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: all 0.5s ease;
}
.menu ul li:hover {
  border-bottom: 2px solid #004d7a;
}
.menu a {
  color: #004d7a;
  text-decoration: none;
  font-weight:600;
  transition: color 0.3s ease, transform 0.3s ease;
}


.menu ul li a:hover {
  color: #d72327; /* rojo de acento al pasar el mouse */
  transform: scale(1.05);
}
.Cargarflotante {
	position: absolute;
	top: 20%; /* Buscamos el centro horizontal (relativo) del navegador */
	left: 40%; /* Buscamos el centro vertical (relativo) del navegador */
	z-index:1;
}
.language-selector {

    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.language-selector select {
    padding: 5px 5px 5px 50px; /* Espacio para el icono de la bandera */
    border-radius: 5px;
    border: 1px solid #ccc;
    background-image: url('../../images//index/flags/en.png'); /* Bandera por defecto */
    background-repeat: no-repeat;
    background-position: 5px center; /* Posiciona el icono a la izquierda */
}

.language-selector select option {
    padding-left: 30px; /* Espacio para el icono de la bandera */
}

.hamburger {
  display: none;
  font-size: 2em;
  background: none;
  border: none;
  color: #004d7a;
  cursor: pointer;
}


.modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}

.footer { background-color: #f0f0f0;; color: gray; text-align: center; padding: 20px 0; } 
.social-media { margin-bottom: 10px; } 
.social-media a { margin: 0 10px; display: inline-block; } 
.social-media img { width: 30px; height: 30px; } 
.footer p { margin: 0; }
@media (max-width: 1500px) {
  header{
    padding: 0 5%;
  }
}
@media (max-width: 1050px){
    
.menu ul li a{
  font-weight: 500;
}
.menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: white;
    position: absolute;
    border-top: 1px solid gray;
    top: 10vh;
    left: 0;
    z-index: 10;
    transition: all 0.5s ease-in-out;
  }

  .menu ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    
  }

  .menu.show {
    display: flex;
  }
  .hamburger {
    display: block;
    margin-left: auto;
  }
}
@media (max-width: 480px) {
.footer { text-align:left ; padding: 10px; } 
}