.navbar{
	
	display: flex;
	justify-content: flex-end;
	aling-items: center;
	padding: 16px 64px;
	position:realtive;
	
}

.nav-links2{
    display: none; /* Oculto por defecto */
    list-style: none;
    position: absolute; /* Para que se posicione correctamente */
    background-color: none; /* Color de fondo */
    z-index: 1; /* Asegúrate de que esté por encima */
}



.nav-links2 li{
	padding: 8px 14px; 
	
}

.nav-links{
	list-style: none;
    display: flex;
    transition: all 0.5 ease;
}

.nav-links a {
	background-color: rgb(97, 148, 183,0.4 );
	text-decoration: underline;
	color: #FFFFFF;
	font-size: 17px;
	padding: 8px 14px; 
	border-radius: 30px;
	transition: background-color 0.3s ease;
	
}



.menu-icon{
display: none;	
flex-direction: column;
cursor: pointer;
margin-left: auto;
position: realtive;	
z-index: 1;
	
}


.menu-icon .line{
	
	width: 30px;
	height: 3px;
	background-color: white;
	margin: 5px 0;
	transition: all 0.3s ease;
}

#menu-toggle{
	
	display: none;
}


    
/*    
 @media(max-width: 768px){
 
 .navbar{
 	padding: 20px;
 }
 
 .menu-icon{
 	display: flex;
 }
 
 
 .nav-links{
 	position: absolute;
 	top: 10px;
 	right: 0;
 	width: 100%;
 	height: 0;
 	overflow: hidden;
 	flex-direction: column;
 	background-color: none;
 	text-align: right;
 	transition: heigth 0.5s ease;
 	
 }
 
 
 
 .nav-links li
 {
 	margin: 0;
 	padding: 5px;
 	width: 100%;
 
 }	
 
 nav-links a{
	 width: 100%;
 	padding: 10px 20px;
 

 }
 
 
 
 #menu-toggle:checked + .menu-icon + .nav-links {
 	height: 200px; 
 	width: 250px;
 	padding: 50px ;
 }



 #menu-toggle:checked + .menu-icon + menu-icon .line:nth-child(1) {
	transform: rotate(45deg) translate(15px, 3px);
	

 }

 #menu-toggle:checked + .menu-icon + menu-icon .line:nth-child(2) {
	transform: scale(0);
	

 }


 #menu-toggle:checked + .menu-icon + menu-icon .line:nth-child(3) {
		transform: rotate(-45deg) translate(15px, -4px);

 }

 
 }   
*/    

.nav-links a:hover {
	
	background-color: #6194b7;
}

.dropbtn:hover  + .nav-links2,
.nav-links2:hover {
    display: flex; /* Muestra el menú desplegable al pasar el mouse */
    flex-direction: column; /* Asegúrate de que los elementos se apilen verticalmente */
    left: 120px;
 	height: 100px; 
 	width: 200px;
    top: 58px;
}