.container-principal {
    background-color: black;
    margin: 5px 40px 0 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 2px solid white; /*rgb(165,49,180);*/
    padding: 2px 30px 10px 30px;
    min-height: 80%;
}

.logo-container {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 30px;
}

#logo {
    max-width: 100%;
    max-height: 150px;
    height: auto;
    width: auto;
    display: block;
}

.conteudo-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo-container {
    width: 100%;
    display: flex;
    margin-left: 15%;
    margin-top: 3%;
}

#titulo-principal {
    color: rgb(119, 87, 76);
    font-family: 'Great Vibes', cursive;
    font-size: 5rem; /* ou até maior, ajuste conforme desejar */
    line-height: 1;
    margin: 0;
    margin-left: 0px;
    word-spacing: 3rem; /* ajuste o valor conforme desejar */
}

.menu-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: auto; /* ajuste conforme desejar */
    margin-bottom: 0;
}

.menu-nav a {
    background: none;
    text-decoration: none;
    border: none;
    color: rgb(96, 85, 76);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s;
}

.menu-nav a:hover {
    color: red;
    text-decoration: none;
}

/* ======================================= */
/* MEDIA QUERY: AJUSTES PARA CELULAR (MAX-WIDTH: 600px) */
/* ======================================= */
@media (max-width: 600px) {
    /* 1. Reduz o tamanho e margens do contêiner do Logo */
    .logo-container {
        flex: 0 0 70px; /* Reduz o espaço alocado para o logo */
        margin-right: 0; /* Reduz o espaço entre o logo e o título */
        margin-bottom: 10px;
    }

    /* 2. Garante que o Logo (imagem) seja menor para não dominar */
    #logo {
        max-width: 100%;
        max-height: 70px;
    }

    /* 3. Garante que o contêiner principal tenha margens menores */
    .container-principal {
        margin: 5px 0 0 0;
        padding: 2px 5px 10px 5px; /* Reduz o padding interno do container */
        
    }
    
    /* 4. TÍTULO: Remove margens que podem estar empurrando-o para a direita */
    .titulo-container {
        /* Remove o margin-left de 15% que está no CSS original */
        margin-left: 5px; 
        /* Altera o flex para que ocupe o espaço restante */
        flex-grow: 1; 
        /* Garante que o título comece o mais à esquerda possível */
        justify-content: flex-start; 
        margin-top: 0; /* Remove o margin-top de 3% que o empurra para baixo */
    }

    /* 5. FONTE DO TÍTULO: Reduz o tamanho para que caiba na linha */
    #titulo-principal {
        font-size: 1.8rem; /* Ajuste o tamanho da fonte (pode ser necessário testar) */
        word-spacing: normal;
        margin-left: 0p; /* Remove o margin-left que estava no CSS original */
    }
    
    /* 1. Ajuste do Menu de Navegação (.menu-nav) */
    .menu-nav {
        /* Reduz o gap (espaço entre os links) */
        gap: 3px; /* Reduzindo o gap de 20px (original) para 10px */
        width: 100%; /* Ocupa a largura total da tela */
        margin-left: 5px;
        margin-top: 10px;
    }

    /* 2. Ajuste da Fonte dos Links (.menu-nav a) */
    .menu-nav a {
        /* Diminui um pouquinho a fonte */
        font-size: 0.9rem; /* Alterando o font-size de 1rem (original) para 0.9rem */
        padding: 0 5px; /* Ajusta o padding horizontalmente para economizar espaço */
    }

    /* Este seletor afeta apenas o 3º <li> dentro do .menu-nav */
    .menu-nav li:nth-child(3) {
        /* Usa margin-right negativo para 'puxar' o item Services mais próximo do item anterior */
        /* O valor de -5px é um exemplo; você pode precisar ajustá-lo */
        margin-left: -5px; 
        
    }
   
}