/* === INÍCIO DO SEU CSS FORNECIDO === */
        /* Estilo para o corpo da página */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4; /* Este pode ser sobrescrito pelo CSS da página que inclui o menu */
            position: relative;
            overflow-x: hidden;
        }

        /* Estilo para o menu de navegação (esta tag <nav> não existe no HTML do menu que você forneceu, o menu é a div .topo) */
        /* Se você tiver uma tag <nav> em outro lugar, este estilo se aplicará a ela.
        nav {
            background-color: #000000;
            overflow: hidden;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 20px;
            position: relative;
        }
        nav a {
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 16px;
            display: inline-block;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        */

/* Topo com gradiente */
 .topo {
    background: linear-gradient(to bottom, #10909d, #45c8b4);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
    justify-content: space-between;
}

 /* Logo */
        .logo-container {
            /* flex: 1; */ /* Removido para melhor controle com outros elementos */
            text-align: left;
            height: 70px;
            width: auto;
            margin-right: 160px;
        }

.logo {
            /* flex: 1; */ /* Removido para melhor controle com outros elementos */
            text-align: left;
            height: 70px;
            width: auto;
            margin-right: 20px;
        }
        /* Dropdowns */
        .dropdown-container {
            display: flex;
            /* flex: 1; */ /* Removido para permitir que social-icons usem margin-left: auto */
            justify-content: center; /* Centraliza os botões dropdown */
            gap: 15px; /* Espaçamento entre os botões dropdown */

        }

        .dropdown {
            position: relative;
            display: inline-block;
            display: none !important;
            /* margin: 0 10px; */ /* Removido, usando gap no container */

        }
        
        .dropdown2 {
            position: relative;
            display: inline-block;
            /* margin: 0 10px; */ /* Removido, usando gap no container */

        }

        .dropdown-button {
            background-color: transparent;
            color: white;
            padding: 10px 15px;
            border: 1px solid white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: auto; /* Ajustado para largura automática */
            min-width: 140px; /* Largura mínima para consistência */
            font-size: 14px; /* Ajustado */
        }

        .dropdown-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px; /* Ou a largura do botão */
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            z-index: 100001;
            border-radius: 4px; /* Adicionado */
            overflow: hidden; /* Para o border-radius funcionar nos links */
        }

        .dropdown-content a {
            color: black;
            padding: 10px 15px; /* Ajustado */
            text-decoration: none;
            display: block;
            font-size: 14px; /* Ajustado */
        }

        .dropdown-content a:hover {
            background-color: #10909d;
            color: white;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        /* Botão de vagas (que é um link estilizado como botão) */
        .botao-vagas { /* Estilo para o link 'Ver Vagas' */
            background-color: transparent;
            color: white !important; /* Garantir cor */
            padding: 10px 15px;
            border: 1px solid white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: auto;
            min-width: 140px;
            text-decoration: none;
            font-size: 14px;
            display: inline-block; /* Para se comportar como botão */
            text-align:center;
            
        }
        .botao-vagas:hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: white !important; /* Garantir cor */
        }


        /* Ícones sociais no topo */
        .social-icons {
            display: flex;
            /* flex: 0 0 auto; /* Removido para permitir que o container cresça se necessário */
            gap: 10px; /* Ajustado */
            margin-left: auto; /* Empurra para a direita */
        }

        .icon-space {
            margin: 0; /* Removido margin individual, usando gap no container */
        }

        .icon-space a {
            background-color: rgba(255, 255, 255, 0.1); /* Sutil */
            border-radius: 10%; /* Círculo */
            padding: 3px; /* Ajustado */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
            text-decoration: none !important;
            box-shadow: none !important;
            width: 36px; /* Tamanho fixo para círculo */
            height: 36px; /* Tamanho fixo para círculo */
        }

        .icon-space a:hover {
            background-color: rgba(255, 255, 255, 0.25);
        }

        .icon-space i {
            font-size: 18px; /* Ajustado */
            color: white;
        }


        /* Ícone do menu hambúrguer */
        .menu-icon {
            display: none; /* Começa escondido, mostrado via media query */
            flex-direction: column;
            justify-content: space-around; /* Para espaçar as barras */
            width: 30px; /* Tamanho do ícone */
            height: 25px; /* Tamanho do ícone */
            cursor: pointer;
            background-color: transparent;
            border: none;
            /* position: absolute; /* Já no .topo que é relative */
            /* right: 20px; */ /* Controlado pelo flex-end do .topo se necessário ou margin-left: auto */
            z-index: 10001; /* Acima do overlay e side-menu base */
        }

        .menu-icon div {
            width: 100%;
            height: 3px;
            background-color: #fff;
            border-radius: 2px; /* Barras levemente arredondadas */
            transition: all 0.3s ease; /* Para animação do X */

        }
        /* Animação para X (opcional, mas melhora UX) */
        .menu-icon.open div:nth-child(1) { transform: translateY(9px) rotate(45deg); }
        .menu-icon.open div:nth-child(2) { opacity: 0; }
        .menu-icon.open div:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


        /* Estilo para o menu deslizante (side-menu) */
        .side-menu {
            height: 100%;
            width: 280px; /* Um pouco mais largo */
            position: fixed;
            left: -280px; /* Correspondente à largura */
            top: 0;
            background-color: #12929e; /* Cor primária do tema */
            overflow-y: auto;
            transition: left 0.3s ease-in-out; /* Animação mais suave */
            padding-top: 20px;
            z-index: 100000; /* Mais alto */
            box-shadow: 3px 0 10px rgba(0,0,0,0.3);
        }

        .side-menu a.menu-link, .side-menu a.submenu-link { /* Estilo base para todos os links no side-menu */
            color: white;
            padding: 12px 25px;
            text-decoration: none;
            display: block;
            font-size: 1rem; /* Um pouco maior */
            transition: background-color 0.2s ease, padding-left 0.2s ease;
            border-bottom: 1px solid rgba(255,255,255,0.1); /* Divisor sutil */
        }
         .side-menu a.menu-link i, .side-menu a.submenu-link i {
            margin-right: 10px;
            width: 20px; /* Para alinhar ícones */
            text-align: center;
         }

        .side-menu a.menu-link:hover, .side-menu a.submenu-link:hover {
            background-color: #0e7a84; /* Tom mais escuro */
            padding-left: 30px; /* Efeito de indentação no hover */
        }
        .side-menu a.menu-link.active { /* Para link ativo no submenu */
             background-color: #0c6c74;
        }


        .side-menu .close-btn {
            position: absolute;
            top: 10px; /* Ajustado */
            right: 15px; /* Ajustado */
            font-size: 28px; /* Ajustado */
            color: white;
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px; /* Área de clique maior */
        }

        .side-menu.open {
            left: 0;
        }

        /* Submenu no side-menu */
        .submenu {
            display: none;
            background-color: rgba(0,0,0,0.1); /* Fundo levemente diferente para subitens */
            padding-left: 0; /* Resetar padding-left do pai se houver */
        }
        .submenu.show-submenu { /* Classe JS para mostrar */
            display: block;
        }
        .submenu-link {
            padding-left: 40px !important; /* Maior indentação para subitens */
            font-size: 0.9rem !important; /* Levemente menor */
            border-bottom-style: dashed !important; /* Divisor diferente para subitens */
        }
        .menu-link .arrow { /* Estilo para as setas do submenu */
            float: right;
            transition: transform 0.3s ease;
        }
        .menu-link.active .arrow {
            transform: rotate(180deg);
        }


        /* Overlay escuro */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6); /* Mais escuro */
            opacity: 0; /* Começa invisível */
            z-index: 99999; /* Abaixo do side-menu, mas acima do resto */
            transition: opacity 0.3s ease-in-out;
        }

        .overlay.show {
            display: block;
            opacity: 1; /* Torna visível */
        }

        /* Responsividade Geral */
        @media screen and (max-width: 1023px) { /* Ponto de quebra para mostrar menu hambúrguer */
            .menu-icon {
                display: flex;
            }
            .topo .dropdown-container,
            .topo .social-icons { /* Esconde dropdowns e ícones sociais do topo */
                display: none;
            }
            .logo-container { /* Centraliza o logo quando não há outros itens */
                flex-grow: 1; /* Ocupa espaço disponível */
                text-align: center;
                margin-right: 40px; /* Espaço para o menu icon */
            }
             .topo {
                justify-content: space-between; /* Logo à esquerda, ícone à direita */
            }
        }

        @media screen and (min-width: 1024px) { /* Desktop */
            .menu-icon, .side-menu, .overlay {
                display: none !important; /* Garante que o menu lateral e overlay nunca apareçam */
            }
             .topo .dropdown-container,
            .topo .social-icons {
                display: flex; /* Garante que apareçam */
            }
        }
        /* === FIM DO SEU CSS FORNECIDO (com pequenas adaptações) === */