/* ====== CONFIGURAÇÕES GERAIS ====== */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 0;
}

/* ====== BANNER PRINCIPAL COM IMAGEM SEMI-TRANSPARENTE ====== */
.banner {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85; /* Melhor visibilidade do texto */
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgb(51, 0, 255);
    font-size: 26px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ====== MENU FIXO COM BOTÕES DESTACADOS ====== */
.menu-fixo {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: #15fc04;
}

.menu-fixo ul {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
}

.menu-fixo li {
    display: flex;
    align-items: center;
}

.menu-fixo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #FFD700;
    color: #002147;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px; /* Botões arredondados */
    transition: 0.3s ease-in-out;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.menu-fixo a img {
    width: 22px;
    height: 22px;
}

.menu-fixo a:hover {
    background: #e6c200;
    transform: scale(1.05);
}

/* ====== SEÇÕES COM FUNDO TRANSPARENTE ====== */
section {
    background: rgba(255, 255, 255, 0.95); /* Transparência ajustada */
    border-radius: 12px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 40px auto;
    padding: 40px;
    width: 90%;
    max-width: 1000px;
}

/* ====== EMPRESAS PARCEIRAS ====== */
.empresas-parceiras {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.empresas-parceiras img {
    width: 140px;
    height: auto;
    transition: 0.3s;
    border-radius: 12px;
}

.empresas-parceiras img:hover {
    transform: scale(1.1);
}

/* ====== MÓDULOS DO CURSO ====== */
.modulos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.story {
    width: 120px;
    height: 120px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #007bff;
    background: rgba(255, 215, 0, 0.85); /* Ajuste para melhor visibilidade */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.story:hover {
    transform: scale(1.1);
}

.story img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* ====== BOTÃO DE PAGAMENTO DESTACADO ====== */
.btn-pagamento {
    display: inline-block;
    background-color: #ffcc00;
    color: #000;
    padding: 12px 22px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px; /* Mais arredondado */
    text-decoration: none;
    transition: 0.3s ease-in-out;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.btn-pagamento:hover {
    background-color: #ff9900;
    transform: scale(1.05);
}

/* ====== BOTÃO DO WHATSAPP ====== */
.btn-whatsapp {
    background-color: #25D366;
    color: white;
    padding: 12px 22px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    font-weight: bold;
    transition: 0.3s ease-in-out;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.btn-whatsapp:hover {
    background-color: #1EBE5C;
    transform: scale(1.05);
}

/* ====== RODAPÉ ====== */
footer {
    background: #002147;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 30px;
}
/* ====== BOTÃO "INSCREVA-SE AGORA" ====== */
.btn-inscricao {
    display: inline-block;
    background: linear-gradient(135deg, #ffcc00, #ff9900);
    color: #002147;
    padding: 14px 28px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    margin-top: 15px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
}

.btn-inscricao:hover {
    background: linear-gradient(135deg, #ff9900, #e68a00);
    transform: scale(1.05);
}
/* Estilização do Carrossel */
.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
}

.carrossel {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease-in-out;
}

.modulo {
    background: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    min-width: 250px;
    transition: transform 0.3s;
}

.modulo:hover {
    transform: scale(1.05);
}

.modulo img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.stories-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px;
}

.story {
    background: #f4f4f4;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    width: 80px;
}

.story img {
    width: 40px;
    height: 40px;
}

/* Estilização das Setas */
.seta {
    background: #002147;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.seta:hover {
    background: #0050a4;
}

.seta.esquerda {
    left: 10px;
}

.seta.direita {
    right: 10px;
}
/* Estilização das descrições nos módulos */
.descricao {
    display: none;
    font-size: 14px;
    margin-top: 5px;
    color: #555;
}

/* Botão para ver todos os módulos */
.ver-todos-container {
    text-align: center;
    margin-top: 15px;
}

.btn-ver-todos {
    background-color: #0050a4;
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.btn-ver-todos:hover {
    background-color: #003c82;
}

/* Esconder a lista completa por padrão */
.hidden {
    display: none;
}

#lista-completa {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
}
/* ====== ESTILIZAÇÃO DO RANKING ====== */
.ranking-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.rank {
    background: #ccc;
    color: #333;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.rank.ativo {
    background: #002147;
    color: white;
}

.rank:hover {
    background: #0050a4;
    color: white;
}

/* ====== ESTILIZAÇÃO DOS MÓDULOS COMO CARTÕES ====== */
.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.carrossel {
    display: flex;
    overflow-x: auto;
    gap: 20px;
}

.modulo {
    width: 180px;
    height: 220px;
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    border-radius: 15px;
    text-align: center;
    padding: 15px;
    cursor: pointer;
    transition: transform 0.3s;
}

.modulo:hover {
    transform: scale(1.1);
}

.modulo img {
    width: 60px;
    height: 60px;
}

.modulo span {
    font-size: 16px;
    font-weight: bold;
    color: #002147;
    display: block;
    margin-top: 10px;
}

/* Oculta a descrição dos módulos */
.descricao {
    display: none;
    font-size: 14px;
    color: white;
    margin-top: 5px;
}

/* Ocultar lista completa por padrão */
.hidden {
    display: none;
}

/* Botão 'Acesso Exclusivo' */
.ver-todos-container {
    text-align: center;
    margin-top: 15px;
}

.btn-ver-todos {
    background-color: #ff6600;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-ver-todos:hover {
    background-color: #cc5200;
}

/* Estilização do botão do WhatsApp */
.btn-whatsapp {
    background-color: #25D366;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.btn-whatsapp:hover {
    background-color: #1EBE5C;
}
/* ====== MENU INTERATIVO ====== */
.menu-fixo {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: #002147;
}

.menu-fixo ul {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
}

.menu-fixo li {
    display: flex;
    align-items: center;
}

.menu-fixo a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #FFD700;
    color: #002147;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    transition: 0.3s;
}

.menu-fixo a img {
    width: 20px;
    height: 20px;
}

.menu-fixo a:hover {
    background: #e6c200;
}

/* ====== SEÇÕES OCULTAS ====== */
.hidden {
    display: none;
}

/* ====== MÓDULOS BLOQUEADOS ====== */
.modulos-bloqueados {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    filter: blur(5px);
}

.btn-desbloquear-container {
    text-align: center;
    margin-top: 20px;
}

.btn-desbloquear {
    background-color: #ff6600;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-desbloquear:hover {
    background-color: #cc5200;
}
/* CONTAINER DO CARROSSEL */
.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px auto;
}

/* ÁREA QUE EXIBE OS ITENS */
.carrossel {
    display: flex;
    overflow: hidden;
    width: 80%;
    max-width: 800px;
    scroll-behavior: smooth;
}

/* ITENS INDIVIDUAIS DO CARROSSEL */
.carrossel-item {
    min-width: 150px;
    text-align: center;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    margin: 0 10px;
}

.carrossel-item img {
    width: 100px;
    height: auto;
    border-radius: 5px;
}

.carrossel-item span {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #002147;
}

/* BOTÕES DE NAVEGAÇÃO */
.prev-btn, .next-btn {
    background: #002147;
    color: white;
    font-size: 24px;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s;
}

.prev-btn:hover, .next-btn:hover {
    background: #0050a4;
}
/* CONTAINER EM GRADE */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 20px;
    padding: 20px;
}

/* ESTILO DOS QUADRADOS */
.grid-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

/* EFEITO HOVER */
.grid-item:hover {
    transform: scale(1.05);
}

/* TÍTULOS DENTRO DOS QUADRADOS */
.grid-item h3 {
    font-size: 1.4em;
    color: #002147;
    margin-bottom: 10px;
}

/* LISTA DENTRO DOS QUADRADOS */
.grid-item ul {
    list-style: none;
    padding: 0;
}

.grid-item ul li {
    font-size: 1em;
    margin-bottom: 5px;
}
/* CONTAINER EM GRADE - DIVISÃO EM QUADRADOS */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 20px;
    padding: 20px;
    max-width: 900px;
    margin: auto;
}

/* ESTILO DOS QUADRADOS */
.grid-item {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

/* ANIMAÇÃO AO PASSAR O MOUSE */
.grid-item:hover {
    transform: scale(1.05);
}

/* TITULOS NOS QUADRADOS */
.grid-item h3 {
    font-size: 1.4em;
    color: #002147;
    margin-bottom: 10px;
}

/* LISTA DE VALORES */
.grid-item ul {
    list-style: none;
    padding: 0;
}

.grid-item ul li {
    font-size: 1em;
    margin-bottom: 5px;
}

/* DESIGN RESPONSIVO - MOBILE */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* 1 coluna em telas menores */
    }
}
.valores-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Garante alinhamento central do texto */
    margin-top: 20px; /* Espaço entre os valores e os elementos acima */
}
/* Seção do WhatsApp */
#whatsapp-chat {
    text-align: center;
    background: #f5f5f5;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
}

