header{
	background: white;
	border-bottom: 1px solid #ddd;
	top: 0;
	position: fixed;
	height: 64px;
	width: 100%;
	padding: 12px 224px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 100;
}
	header div{
		height: 100%;
		display: flex;
		align-items: center;
		gap: 24px;
	}
		header .logo a{
			height: 100%;
		}
		header .logo a img{
			height: 100%;
			filter: brightness(0) saturate(100%);
		}
/* Navegação */
header .nav {
    display: flex;
    gap: 24px;
}

header .nav a {
    color: #111;
    text-decoration: none;
    font-family: monospace;
    font-size: 16px;
    padding-left: 8px;
}

header .nav a:nth-of-type(1) {
    border-left: 4px solid #33995f;
}

header .nav a:nth-of-type(2) {
    border-left: 4px solid #ff3333;
}

header .nav a:nth-of-type(3) {
    border-left: 4px solid #6699ff;
}

header .nav a:nth-of-type(4) {
    border-left: 4px solid #ff9900;
}

/* Estilos para mobile */
@media (max-width: 1300px){
	header{
		padding: 12px 128px;
	}
}
@media (max-width: 980px){
	header{
		padding: 12px 64px;
	}
}
@media (max-width: 768px) {
    header {
        padding: 12px 16px;
    }

    /* Ocultar a navegação inicialmente */
    header .nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 64px;
        right: 16px;
        background: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 16px;
        border-radius: 4px;
    }

    /* Exibir navegação quando ativo */
    header .nav.active {
        display: flex;
    }

    /* Estilo para o botão hambúrguer */
    .hamburger {
		margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: #111;
    }
}