/* estilo para o corpo da página jorge-style.css */
body {
margin: 0;
padding: 0;
background-color: white; /* Fundo branco */
color: black; /* Cor do texto */
}

.section-header {
margin: 50px 0;
color: #ffc107;
}
        
footer {
background-color: #02133e;
color: white;
padding: 20px 0;
text-align: center;
}

/* alinhar_textos.css */
.justificado {
text-align: justify;
}
.centralizado {
text-align: center;
}
.esquerda {
text-align: left;
}
.direita {
text-align: right;
}
.destaque {
font-weight: bold;
font-style: italic;
}
.margem-personalizada {
margin-left: 20px;
margin-right: 20px;
}
.container p {
    text-align: justify;
}  

/* imagem ao lado */
.area-imagem {
flex-shrink: 0;
width: 400px; /* ajuste o tamanho da imagem conforme necessário */
        }

.area-imagem img {
max-width: 100%;
height: auto;
border-radius: 8px;
}

.area-imagem {
width: 100%;
padding-top: 20px;
}



/* Estilo da barra de navegação fixa no topo */

        /* Barra de navegação */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*background-color: #333;*/
            padding: 10px 20px;
            color: white;
          
        }

        .navbar-left {
            display: flex;
            align-items: center;
        }

        .nav-link {
            text-decoration: none;
            color: white;
            margin-left: 15px;
            font-size: 18px;
        }

        /* Estilo do seletor */
        #seletorConteudo {
            margin-left: 20px;
            padding: 5px;
            font-size: 16px;
        }

        /* Área de conteúdo */
        #conteudo {
            padding: 20px;
            background: white;
            min-height: 300px;
            margin: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }








.navbar {
background-color: #02133e; /* Fundo escuro */
color: white; /* Texto branco */
padding: 10px 20px; /* Espaçamento interno */
display: flex; /* Uso de flexbox para organizar os itens */
align-items: center; /* Alinha os itens verticalmente */
position: fixed; /* Fixa no topo da página */
top: 0; /* Alinhamento no topo */
width: 100%; /* Ocupa a largura total da página */
z-index: 1000; /* Garante que fique sobre outros elementos */
}

/* Contêiner para o botão e título na navbar */
.navbar-left {
display: flex; /* Alinha botão e título lado a lado */
align-items: center; /* Centraliza verticalmente */
}

/* Estilo do botão de menu (☰) */
.menu-btn {
font-size: 30px; /* Tamanho grande do ícone */
background: none; /* Remove fundo do botão */
border: none; /* Remove borda */
color: white; /* Ícone branco */
cursor: pointer; /* Mostra o cursor de interação */
margin-right: 10px; /* Espaço entre o botão e o título */
}

/* Estilo do título da página */
.navbar-title {
font-size: 24px; /* Tamanho do texto do título */
}

/* Estilo do menu lateral (sidebar) */
.sidebar {
height: 100%; /* Altura total da página */
width: 250px; /* Largura do menu lateral */
position: fixed; /* Fixa na lateral esquerda */
top: 0; /* Inicia do topo */
left: -250px; /* Esconde o menu fora da tela inicialmente */
background-color: #02133e; /* Fundo escuro */
padding-top: 60px; /* Espaço no topo para evitar sobreposição com a navbar */
transition: left 0.3s ease; /* Animação suave ao abrir/fechar o menu */
z-index: 999; /* Garante que fique acima do conteúdo */
}

/* Classe que torna o menu visível */
.sidebar.active {
left: 0; /* Move o menu para dentro da tela */
}

/* Estilo dos links no menu lateral */
.sidebar a {
padding: 10px 20px; /* Espaçamento interno */
text-decoration: none; /* Remove sublinhado */
font-size: 20px; /* Tamanho da fonte */
color: white; /* Texto branco */
display: block; /* Cada link ocupa uma linha */
transition: background-color 0.3s; /* Animação de hover */
        }

/* Estilo do hover nos links */
.sidebar a:hover {
background-color: #575757; /* Fundo cinza ao passar o mouse */
        }

/* Botão para fechar o menu lateral */
.sidebar .close-btn {
position: absolute; /* Fixa o botão dentro do menu */
            top: 15px; /* Margem superior */
            right: 20px; /* Margem direita */
            font-size: 36px; /* Tamanho grande do ícone */
            color: white; /* Ícone branco */
            cursor: pointer; /* Cursor de interação */
        }

        /* Estilo do conteúdo principal */
        #main-content {
            margin-top: 60px; /* Evita sobreposição com a navbar */
            padding: 20px; /* Espaçamento interno */
            transition: margin-left 0.3s ease; /* Animação suave ao mover conteúdo */
        }

        /* Classe para mover o conteúdo ao abrir o menu */
        #main-content.overlay {
            margin-left: 250px; /* Move o conteúdo para direita */
        }

        /* Responsividade para telas menores */
        @media (max-width: 768px) {
            .sidebar {
                width: 200px; /* Reduz largura do menu lateral */
            }

            #main-content.overlay {
                margin-left: 200px; /* Ajusta movimento do conteúdo */
            }
        }



.card {
margin-bottom: 30px;
background-color: #02133e; /* Mesma cor  menu */
color: white;
}
.card-img {
max-height: 300px; /* Altura máxima para imagens do cartão */
object-fit: cover; /* Ajuste de imagem */
}



.hero {
    background: #02133e;
    color: white;
    text-align: center;
    padding: 80px 20px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-align: center;
}

.hero .btn {
    padding: 15px 30px;
    font-size: 1rem;
    background-color: #ffc107;
    color: #02133e;
    border: none;
    transition: background 0.3s ease;
}

.hero .btn:hover {
    background-color: #e0a806;
}



        .services-section {
            padding: 50px 20px;
            background-color: #fff;
        }

        .services-section h2 {
            text-align: center;
            margin-bottom: 40px;
            color: #02133e;
        }