/* CSS Document */

#menu{
	display: none;
}

.icon-menu{
	float: right;
	font-size: 35px;
	margin-top: 35px;
	cursor:pointer;
}

.itens-menu{
	position: absolute;
	width: 100%;
	height: 100vh;
	background: rgba(255,255,255);
	top:100px;
	left: 0;
	transition: all 0.5s;
	transform: translateX(-100%);
	
}

.itens-menu a{
	display: block;
	color: #0B253C;
	height: 50px;
	text-decoration: none;
	padding: 15px;
	border-bottom: 1px solid #0B253C;
}


.itens-menu a:hover{
	background:rgba(11,37,60,0.40);
	
}

#menu:checked ~ .itens-menu{
	transform: translateX(0%);
}


@media (min-width: 1300px){
	.itens-menu{
		position: static;
		width: auto;
		height: auto;
		float:right;
		transform: translateX(0);
		display: flex;
		
		}

	.icon-menu{
		display: none;
		}

	.itens-menu a{
		border: none;
		padding-top:30px;
		
						
	}
	.itens-menu a:hover{
		background: none;
		
	}
}






/* informações menu e sub menu */
.itens-menu ul {
    list-style-type: none; /* Remove as bolinhas da lista */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Garante que os floats sejam contidos */
}

.menu-com-sub li {
    float:inherit; /* Alinha os itens do menu horizontalmente */
    position: relative; /* Essencial para posicionar o sub-menu */
	
}

.menu-com-sub li a {
    display: block; /* Ocupa a área total do <li> para facilitar o clique */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	
}

/* Estilos do Sub-Menu */
.sub-menu {
    display: none; /* Esconde o sub-menu por padrão */
    position: absolute; /* Posição absoluta em relação ao <li> pai */
    background-color: #ffffff;
    min-width: 160px; /* Largura mínima para o sub-menu */
    z-index: 1; /* Garante que o sub-menu fique sobre outros elementos */
	
}


.sub-menu a {
    padding: 12px 16px;
	
}

.sub-menu a:hover {
    background-color:#FFFFFF;
	
}

/* Exibe o sub-menu quando o mouse passa sobre o <li> principal */
.menu-com-sub:hover .sub-menu {
    display: block;
	
}