.btn-whatsapp {
    background-color: #25D366;
    color: white;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
}

.btn-whatsapp:hover {
    background-color: #1EBE5C;
}
/* Estilização da Seção de Módulos Bloqueados */
.modulos-bloqueados {
    text-align: center;
    background: #f8f8f8;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Lista de Módulos Bloqueados */
.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Efeito de Borrão nos Textos dos Módulos */
.modulo-bloqueado {
    background: #ddd;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 80%;
    margin: auto;
    color: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* BORRADO */
    border-radius: 5px;
}

/* Botão de Desbloqueio */
.btn-desbloquear {
    background-color: #FFD700;
    color: black;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.btn-desbloquear:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}
/* Estilização da Seção de Módulos Bloqueados */
.modulos-bloqueados {
    text-align: center;
    background: #f8f8f8;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Lista de Módulos Bloqueados */
.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Efeito de Borrão apenas no Final do Texto */
.borrado {
    color: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* BORRADO */
}

/* Botão de Desbloqueio */
.btn-desbloquear {
    background-color: #FFD700;
    color: black;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.btn-desbloquear:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}
/* Estilização da Seção de Módulos Bloqueados */
.modulos-bloqueados {
    text-align: center;
    background: #f8f8f8;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Lista de Módulos Bloqueados */
.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Efeito de Borrão apenas no Final do Texto */
.borrado {
    color: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* BORRADO */
    background: rgba(0, 0, 0, 0.1); /* Adiciona um leve fundo de opacidade */
    padding: 2px 5px;
    border-radius: 5px;
}

/* Botão de Desbloqueio */
.btn-desbloquear {
    background-color: #FFD700;
    color: black;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.btn-desbloquear:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}
/* ====== CONTAINER DE HABILIDADES ====== */
.habilidades-container {
    text-align: center;
    background: #f8f8f8;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.habilidades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.habilidade {
    background: white;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.habilidade:hover {
    transform: scale(1.05);
}

/* ====== SEÇÃO DE MÓDULOS BLOQUEADOS ====== */
.modulos-bloqueados {
    text-align: center;
    background: #f8f8f8;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Lista de Módulos com Efeito Borrado */
.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.modulo-bloqueado {
    background: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Efeito de Borrado */
.borrado {
    color: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* BORRADO */
    background: rgba(0, 0, 0, 0.15); /* Adiciona um leve fundo de opacidade */
    padding: 2px 5px;
    border-radius: 5px;
}

/* Texto visível */
.visivel {
    color: black;
    font-weight: bold;
}

/* Botão de Desbloqueio */
.btn-desbloquear {
    background-color: #FFD700;
    color: black;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.btn-desbloquear:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}
/* ====== SEÇÃO DE MÓDULOS BLOQUEADOS ====== */
.modulos-bloqueados {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin: 30px auto;
    width: 80%;
    max-width: 600px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Lista de Módulos com efeito menor */
.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    font-size: 16px;
}

/* Cada item da lista */
.modulo-bloqueado {
    background: rgba(0, 0, 0, 0.05);
    padding: 8px;
    border-radius: 5px;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Efeito de Borrado menor */
.borrado {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4); /* Reduzido */
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 5px;
    border-radius: 5px;
}

/* Botão de Desbloqueio com mais destaque */
.btn-desbloquear {
    background-color: #FFD700;
    color: black;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    cursor: pointer;
    border: 2px solid #caa000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.btn-desbloquear:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}
/* ====== SEÇÃO DE MÓDULOS BLOQUEADOS ====== */
.modulos-bloqueados {
    text-align: center;
    background: white; /* Fundo sólido */
    padding: 30px;
    border-radius: 12px;
    margin-top: 40px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
    filter: none !important; /* Remove qualquer efeito de desfoque */
    opacity: 1 !important; /* Garante que está 100% visível */
}

/* ====== LISTA DE MÓDULOS (NÍTIDA AGORA) ====== */
.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* ====== BOTÃO DE DESBLOQUEIO VISÍVEL ====== */
.btn-desbloquear {
    background-color: #FFD700; /* Amarelo Ouro */
    color: black;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    border: 3px solid #caa000;
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); /* Sombra mais forte */
    transition: all 0.3s ease-in-out;
}

.btn-desbloquear:hover {
    background-color: #e6c200; /* Amarelo mais escuro */
    transform: scale(1.08);
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4);
}
/* ====== SEÇÃO QUEM SOMOS ====== */
.sobre-nos-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza todos os elementos */
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

/* ====== SEÇÃO DE MISSÃO, VISÃO E VALORES ====== */
.sobre-nos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 20px;
    justify-content: center;
    text-align: left;
}

/* ====== CENTRALIZAR NOSSOS VALORES ====== */
.nossos-valores {
    grid-column: span 2; /* Faz com que ocupe 2 colunas e fique no centro */
    text-align: center;
    margin-top: 20px;
}

/* ====== LISTA DE VALORES ====== */
.valores-lista {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    padding: 0;
}

.valores-lista li {
    background: #f8f8f8;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
/* ====== SEÇÃO QUEM SOMOS ====== */
.sobre-nos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 1100px;
    margin: 0 auto;
}

/* ====== GRID PARA MISSÃO, VISÃO E VALORES ====== */
.sobre-nos-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

/* ====== ESTILIZAÇÃO PADRÃO PARA CADA BLOCO ====== */
.missao, .visao, .nossos-valores {
    flex: 1;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* ====== ESTILIZAÇÃO DA LISTA DE VALORES ====== */
.valores-lista {
    list-style: none;
    padding: 0;
}

.valores-lista li {
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
/* ====== SEÇÃO QUEM SOMOS ====== */
.sobre-nos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 1100px;
    margin: 0 auto;
}

/* ====== GRID PARA MISSÃO, VISÃO E VALORES ====== */
.sobre-nos-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}

/* ====== ESTILIZAÇÃO PADRÃO PARA CADA BLOCO ====== */
.missao, .visao, .nossos-valores {
    flex: 1;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    min-height: 200px; /* Ajuste este valor conforme necessário */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ====== LISTA DE VALORES ESTILIZADA ====== */
.valores-lista {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.valores-lista li {
    background: white;
    padding: 8px 16px;
    border-radius: 10px;
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
/* ====== GRID PARA MISSÃO, VISÃO E VALORES ====== */
.sobre-nos-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

/* ====== ESTILIZAÇÃO PADRÃO PARA CADA BLOCO ====== */
.missao, .visao, .nossos-valores {
    flex: 1;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    min-height: 200px; /* GARANTE QUE TODAS FIQUEM IGUAIS */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ====== LISTA DE VALORES ESTILIZADA ====== */
.valores-lista {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.valores-lista li {
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
/* ====== CONTAINER FLEXÍVEL PARA IGUALAR AS CAIXAS ====== */
.sobre-nos-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    align-items: stretch; /* Força todas as caixas a ficarem do mesmo tamanho */
}

/* ====== ESTILO PADRÃO PARA CADA CAIXA ====== */
.missao, .visao, .nossos-valores {
    flex: 1; /* Faz com que todas ocupem o mesmo espaço */
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    min-height: 250px; /* Altura mínima para todas */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza conteúdo verticalmente */
}

/* ====== LISTA DE VALORES ESTILIZADA ====== */
.valores-lista {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.valores-lista li {
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* ====== GARANTE QUE TODAS TENHAM A MESMA ALTURA ====== */
.sobre-nos-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
/* ====== GRID FLEXÍVEL PARA IGUALAR TAMANHOS ====== */
.sobre-nos-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

/* ====== CAIXAS PADRÃO PARA MANTER O MESMO TAMANHO ====== */
.missao, .visao, .nossos-valores {
    flex: 1;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ====== LISTA SEM AS CAIXAS VERDES (AGORA COM IFENS) ====== */
.valores-lista {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    text-align: left;
}

.valores-lista li {
    background: transparent;
    padding: 5px 0;
    font-weight: normal;
    text-align: center;
}

/* ====== GARANTE QUE TODAS AS CAIXAS TENHAM TAMANHO IGUAL ====== */
.sobre-nos-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.quem-somos-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.quem-somos-box {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    width: 100%;
    max-width: 350px; /* Tamanho fixo para todas */
    height: 180px; /* Altura fixa */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ajuste para o ícone de título */
.quem-somos-box h3 {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Ajuste para os textos internos */
.quem-somos-box p {
    font-size: 16px;
    color: #333;
    line-height: 1.4;
}

/* Ajuste para os valores */
.valores-lista {
    text-align: left;
    list-style: none;
    padding: 0;
}

.valores-lista li {
    font-size: 16px;
    color: #333;
    padding: 5px 0;
}

/* Mantém todas as caixas iguais */
.quem-somos-box:nth-child(3) {
    height: 180px; /* Mesmo tamanho fixo */
}
/* Ajusta o layout geral para dispositivos menores */
@media (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
    }

    /* Ajuste o menu para ficar empilhado no celular */
    .menu-fixo ul {
        flex-direction: column;
        text-align: center;
    }

    .menu-fixo ul li {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Ajusta o layout dos cards (Quem Somos) */
    .container {
        flex-direction: column; /* Empilha os elementos */
        align-items: center;
    }

    .container div {
        width: 90%; /* Reduz a largura dos blocos */
        margin-bottom: 15px; /* Espaçamento entre os blocos */
    }

    /* Ajusta imagens grandes para não saírem da tela */
    img {
        max-width: 100%;
        height: auto;
    }
}
/* Ajusta o layout para dispositivos menores */
@media (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
        overflow-x: hidden; /* Impede rolagem lateral indesejada */
    }

    /* Ajustando o menu fixo */
    .menu-fixo ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu-fixo ul li {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    /* Ajustando os blocos (Quem Somos, Missão, Visão, Valores) */
    .container {
        display: flex;
        flex-direction: column; /* Empilha os elementos no mobile */
        align-items: center;
        text-align: center;
        padding: 10px;
    }

    .container div {
        width: 90%; /* Mantém um bom espaçamento na tela */
        margin-bottom: 15px;
    }

    /* Corrigindo botões e caixas */
    .btn, .modulos-bloqueados, .habilidades-container {
        width: 95%;
        max-width: 400px;
        margin: 10px auto;
    }

    /* Ajustando imagens grandes para não saírem da tela */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Ajustando os cards (Missão, Visão, Valores) para ficarem alinhados */
    .grid-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grid-container .card {
        width: 90%;
        margin-bottom: 15px;
        text-align: center;
    }
}
/* Melhorando os módulos no celular */
@media (max-width: 768px) {
    .ranking-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .ranking-container button {
        width: 90%;
        margin-bottom: 10px;
    }

    .carrossel-container {
        overflow-x: scroll;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        scroll-snap-type: x mandatory;
    }

    .carrossel-item {
        min-width: 80%;
        max-width: 80%;
        margin: 0 10px;
        text-align: center;
        scroll-snap-align: center;
    }
}
@media (max-width: 768px) {
    .menu-fixo ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
    }

    .menu-fixo ul li {
        margin: 5px;
    }

    .menu-fixo ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        width: 120px;
        height: 40px;
    }

    .menu-fixo img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }
}
@media (max-width: 768px) {
    .grid-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grid-container .card {
        width: 90%;
        text-align: center;
        margin-bottom: 15px;
    }
}
.banner img {
    width: 100%;   /* Garante que a largura fique sempre dentro da tela */
    max-height: 500px; /* Ajuste essa altura para limitar a imagem */
    object-fit: cover;  /* Mantém a proporção sem distorção */
}
.banner {
    width: 100%;
    max-height: 500px; /* Ajuste a altura máxima aqui */
    overflow: hidden; /* Evita que a imagem fique muito grande */
    position: relative;
}

.banner img {
    width: 100%;
    height: auto;
    max-height: 500px; /* Garante que a altura não ultrapasse */
    object-fit: cover; /* Mantém a proporção e corta excesso */
}
.banner {
    width: 100%;
    height: auto;
    max-height: 500px; /* Define um limite máximo para altura */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita distorções */
    position: relative;
}

.banner img {
    width: 100%;
    height: 100%;
    max-width: 1920px; /* Garante que a imagem não passe do tamanho ideal */
    max-height: 500px;
    object-fit: contain; /* Mantém a proporção original sem cortar a imagem */
    image-rendering: crisp-edges; /* Mantém a nitidez da imagem */
}
.banner {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain; /* Mantém a proporção da imagem */
    background-repeat: no-repeat;
    background-position: center;
}

.banner img {
    width: 100%;
    max-width: 1400px; /* Defina um limite para evitar distorções */
    height: auto;
}
.menu-fixo ul {
    display: flex;
    flex-wrap: wrap; /* Permite que os botões quebrem para outra linha */
    justify-content: center;
    padding: 0;
    list-style: none;
}

.botao-menu {
    background-color: #FFD700; /* Amarelo */
    color: #000;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    margin: 5px;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre o emoji e o texto */
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.botao-menu:hover {
    background-color: #e6c200; /* Amarelo mais escuro no hover */
    transform: scale(1.05);
}
@media screen and (max-width: 768px) {
    .menu-fixo ul {
        flex-direction: column; /* Empilha os botões no celular */
        align-items: center; /* Centraliza os botões */
    }

    .botao-menu {
        width: 90%; /* Faz os botões ocuparem quase toda a largura */
        text-align: center;
        justify-content: center;
    }
}
.banner {
    width: 100%;
    height: auto;
    max-height: 250px; /* Evita que fique muito grande no celular */
    background-size: cover; /* Ajusta a imagem sem distorcer */
    background-position: center;
}
.banner img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Garante que a imagem fique visível sem distorção */
}
@media screen and (max-width: 768px) {
    .banner-text h1 {
        font-size: 24px; /* Reduz tamanho da fonte do título no celular */
    }

    .banner-text p {
        font-size: 16px; /* Reduz tamanho do subtítulo */
    }
}
@media screen and (max-width: 768px) {
    .menu-fixo ul {
        display: flex;
        flex-direction: column; /* Deixa os botões um abaixo do outro */
        align-items: center; /* Centraliza no meio da tela */
        padding: 10px 0;
    }

    .botao-menu {
        width: 90%;
        max-width: 250px; /* Limita o tamanho dos botões */
        text-align: center;
        justify-content: center;
        padding: 12px;
        font-size: 16px; /* Ajusta o tamanho do texto */
    }
}
@media screen and (max-width: 768px) {
    .banner-text h1 {
        font-size: 22px; /* Diminui o título para não quebrar */
        text-align: center;
    }

    .banner-text p {
        font-size: 14px; /* Ajusta subtítulo para não ocupar espaço excessivo */
        text-align: center;
    }
}
@media screen and (max-width: 768px) {
    .quem-somos-container {
        display: flex;
        flex-direction: column; /* Empilha as caixas para não ficarem espremidas */
        align-items: center;
    }

    .quem-somos-box {
        width: 90%; /* Mantém as caixas organizadas */
        max-width: 350px;
        margin-bottom: 15px;
    }
}
.banner {
    width: 100vw; /* Ocupa toda a largura da tela */
    height: auto;
    max-height: 400px; /* Ajuste conforme necessário */
    background-size: cover; /* Garante que a imagem ocupe toda a área */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat;
}

/* Ajusta a imagem dentro do banner */
.banner img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Mantém a proporção da imagem sem cortes */
}
.btn-desbloquear {
    background-color: #FFD700; /* Cor Amarela */
    color: black;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px; /* Aumenta o espaço acima do botão */
    margin-left: 10px; /* Afasta um pouco da esquerda */
    cursor: pointer;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.btn-desbloquear:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}

/* Ajuste específico para o ícone de cadeado */
.btn-desbloquear i {
    margin-right: 8px; /* Espaça mais o cadeado do texto */
    font-size: 20px; /* Ajusta o tamanho do ícone */
}
/* Ajusta o cabeçalho para telas menores */
@media (max-width: 768px) {
    .banner {
        background-size: cover; /* Mantém a imagem proporcional */
        background-position: center;
        text-align: center;
        padding: 20px;
    }

    .banner-text h1 {
        font-size: 24px; /* Diminui o tamanho do título */
    }

    .banner-text p {
        font-size: 16px;
    }

    /* Ajusta os botões do menu */
    .menu-fixo ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* Permite que os botões fiquem lado a lado */
        justify-content: center; /* Centraliza os itens */
        padding: 10px;
    }

    .menu-fixo ul li {
        flex: 1 1 45%; /* Faz os botões ficarem lado a lado em telas menores */
        margin: 5px;
    }

    .menu-fixo ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        padding: 10px;
        text-align: center;
        width: 100%;
    }

    /* Ajusta os cartões de "Quem Somos" */
    .quem-somos-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .quem-somos-box {
        width: 90%;
        margin-bottom: 10px;
    }

    /* Ajusta a posição dos valores */
    .valores-lista {
        text-align: left;
        padding-left: 10px;
    }

    /* Ajusta o botão de desbloquear */
    .btn-desbloquear {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
}/* ====== AJUSTE PARA O BANNER ====== */
.banner {
    width: 100%;
    max-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ====== AJUSTE DO MENU NO MOBILE ====== */
.menu-fixo {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: #002147;
    flex-wrap: wrap; /* Permite que os botões fiquem lado a lado no mobile */
}

.menu-fixo ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
}

.menu-fixo li {
    flex: 1 1 45%; /* Deixa dois botões por linha */
    max-width: 180px; /* Limita o tamanho */
    display: flex;
    justify-content: center;
}

.menu-fixo a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #FFD700;
    color: #002147;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    transition: 0.3s;
}

.menu-fixo a:hover {
    background: #e6c200;
}

/* ====== AJUSTE DOS BLOCOS "QUEM SOMOS" ====== */
.quem-somos-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.quem-somos-box {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    width: 100%;
    max-width: 320px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* ====== RESPONSIVIDADE ====== */
@media screen and (max-width: 768px) {
    /* Ajuste para o banner */
    .banner {
        max-height: 250px;
    }

    .banner-text h1 {
        font-size: 22px;
    }

    .banner-text p {
        font-size: 14px;
    }

    /* Ajuste do menu no mobile */
    .menu-fixo ul {
        flex-direction: row;
        justify-content: center;
        padding: 10px 0;
    }

    .menu-fixo li {
        flex: 1 1 45%;
        max-width: 180px;
    }

    /* Ajuste dos blocos "Quem Somos" no mobile */
    .quem-somos-container {
        flex-direction: column;
        align-items: center;
    }

    .quem-somos-box {
        width: 90%;
        max-width: 320px;
        margin-bottom: 15px;
    }
}
/* ====== AJUSTE PARA O BANNER ====== */
.banner {
    width: 100%;
    max-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ====== AJUSTE DO MENU NO MOBILE ====== */
.menu-fixo {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: #002147;
    flex-wrap: wrap; /* Permite que os botões fiquem lado a lado no mobile */
}

.menu-fixo ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
}

.menu-fixo li {
    flex: 1 1 45%; /* Deixa dois botões por linha */
    max-width: 180px; /* Limita o tamanho */
    display: flex;
    justify-content: center;
}

.menu-fixo a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #FFD700;
    color: #002147;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    transition: 0.3s;
}

.menu-fixo a:hover {
    background: #e6c200;
}

/* ====== AJUSTE DOS BLOCOS "QUEM SOMOS" ====== */
.quem-somos-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.quem-somos-box {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    width: 100%;
    max-width: 320px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* ====== RESPONSIVIDADE ====== */
@media screen and (max-width: 768px) {
    /* Ajuste para o banner */
    .banner {
        max-height: 250px;
    }

    .banner-text h1 {
        font-size: 22px;
    }

    .banner-text p {
        font-size: 14px;
    }

    /* Ajuste do menu no mobile */
    .menu-fixo ul {
        flex-direction: row;
        justify-content: center;
        padding: 10px 0;
    }

    .menu-fixo li {
        flex: 1 1 45%;
        max-width: 180px;
    }

    /* Ajuste dos blocos "Quem Somos" no mobile */
    .quem-somos-container {
        flex-direction: column;
        align-items: center;
    }

    .quem-somos-box {
        width: 90%;
        max-width: 320px;
        margin-bottom: 15px;
    }
}
/* ====== AJUSTE DO TEXTO PARA MOBILE ====== */
@media screen and (max-width: 768px) {
    /* Ajuste do título principal */
    .banner-text h1 {
        font-size: 18px; /* Reduzindo para caber melhor */
        text-align: center;
        line-height: 1.2; /* Melhor espaçamento */
    }

    .banner-text p {
        font-size: 14px; /* Subtítulo menor */
        text-align: center;
        line-height: 1.2;
    }

    /* Ajuste do menu fixo */
    .menu-fixo a {
        font-size: 14px; /* Reduz tamanho dos botões */
        padding: 10px 14px;
    }

    /* Ajuste do texto "Quem Somos" */
    .quem-somos-container h2 {
        font-size: 18px;
        text-align: center;
    }

    .quem-somos-box p {
        font-size: 14px;
        text-align: center;
    }
    
    /* Ajuste do espaçamento entre os botões */
    .menu-fixo ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .menu-fixo ul li {
        margin: 5px;
    }

    /* Reduzir tamanho dos ícones nos botões */
    .menu-fixo a img {
        width: 16px;
        height: 16px;
    }

    /* Ajustando espaçamento dos blocos */
    .quem-somos-container {
        padding: 20px;
    }

    /* Ajuste dos cartões */
    .quem-somos-box {
        width: 90%;
        max-width: 350px;
        margin-bottom: 15px;
    }
}
/* ====== ESTILIZAÇÃO DO CARROSSEL ====== */
.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
}

.carrossel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    scroll-behavior: smooth; /* Garante rolagem suave */
    overflow-x: auto; /* Permite rolagem horizontal */
    white-space: nowrap; /* Mantém os itens na mesma linha */
    scroll-snap-type: x mandatory; /* Garante que os itens fiquem centralizados ao rolar */
}

.carrossel-item {
    min-width: 80%;
    max-width: 80%;
    margin: 0 10px;
    text-align: center;
    scroll-snap-align: center; /* Centraliza cada item ao rolar */
}

/* ESTILIZAÇÃO DOS BOTÕES */
.seta {
    background: #002147;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.seta:hover {
    background: #0050a4;
}

.seta.esquerda {
    left: 10px;
}

.seta.direita {
    right: 10px;
}
.pagamento-container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.preco-destaque {
    font-size: 18px;
    font-weight: bold;
    color: #f39c12;
    margin-bottom: 10px;
}

.valor {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
}

.preco-riscado {
    text-decoration: line-through;
    color: #e74c3c;
}

.btn-pagamento {
    display: inline-block;
    background: #ffcc00;
    color: #000;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transition: 0.3s;
}

.btn-pagamento:hover {
    background: #ffbb00;
    transform: scale(1.05);
}

.metodos-pagamento {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.metodos-pagamento img {
    width: 50px;
    height: auto;
    filter: grayscale(100%);
    transition: 0.3s;
}

.metodos-pagamento img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}
.footer-inteligente {
    background-color: #0D1B2A; /* Azul escuro profissional */
    color: white;
    padding: 40px 20px;
    text-align: left;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-col h4 {
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid #FFB400;
    display: inline-block;
    padding-bottom: 5px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin: 5px 0;
}

.footer-col ul li a {
    color: white;
    text-decoration: none;
}

.footer-col ul li a:hover {
    text-decoration: underline;
}

.payment-icons img {
    margin-right: 10px;
    vertical-align: middle;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #FFB400;
    margin-top: 20px;
}
.footer-inteligente {
    background-color: #ffffff; /* Fundo branco */
    color: #333; /* Cor do texto para contraste */
    padding: 40px 0;
    text-align: left;
    font-size: 14px;
    border-top: 2px solid #f1f1f1;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1200px;
    margin: auto;
}

.footer-col {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000; /* Preto para títulos */
}

.footer-col p, .footer-col ul li a {
    color: #444; /* Cinza escuro para o texto */
    text-decoration: none;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.social-icons img,
.payment-icons img {
    width: 30px;
    margin-right: 8px;
}

.footer-bottom {
    text-align: center;
    padding: 10px 0;
    background-color: #f9f9f9; /* Cinza claro para destaque */
    font-size: 12px;
    color: #555;
    margin-top: 20px;
}
.container {
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
}

.titulo-secao {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #222;
}

.descricao-secao {
    text-align: center;
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
}

.beneficios-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.beneficio-item {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 20px;
    width: 45%;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.beneficio-item:hover {
    transform: scale(1.05);
}

.icone {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}

.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.carrossel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 80%;
    padding: 10px;
}

.carrossel-item {
    min-width: 200px;
    text-align: center;
    margin: 0 10px;
}

.carrossel-item img {
    width: 100px;
    height: auto;
    margin-bottom: 5px;
}

.consultores-lista {
    list-style: none;
    padding: 0;
    text-align: center;
    font-size: 18px;
    color: #444;
}

.consultores-lista li {
    background: #eef;
    margin: 5px auto;
    padding: 10px;
    width: 80%;
    border-radius: 5px;
}

.cta-text {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
}

.cta-text a {
    color: #007bff;
    text-decoration: none;
}

.cta-text a:hover {
    text-decoration: underline;
}
.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    position: relative;
    width: 100%;
}

.carrossel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 90%;
    padding: 10px;
    gap: 15px;
    justify-content: center;
}

.carrossel-item {
    min-width: 220px; /* Aumentado para melhor proporção */
    max-width: 240px; /* Mantém um limite */
    height: 140px; /* Altura aumentada */
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}

.carrossel-item:hover {
    transform: scale(1.05);
}

.carrossel-item img {
    width: 80px;
    height: auto;
    margin-bottom: 5px;
}

.prev-btn, .next-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 16px;
    margin: 0 10px;
    transition: 0.3s;
}

.prev-btn:hover, .next-btn:hover {
    background: #0056b3;
}
.formas-pagamento {
    text-align: center; /* Centraliza as bandeiras */
    margin-top: 10px;
}

.bandeira-pagamento {
    width: 10px;  /* Ajuste este valor para o tamanho desejado */
    height: auto;  /* Mantém a proporção original */
    margin: 10px;   /* Adiciona espaço entre as bandeiras */
    opacity: 0.8;  /* Deixa um pouco mais suave */
}
.equipe-consultores {
    text-align: center;
    margin: 40px auto;
    max-width: 900px;
}

.beneficios-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.beneficio {
    background: #F8F8FF; /* Fundo claro */
    border-radius: 10px;
    padding: 15px;
    width: 280px; /* Ajustável */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.beneficio span {
    font-size: 22px;
    margin-right: 10px;
    color: #4CAF50; /* Verde para os ícones */
}

.beneficio p {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}
.carrossel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px;
}

.carrossel-item {
    width: 200px; /* Ajuste conforme necessário */
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease;
}

.carrossel-item a {
    text-decoration: none;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
}

.carrossel-item:hover {
    transform: scale(1.05);
}
.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.carrossel {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.carrossel-item {
    width: 200px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.carrossel-item a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    background: rgba(255, 255, 255, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
}

.carrossel-item:hover {
    transform: scale(1.05);
}
.empresas-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.empresa-item {
    width: 150px; /* Tamanho fixo dos quadrados */
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px; /* Arredondamento opcional */
    transition: transform 0.3s ease;
}

.empresa-item img {
    width: 80px; /* Mantém os logos padronizados */
    height: auto;
    object-fit: contain;
}

.empresa-nome {
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.empresa-item:hover {
    transform: scale(1.05);
}
.certificados-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.certificados-container img {
    width: 80px; /* Ajuste do tamanho */
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.certificados-container img:hover {
    transform: scale(1.1);
}
/* Ajuste para a seção de bandeiras de pagamento */
.metodos-pagamento {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.metodos-pagamento img {
    width: 50px; /* Tamanho menor para mobile */
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: grayscale(0); /* Mantém as cores das bandeiras */
}

.metodos-pagamento img:hover {
    transform: scale(1.1);
}

/* Ajuste para telas menores */
@media screen and (max-width: 600px) {
    .metodos-pagamento img {
        width: 40px; /* Ajuste automático no mobile */
    }
}
/* Ajustando imagens dos certificados */
.certificados-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.certificados-container img {
    width: 120px; /* Tamanho uniforme */
    max-width: 100%;
    height: auto;
}

/* Ajustando as imagens dos meios de pagamento */
.metodos-pagamento {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.metodos-pagamento img {
    width: 50px; /* Mantendo tamanho uniforme */
    height: auto;
}

/* Ajustando espaçamento dos textos abaixo das imagens */
.empresa-item {
    text-align: center;
    margin-bottom: 15px;
}

.empresa-item img {
    width: 150px; /* Todas as imagens terão o mesmo tamanho */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.empresa-nome {
    margin-top: 5px;
    font-weight: bold;
    text-align: center;
}
/* Certificados de Segurança - Ajustando Layout */
.certificados-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.certificados-container img {
    width: 110px; /* Ajustando o tamanho para manter proporcionalidade */
    height: auto;
    max-width: 100%;
    filter: none; /* Removendo opacidade */
}

/* Métodos de Pagamento - Deixando Enfileirado */
.metodos-pagamento {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.metodos-pagamento img {
    width: 60px; /* Ajuste de tamanho */
    height: auto;
    filter: none; /* Garantindo que as cores fiquem visíveis */
}
/* Melhorando os espaçamentos gerais */
body {
    line-height: 1.6; /* Melhor leitura */
    padding: 0;
    margin: 0;
}

/* Espaçamento entre seções */
.container {
    padding: 60px 15px; /* Ajusta o espaço interno das seções */
    margin-bottom: 40px; /* Aumenta o espaço entre blocos */
}

/* Ajustando o espaçamento entre os títulos e os elementos abaixo */
h2, h3 {
    margin-bottom: 20px;
}

/* Melhorando os espaçamentos dentro do banner */
.banner-text {
    padding: 40px;
}

/* Melhorando a distância entre os botões de ação */
.btn-whatsapp,
.btn-pagamento {
    margin: 20px auto; /* Centraliza e aumenta o espaçamento */
    display: block;
}

/* Ajustando os espaçamentos no rodapé */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Cria mais espaço entre as colunas */
    justify-content: space-between;
}

/* Espaçamento melhor para os itens de pagamento e certificação */
.metodos-pagamento img,
.certificados-container img {
    margin: 10px;
    width: auto;
    max-width: 100px;
}

/* Melhorando os espaços no mobile */
@media (max-width: 768px) {
    .container {
        padding: 40px 10px;
        margin-bottom: 30px;
    }
    .footer-container {
        flex-direction: column; /* Empilha no mobile */
        align-items: center;
    }
    .footer-col {
        text-align: center;
    }
}
/* Garante que o conteúdo ocupe toda a largura e não tenha sombras */
.container {
    max-width: 100%; /* Faz com que a seção ocupe toda a largura disponível */
    margin: 0 auto; /* Centraliza sem criar espaços extras */
    padding: 0; /* Remove espaços internos */
    box-shadow: none; /* Remove qualquer sombra aplicada */
    border: none; /* Remove qualquer borda */
}

/* Ajuste específico para seções que podem ter sombras */
.pagamento-container, .certificados-container, .footer-container {
    box-shadow: none !important;
    border: none !important;
}

/* Remove sombras de qualquer botão ou card */
button, .btn-pagamento, .btn-whatsapp {
    box-shadow: none !important;
}

/* Remove qualquer fundo cinza que pode estar criando a ilusão de sombra */
body {
    background-color: #fff; /* Mantém o fundo branco e limpo */
}
/* Remover sombras de todas as seções da plataforma */
* {
    box-shadow: none !important;
}

/* Ajusta a largura total para evitar margens indesejadas */
body, .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #fff; /* Mantém o fundo branco e limpo */
}

/* Remove sombras de todos os blocos e cartões */
.container, .pagamento-container, .certificados-container, 
.equipe-consultores, .beneficios-grid, .footer-container, 
.empresa-item, .modulos-bloqueados, .habilidades-container {
    box-shadow: none !important;
    border: none !important;
    background: transparent; /* Garante que não fique fundo cinza */
}

/* Remove sombras de botões */
button, .btn-pagamento, .btn-whatsapp, .btn-desbloquear {
    box-shadow: none !important;
}

/* Remove sombras de inputs e campos de formulário */
input, textarea, select {
    box-shadow: none !important;
    border: 1px solid #ccc !important; /* Mantém um visual limpo */
}

/* Remove qualquer sombra de imagens */
img {
    box-shadow: none !important;
}

/* Remove sombras específicas de cards */
.card, .beneficio-item, .quem-somos-box {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Remove possíveis sombras no cabeçalho */
.banner {
    box-shadow: none !important;
    background: transparent !important;
}
/* 🔵🔹 Ajuste geral da página - Remove sombras e cria harmonia visual */
body {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #f0f4f8, #ffffff); /* Suave transição azul/cinza */
}

/* 🔹 Ajuste dos containers principais */
.container, .pagamento-container, .certificados-container, 
.equipe-consultores, .beneficios-grid, .footer-container, 
.empresa-item, .modulos-bloqueados, .habilidades-container {
    box-shadow: none !important;
    border-radius: 8px; /* Bordas arredondadas para suavizar o design */
    background-color: #ffffff; /* Fundo branco para manter profissionalismo */
    padding: 20px;
    margin-bottom: 20px;
}

/* 🔵🔹 Destaques visuais para blocos principais */
h2, h3 {
    color: #003366; /* Azul escuro para títulos */
    font-weight: bold;
}

/* 🔹 Ajuste do Banner */
.banner {
    background: linear-gradient(to right, #003366, #00509e); /* Azul escuro profissional */
    color: white;
    text-align: center;
    padding: 30px 0;
}

/* 🔹 Botões primários de chamada para ação */
button, .btn-pagamento, .btn-whatsapp, .btn-desbloquear {
    background-color: #00509e !important;
    color: white !important;
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}
button:hover, .btn-pagamento:hover, .btn-whatsapp:hover, .btn-desbloquear:hover {
    background-color: #00264d !important; /* Tom mais escuro ao passar o mouse */
}

/* 🔹 Certificados de segurança organizados e alinhados */
.certificados-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.certificados-container img {
    max-width: 120px; /* Mantém os certificados alinhados */
    height: auto;
}

/* 🔵🔹 Ajuste nas seções de benefícios */
.beneficios-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.beneficio-item {
    width: 45%;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    background-color: #f5f5f5; /* Cinza suave */
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
}
.beneficio-item h3 {
    color: #00509e;
}

/* 🔹 Ajuste no rodapé */
.footer-inteligente {
    background: linear-gradient(to right, #00264d, #003366);
    color: white;
    padding: 30px 0;
}
.footer-inteligente a {
    color: #ffffff;
}
.footer-inteligente h4 {
    color: #f2a900;
}

/* 🔹 Ajuste nos métodos de pagamento */
.metodos-pagamento {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.metodos-pagamento img {
    max-width: 60px;
    height: auto;
}
/* 🔹 Ajuste global: Remove sombras excessivas e mantém um layout limpo */
body {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #f7f9fc; /* Fundo levemente cinza para dar contraste suave */
}

/* 🔹 Containers principais com bordas definidas e sombras suaves */
.container, .pagamento-container, .certificados-container, 
.equipe-consultores, .beneficios-grid, .footer-container, 
.empresa-item, .modulos-bloqueados, .habilidades-container {
    border-radius: 8px; /* Mantém bordas arredondadas suaves */
    background-color: #ffffff; /* Mantém fundo branco para profissionalismo */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05); /* Suaviza sombras */
}

/* 🔹 Títulos e textos */
h2, h3 {
    color: #003366; /* Azul escuro para profissionalismo */
    font-weight: bold;
}

/* 🔹 Ajuste do Banner */
.banner {
    background: linear-gradient(to right, #003366, #00509e); /* Azul escuro moderno */
    color: white;
    text-align: center;
    padding: 30px 0;
}

/* 🔹 Botões principais */
button, .btn-pagamento, .btn-whatsapp, .btn-desbloquear {
    background-color: #00509e !important;
    color: white !important;
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* Sombras leves */
    transition: background 0.3s ease;
}
button:hover, .btn-pagamento:hover, .btn-whatsapp:hover, .btn-desbloquear:hover {
    background-color: #00264d !important; /* Tom mais escuro ao passar o mouse */
}

/* 🔹 Certificados de segurança organizados e alinhados */
.certificados-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.certificados-container img {
    max-width: 120px;
    height: auto;
}

/* 🔹 Benefícios organizados */
.beneficios-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.beneficio-item {
    width: 45%;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    background-color: #f5f5f5;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08); /* Sombras mais sutis */
}
.beneficio-item h3 {
    color: #00509e;
}

/* 🔹 Rodapé organizado */
.footer-inteligente {
    background: linear-gradient(to right, #00264d, #003366);
    color: white;
    padding: 30px 0;
}
.footer-inteligente a {
    color: #ffffff;
}
.footer-inteligente h4 {
    color: #f2a900;
}

/* 🔹 Métodos de pagamento alinhados */
.metodos-pagamento {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.metodos-pagamento img {
    max-width: 60px;
    height: auto;
}
/* 🔹 Ajuste Global: Remove excesso de sombras e mantém um layout harmonioso */
body {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #f7f9fc; /* Fundo suave */
}

/* 🔹 CAIXAS ORGANIZADORAS (Com efeito harmonioso) */
.caixa-organizadora {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espaço entre as caixas */
    margin-top: 30px;
}

/* 🔹 Estrutura das Caixas */
.caixa-item {
    background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.08); /* Sombras suaves */
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação */
    width: 250px; /* Define um tamanho padrão */
}

/* 🔹 Efeito de Hover */
.caixa-item:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.15); /* Sombra mais destacada */
}

/* 🔹 Títulos e ícones dentro das caixas */
.caixa-item h3 {
    color: #00509e;
    font-size: 18px;
    margin-bottom: 10px;
}

.caixa-item .icone {
    font-size: 30px;
    color: #f2a900; /* Ícones em amarelo para contraste */
    margin-bottom: 10px;
}

/* 🔹 Contêineres principais */
.container, .pagamento-container, .certificados-container, 
.equipe-consultores, .beneficios-grid, .footer-container, 
.empresa-item, .modulos-bloqueados, .habilidades-container {
    border-radius: 8px;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
}

/* 🔹 Benefícios organizados */
.beneficios-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 🔹 Ajuste do Banner */
.banner {
    background: linear-gradient(to right, #003366, #00509e);
    color: white;
    text-align: center;
    padding: 30px 0;
}

/* 🔹 Botões principais */
button, .btn-pagamento, .btn-whatsapp, .btn-desbloquear {
    background-color: #ffd001 !important;
    color: white !important;
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}
button:hover, .btn-pagamento:hover, .btn-whatsapp:hover, .btn-desbloquear:hover {
    background-color: #ffc800 !important;
}

/* 🔹 Certificados de segurança alinhados */
.certificados-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.certificados-container img {
    max-width: 120px;
    height: auto;
}

/* 🔹 Rodapé organizado */
.footer-inteligente {
    background: linear-gradient(to right, #00264d, #003366);
    color: white;
    padding: 30px 0;
}
.footer-inteligente a {
    color: #ffffff;
}
.footer-inteligente h4 {
    color: #f2a900;
}

/* 🔹 Métodos de pagamento alinhados */
.metodos-pagamento {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.metodos-pagamento img {
    max-width: 60px;
    height: auto;
}
/* 🔹 Removendo sombras excessivas e mantendo um fundo clean */
body {
    max-width: 100%; 
    margin: 0;
    padding: 0;
    background: #f8f9fc; /* Fundo suave e moderno */
}

/* 🔹 CAIXAS ORGANIZADORAS COM BORDAS E SOMBRAS SUAVES */
.caixa-organizadora {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espaçamento uniforme */
    margin-top: 30px;
}

/* 🔹 Estrutura das Caixas */
.caixa-item {
    background: white;
    border-radius: 12px; /* Bordas arredondadas para um design moderno */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.08); /* Sombras suaves */
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave */
    width: 280px; /* Tamanho fixo para harmonia */
    border: 2px solid #e0e0e0; /* Bordas finas e elegantes */
}

/* 🔹 Efeito de Hover */
.caixa-item:hover {
    transform: translateY(-5px); /* Elevação ao passar o mouse */
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); /* Destaque na sombra */
    border-color: #00509e; /* Muda a borda no hover */
}

/* 🔹 Ícones e Títulos */
.caixa-item h3 {
    color: #00509e;
    font-size: 18px;
    margin-bottom: 10px;
}

.caixa-item .icone {
    font-size: 30px;
    color: #f2a900; /* Ícones em amarelo para destacar */
    margin-bottom: 10px;
}

/* 🔹 CAIXAS PRINCIPAIS (Benefícios, Equipe, Certificados, etc) */
.container, .pagamento-container, .certificados-container, 
.equipe-consultores, .beneficios-grid, .footer-container, 
.empresa-item, .modulos-bloqueados, .habilidades-container {
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05); /* Sombra leve */
    border: 2px solid #e3e3e3; /* Bordas finas para destacar */
}

/* 🔹 Benefícios organizados */
.beneficios-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 🔹 Ajuste do Banner */
.banner {
    background: linear-gradient(to right, #003366, #00509e);
    color: white;
    text-align: center;
    padding: 30px 0;
    border-radius: 0 0 10px 10px;
}

/* 🔹 BOTÕES COM EFEITO 3D */
button, .btn-pagamento, .btn-whatsapp, .btn-desbloquear {
    background-color: #55dd11 !important;
    color: white !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

button:hover, .btn-pagamento:hover, .btn-whatsapp:hover .btn-desbloquear:hover {
    background-color: #00ff08 !important;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px); /* Efeito de leve elevação */
}

/* 🔹 Certificados de segurança alinhados */
.certificados-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}
.certificados-container img {
    max-width: 120px;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

/* 🔹 Efeito nos Certificados */
.certificados-container img:hover {
    transform: scale(1.1);
}

/* 🔹 Rodapé organizado */
.footer-inteligente {
    background: linear-gradient(to right, #00264d, #003366);
    color: white;
    padding: 30px 0;
    border-radius: 10px;
}
.footer-inteligente a {
    color: #ffffff;
}
.footer-inteligente h4 {
    color: #f2a900;
}

/* 🔹 Métodos de pagamento alinhados */
.metodos-pagamento {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.metodos-pagamento img {
    max-width: 60px;
    height: auto;
    border-radius: 5px;
}
/* 🔹 Organização geral do container das caixas */
.anuncios-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* 🔹 Estilo das caixas (anúncios) */
.anuncio-card {
    background: #ffffff;
    border-radius: 10px;
    width: 250px;
    padding: 15px;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0;
    text-align: center;
}

/* 🔹 Imagens dentro da caixa */
.anuncio-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 🔹 Título e descrição */
.anuncio-card h3 {
    font-size: 18px;
    color: #00509e;
    margin: 10px 0;
}

.anuncio-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* 🔹 Preço */
.anuncio-card .preco {
    font-size: 20px;
    font-weight: bold;
    color: #f2a900;
}

/* 🔹 Botão de ação (comprar, contratar, etc.) */
.anuncio-card .btn-anuncio {
    background-color: #ffc107;
    color: white;
    padding: 10px;
    border-radius: 6px;
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.anuncio-card .btn-anuncio:hover {
    background-color: #003366;
    transform: scale(1.05);
}

/* 🔹 Efeito hover (destaque ao passar o mouse) */
.anuncio-card:hover {
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
    border-color: #00509e;
}

/* 🔹 Responsivo para telas menores */
@media (max-width: 768px) {
    .anuncios-container {
        flex-direction: column;
        align-items: center;
    }

    .anuncio-card {
        width: 90%;
    }
}
/* 🔹 Organização geral */
.container-organizador {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 40px auto;
    max-width: 1200px;
}

/* 🔹 Cada item dentro da organização */
.caixa-organizadora {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    width: 280px;
    text-align: center;
    border: 2px solid #dcdcdc;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* 🔹 Efeito Hover */
.caixa-organizadora:hover {
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
    border-color: #00509e;
}

/* 🔹 Título e Texto */
.caixa-organizadora h3 {
    font-size: 18px;
    color: #00509e;
    margin-bottom: 10px;
}

.caixa-organizadora p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* 🔹 Ícone */
.caixa-organizadora .icone {
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
}

/* 🔹 Responsivo */
@media (max-width: 768px) {
    .container-organizador {
        flex-direction: column;
        align-items: center;
    }

    .caixa-organizadora {
        width: 90%;
    }
}
/* 🔹 Container Principal */
.habilidades-container {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #dcdcdc;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    max-width: 1100px;
    margin: 40px auto;
}

/* 🔹 Título */
.habilidades-container h3 {
    font-size: 22px;
    color: #00509e;
    margin-bottom: 20px;
}

/* 🔹 Grid de Habilidades */
.habilidades-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* 🔹 Estilização de Cada Habilidade */
.habilidade {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 20px;
    width: 300px;
    text-align: center;
    font-size: 16px;
    border: 2px solid #dcdcdc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* 🔹 Efeito Hover */
.habilidade:hover {
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    border-color: #00509e;
}

/* 🔹 Ícones dentro das Habilidades */
.habilidade span {
    font-weight: bold;
    color: #008000;
}

/* 🔹 Responsivo */
@media (max-width: 768px) {
    .habilidades-grid {
        flex-direction: column;
        align-items: center;
    }

    .habilidade {
        width: 90%;
    }
}
/* 🔹 Container Principal */
.habilidades-container {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #dcdcdc;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    max-width: 1100px;
    margin: 40px auto;
}

/* 🔹 Título dentro da Caixa */
.habilidades-container h3 {
    font-size: 22px;
    color: #00509e;
    margin-bottom: 20px;
    background: #ffffff;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 8px;
    border: 2px solid #dcdcdc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
}

/* 🔹 Grid de Habilidades */
.habilidades-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* 🔹 Estilização de Cada Habilidade */
.habilidade {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 20px;
    width: 300px;
    text-align: center;
    font-size: 16px;
    border: 2px solid #dcdcdc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* 🔹 Efeito Hover */
.habilidade:hover {
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    border-color: #00509e;
}

/* 🔹 Ícones dentro das Habilidades */
.habilidade span {
    font-weight: bold;
    color: #008000;
}

/* 🔹 Efeito de Texto Borrado */
.borrado {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

/* 🔹 Ao Passar o Mouse, Desbloqueia o Texto */
.habilidade:hover .borrado {
    filter: blur(0);
}

/* 🔹 Responsivo */
@media (max-width: 768px) {
    .habilidades-grid {
        flex-direction: column;
        align-items: center;
    }

    .habilidade {
        width: 90%;
    }
}
/* 🔹 Container Principal */
.habilidades-container {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #dcdcdc;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    max-width: 1100px;
    margin: 40px auto;
}

/* 🔹 Título dentro da Caixa */
.habilidades-container h3 {
    font-size: 22px;
    color: #00509e;
    margin-bottom: 20px;
    background: #ffffff;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 8px;
    border: 2px solid #dcdcdc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
}

/* 🔹 Grid de Habilidades */
.habilidades-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* 🔹 Estilização de Cada Habilidade */
.habilidade {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 20px;
    width: 300px;
    text-align: center;
    font-size: 16px;
    border: 2px solid #dcdcdc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* 🔹 Efeito Hover */
.habilidade:hover {
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    border-color: #00509e;
}

/* 🔹 Ícones dentro das Habilidades */
.habilidade span {
    font-weight: bold;
    color: #008000;
}

/* 🔹 Efeito de Texto Borrado */
.borrado {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

/* 🔹 Ao Passar o Mouse, Desbloqueia o Texto */
.habilidade:hover .borrado {
    filter: blur(0);
}

/* 🔹 Responsivo */
@media (max-width: 768px) {
    .habilidades-grid {
        flex-direction: column;
        align-items: center;
    }

    .habilidade {
        width: 90%;
    }
}
/* 🔹 Botão de WhatsApp em Verde */
.btn-whatsapp {
    background: #11d258;
    color: white;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background: #1ebe5d;
}

/* 🔹 Botão "Desbloquear Agora" em Amarelo */
.btn-desbloquear {
    background: #FFC107;
    color: #000;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-desbloquear:hover {
    background: #e0a800;
}

/* 🔹 Botão "Inscreva-se" em Amarelo */
.btn-inscreva {
    background: #FFC107;
    color: #000;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-inscreva:hover {
    background: #e0a800;
}
/* ====== BOTÃO DO WHATSAPP ====== */
.btn-whatsapp {
    background-color: #25D366; /* Verde oficial do WhatsApp */
    color: white;
    padding: 14px 22px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s ease-in-out;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.btn-whatsapp:hover {
    background-color: #1EBE5C; /* Verde mais escuro ao passar o mouse */
    transform: scale(1.05);
}
/* 🔹 Botão de WhatsApp em Verde */
.btn-whatsapp {
    background: #25D366 !important; /* Verde WhatsApp */
    color: white !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.btn-whatsapp:hover {
    background: #1EBE5C !important;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

/* 🔹 Botão de Pagamento em Amarelo */
.btn-pagamento {
    background: #FFC107 !important; /* Amarelo */
    color: #000 !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.btn-pagamento:hover {
    background: #E0A800 !important;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

/* 🔹 Botão de Desbloquear em Azul */
.btn-desbloquear {
    background: #ffd000 !important; /* Azul */
    color: white !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.btn-desbloquear:hover {
    background: #ffd000 !important;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

/* 🔹 Botão Padrão (Genérico) em Laranja */
button {
    background: #FF5733 !important; /* Laranja */
    color: white !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

button:hover {
    background: #C70039 !important;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}
/* 🔹 Estilização da Coluna de Redes Sociais */
.footer-col {
    text-align: center;
}

.footer-col h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: rgb(33, 0, 250);
}

/* 🔹 Botões das Redes Sociais */
.social-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.social-btn {
    display: flex;
    align-items: center;
    background: #333;
    color: rgb(34, 0, 255);
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 200px;
    justify-content: center;
    gap: 10px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

.social-btn img {
    width: 25px;
    height: auto;
}

/* 🔹 Efeito Hover */
.social-btn:hover {
    background: #555;
    transform: scale(1.05);
}
/* 🔹 Estilização da Coluna de Redes Sociais */
.footer-col {
    text-align: center;
}

.footer-col h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: rgb(29, 20, 161);
}

/* 🔹 Botões das Redes Sociais */
.social-icons {
    display: fixo;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.social-btn {
    display: flex;
    align-items: center;
    background: rgb(29, 20, 161); /* Fundo branco para melhor contraste */
    color: rgb(29, 20, 161)!important; /* Azul para o texto */
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 200px;
    justify-content: center;
    gap: 10px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid rgb(29, 20, 161); /* Borda azul para manter destaque */
}

.social-btn img {
    width: 25px;
    height: auto;
}

/* 🔹 Efeito Hover */
.social-btn:hover {
    background: #0004ff; /* Fundo azul no hover */
    color: #0004ff !important; /* Texto branco no hover */
    transform: scale(1.05);
    border: 2px solid #0004ff;
}
/* 🔹 Estilização da Coluna de Redes Sociais */
.footer-col {
    text-align: center;
}

.footer-col h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: white;
}

/* 🔹 Ícones das Redes Sociais */
.social-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.social-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}

.social-link img {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Borda arredondada */
    border: 2px solid #0056b3; /* Borda azul */
    padding: 5px;
    background-color: rgb(72, 0, 255); /* Fundo branco */
    transition: transform 0.3s ease, border 0.3s ease;
}

/* 🔹 Nome das Redes Sociais */
.social-link span {
    font-weight: bold;
    color: #0056b3; /* Azul */
    font-size: 16px;
}

/* 🔹 Efeito Hover */
.social-link:hover img {
    transform: scale(1.1);
    border: 2px solid white;
    background-color: #0056b3;
}
/* 🔹 Padronizando os títulos da seção do rodapé */
.footer-col h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #0056b3; /* Azul padrão */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 🔹 Adicionando ícones antes dos títulos */
.footer-col h4::before {
    content: "📌"; /* Ícone antes do título */
    font-size: 18px;
}

/* 🔹 Estilizando os links das redes sociais */
.social-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}

.social-link img {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Borda arredondada */
    border: 2px solid #0056b3; /* Azul padrão */
    padding: 5px;
    background-color: white; /* Fundo branco */
    transition: transform 0.3s ease, border 0.3s ease;
}

/* 🔹 Nome das redes sociais fixo e padronizado */
.social-link span {
    font-weight: bold;
    color: #0056b3; /* Azul padrão */
    font-size: 16px;
}

/* 🔹 Efeito Hover nos ícones */
.social-link:hover img {
    transform: scale(1.1);
    border: 2px solid white;
    background-color: #0056b3;
    filter: brightness(1.2);
}
/* 🔹 Remover ícone antes dos títulos */
.footer-col h4::before {
    content: none; /* Removendo o ícone 📌 */
}
h1 {
    text-align: center;
    white-space: nowrap; /* Impede a quebra de linha */
    font-size: 24px; /* Ajuste o tamanho conforme necessário */
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 20px; /* Reduz um pouco no mobile para encaixar melhor */
        display: block; /* Garante que o texto se estenda na horizontal */
    }
}