/* Estilos gerais */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    height: 1000px;
}

header {
    position: fixed;
  top: 0;
  left: 0;
  width: 100%;
    background-color: #b0b0b0;
    padding: 0px;
    display: flex;
    align-items: center; /* Alinha verticalmente */
    
}

.menu-hamburguer {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin-right: 20px; /* Espaço entre o ícone e o menu */
    margin-left: 20px;
    margin-top: 0;
}

.linha {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 2px 0;
}

.menu {
    display: flex;
    
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    display: inline-block; /* Alinha os itens horizontalmente */
    margin-left: 20px;
}

.menu a {
    text-decoration: none;
    color: #333;
}

.menu a.active {
    color: #007bff; /* Cor de destaque */
    text-decoration: underline;
}

/* Estilos para o container */
.container {
    background-color: #646464;
    display: flex;
    align-items:end; /* Alinha verticalmente */
    max-width: 100%; /* Largura máxima do container */
    margin-left: 0px; /* Alinha o container à esquerda */
    padding: 20px;
    flex-wrap: wrap; /* Permite que os elementos se quebrem para a próxima linha em telas menores */
}

.container img {
    
    max-width: 100%; /* Largura máxima da imagem igual à largura do container */
    height: auto; /* Altura automática para manter a proporção da imagem */
    object-fit: contain; /* A imagem é redimensionada para caber no container, mantendo sua proporção */
    margin-right: 20px; /* Espaço entre a imagem e o texto */
}

.texto-descritivo {
    flex: 1; /* O texto ocupa o espaço restante */
}

/* Estilos para telas menores */
@media (max-width: 500px) {
    .menu {
        display: none; /* Esconde o menu */
        flex-direction: column; /* Menu vertical */
        position: absolute;
        top:0px; /* Ajuste conforme necessário */
        left: 50px;
        width: 30%;
        background-color: #f0f0f0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .menu ul {
        padding: 20px;
    }

    .menu li {
        display: block; /* Alinha os itens verticalmente */
        margin: 10px 0;
    }

    .menu.active {
        display: flex; /* Exibe o menu */
    }

    /* Estilos responsivos para o container */
    .container {
        flex-direction: column; /* Texto abaixo da imagem */
        align-items: flex-start; /* Alinha o texto à esquerda */
        margin:0px; /* Adiciona margem em telas menores */
    }

    .container img {
        
        margin-right: 0; /* Remove o espaço entre a imagem e o texto */
        margin-bottom: 20px; /* Espaço abaixo da imagem */
    }
}