@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');
/* Reseta margens e paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo do body */
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 10px 0;
    }
}

main {
    margin-top: 80px; /* Compensa a altura do cabeçalho fixo */
}

.hero img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Adicione um padding ao elemento .hero para garantir que a imagem não fique cortada */
.hero {
    padding: 0px;
}

/* Novo estilo para centralizar e adicionar margens */
.company-info {
    width: 80%;            /* Limita a largura para 80% da tela */
    margin: 10px auto;     /* Centraliza horizontalmente e dá margem em cima e embaixo */
    padding: 10px;
    text-align: center;    /* Centraliza o texto */
    font-size: 19px;
}

footer {
    background-color: #003366;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    width: 100%;
}

img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.bold {
    font-weight: bold;
}

.orange-banner {
    background-color: #020b50;
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 20px;
    font-weight: bold;
    width: 100%; /* Usa 100% da largura do elemento pai, sem ultrapassar */
    position: relative;
    left: 0;
    margin: 0;
    box-sizing: border-box; /* Evita que padding afete a largura total */
}


/* Cabeçalho */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #ffffff; /* Fundo branco */
    color: #333; /* Letras pretas */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    height: 80px;
    transition: top 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

/* Logo */
.logo img {
    max-width: 120px; /* Ajusta a largura máxima da logo */
    height: auto; /* Mantém a proporção */
    display: block;
}

/* Botão do menu */
/* Estilo padrão do botão de menu */
.menu-toggle {
    display: none; /* Escondido no desktop */
    background: none;
    border: none;
    color: #ff0101; /* Cor das letras no botão */
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px; /* Espaçamento interno */
    transition: color 0.3s ease, transform 0.3s ease; /* Transição suave */
}

/* Estilo do menu no desktop */
nav.menu ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

nav.menu ul li a {
    text-decoration: none;
    color: #ff0000; /* Cor dos links */
    font-weight: bold;
    transition: color 0.3s;
    font-family: 'Montserrat', sans-serif;
}

nav.menu ul li a:hover {
    color: #fd3c1a; /* Cor de destaque ao passar o mouse */
}

/* Responsividade (mobile) */
@media (max-width: 768px) {
    /* Exibe o botão de menu em telas menores */
    .menu-toggle {
        display: block;
    }

    /* Menu oculto inicialmente no mobile */
    nav.menu {
        display: none;
        flex-direction: column;
        align-items: center; /* Centraliza os itens horizontalmente */
        position: absolute;
        top: 80px;
        left: 50%; /* Move o menu para o centro */
        transform: translateX(-50%); /* Ajusta o posicionamento horizontal */
        width: 90%; /* Define uma largura mais amigável */
        background-color: #fff; /* Fundo branco no mobile */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */
        padding: 1rem 0;
    }

    /* Menu visível quando a classe 'active' é adicionada */
    nav.menu.active {
        display: flex;
    }

    /* Menu em coluna no mobile */
    nav.menu ul {
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    /* Estilo dos links no menu */
    nav.menu ul li a {
        color: #333; /* Cor preta para o texto no mobile */
        text-align: center; /* Centraliza o texto */
        display: block; /* Garante que o link ocupa toda a largura disponível */
        padding: 0.5rem 0; /* Espaçamento entre links */
    }

    /* Cor de destaque para links no mobile */
    nav.menu ul li a:hover {
        color: #FF6347;
    }
}


.texto-justificado {
    text-align: justify;
}

/* Configuração da seção com imagem e texto */
.image-text-section {
    display: flex; /* Ativa o layout em linha */
    flex-wrap: wrap; /* Permite que os itens se ajustem no mobile */
    justify-content: space-between; /* Espaçamento entre os itens */
    align-items: center; /* Centraliza os itens verticalmente */
    gap: 20px; /* Espaçamento entre os elementos */
    padding: 20px; /* Espaçamento interno */
}

/* Configuração da imagem */
.image-text-section img {
    width: 50%; /* A imagem ocupa 50% da largura */
    height: auto; /* Mantém a proporção da imagem */
    object-fit: cover; /* Cobre o espaço sem distorcer */
    border-radius: 10px; /* Bordas arredondadas opcionais */
}

/* Configuração do texto */
.image-text-section .company-info {
    width: 45%; /* O texto ocupa 45% da largura */
    font-size: 16px; /* Tamanho do texto */
    line-height: 1.6; /* Altura da linha para melhor leitura */
    color: #333; /* Cor do texto */
}

/* Ícone de Contato Fixo */
/* Estilo padrão (desktop e telas maiores) */
.contact-icon {
    position: fixed; /* Mantém o ícone fixo na posição */
    bottom: 20px; /* Distância da parte inferior da janela */
    right: 20px; /* Distância da lateral direita */
    width: 60px; /* Tamanho do ícone */
    height: 60px; /* Tamanho do ícone */
    z-index: 1000; /* Garante que fique sobre outros elementos */
}

.contact-icon img {
    width: 100%; /* A imagem ocupa o tamanho total do link */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 50%; /* Deixa o ícone arredondado */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra leve */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação ao passar o mouse */
}

.contact-icon img:hover {
    transform: scale(1.1); /* Aumenta o ícone levemente ao passar o mouse */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Intensifica a sombra */
}

/* Estilo para dispositivos móveis */
@media (max-width: 768px) {
    .contact-icon {
        bottom: 15px; /* Ajusta a distância da parte inferior */
        right: 15px; /* Ajusta a distância da lateral direita */
        width: 50px; /* Reduz o tamanho do ícone */
        height: 50px; /* Reduz o tamanho do ícone */
    }

    .contact-icon img {
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Sombra levemente menor */
    }
}

/* Estilo para telas muito pequenas (ex.: celulares de 320px de largura) */
@media (max-width: 480px) {
    .contact-icon {
        bottom: 10px; /* Deixa ainda mais próximo da borda inferior */
        right: 10px; /* Ajusta o espaçamento lateral */
        width: 40px; /* Tamanho menor para telas pequenas */
        height: 40px;
    }

    .contact-icon img:hover {
        transform: scale(1.05); /* Efeito hover mais sutil em telas pequenas */
    }
}


/* Seção de Informações em Linha */
.company-info-section {
    display: flex; /* Ativa o layout Flexbox */
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas menores */
    justify-content: space-between; /* Espaçamento entre os itens */
    gap: 20px; /* Espaçamento entre as caixas */
    padding: 20px; /* Espaçamento interno */
    background-color: #f9f9f9; /* Fundo claro */
}

/* Cada item de informação */
.company-info-2 {
    flex: 1 1 calc(33.333% - 20px); /* Cada item ocupa 1/3 da linha */
    background-color: #fff; /* Fundo branco */
    padding: 20px; /* Espaçamento interno */
    border: 1px solid #ddd; /* Borda fina */
    box-shadow: 0 2px 4px rgba(20, 1, 47, 0.1); /* Sombra leve */
    border-radius: 8px; /* Bordas arredondadas */
}

/* Títulos */
.company-info h2 {
    font-size: 20px; /* Tamanho do título */
    font-weight: 600; /* Negrito */
    margin-bottom: 10px; /* Espaçamento abaixo do título */
    color: #020b50; /* Cor destacada */
}

/* Parágrafos */
.company-info p {
    font-size: 16px; /* Tamanho do texto */
    line-height: 1.6; /* Altura da linha para legibilidade */
    color: #333; /* Cor do texto */
    text-align: justify; /* Justifica o texto */
}

.about-text-container {
    font-family: 'Montserrat', sans-serif; /* Fonte */
    font-size: 16px; /* Tamanho do texto */
    line-height: 1.6; /* Espaçamento entre linhas */
    color: #1c0d5e; /* Cor do texto */
    padding: 20px; /* Espaçamento interno */
    margin: 20px auto; /* Espaçamento superior e inferior, e centralização horizontal */
    text-align: justify; /* Justificação do texto */
    list-style: none; /* Remove marcadores */
    text-decoration: none; /* Remove a linha embaixo do texto */   
}

/* Justifica o texto apenas no mobile */
@media (max-width: 768px) {
    .about-text-container {
        text-align: justify; !important; /* Alinha o texto justificado */
        padding: 0 10px; /* Pequeno espaçamento horizontal para melhor leitura */
        font-size: 1em; /* Mantém o tamanho da fonte */
        line-height: 1.6; /* Ajusta altura da linha */
    }
}


    .company-info {
        flex: 1 1 100%; /* Cada item ocupa 100% da largura em telas menores */
    }

@media (max-width: 480px) {
    .about-text-container {
        font-size: 13px; /* Reduz ainda mais o tamanho da fonte */
        line-height: 1.4; /* Reduz o espaçamento entre linhas */
        padding: 10px; /* Reduz o espaçamento interno */
        text-align: justify; /* Alinha o texto à esquerda para melhor leitura */
        text-align: justify; !important;
    }
}


.services-container {
    display: flex;
    align-items: flex-start; /* Alinha os itens pelo topo */
    gap: 20px; /* Espaço entre a imagem e o conteúdo */
    padding: 20px;
}

.services-image {
    flex-shrink: 0; /* Impede que a imagem diminua com o conteúdo */
}

.services-image img {
    width: 100%; /* Ajusta a imagem para ocupar toda a largura do contêiner pai */
    max-width: 800px; /* Limita a largura máxima para manter proporções */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 8px; /* Bordas arredondadas, opcional */
}


.services-content {
    display: flex;
    flex-direction: column; /* Empilha as seções verticalmente */
    gap: 20px; /* Espaço entre as seções */
    flex: 1; /* Faz o conteúdo ocupar o espaço restante */
    padding-right: 20px;
}

.service-section {
    padding: 20px;
    border: 1px solid #ddd; /* Borda opcional para destaque */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    background-color: #f9f9f9; /* Cor de fundo */
}

.service-text h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
    color: #333;
}

.service-text ul {
    list-style-type: none; /* Remove os marcadores da lista */
    padding: 0;
    margin: 0;
}

.service-text li {
    margin: 5px 0;
    font-size: 1em;
}
/* Estilo padrão (desktop e telas maiores) */
.images-container {
    display: flex;
    flex-direction: column; /* As imagens ficam empilhadas em coluna */
    align-items: flex-start; /* As imagens começam alinhadas à esquerda */
    gap: 20px; /* Espaço entre as imagens */
    padding: 20px;
}

.images-row {
    display: flex;
    justify-content: flex-start; /* As imagens ficam alinhadas à esquerda */
    gap: 20px; /* Espaço entre as imagens na linha */
}

.service-image {
    width: 45%; /* Ajuste o tamanho das imagens */
    max-width: 70%; /* Máximo de largura para as imagens */
    height: auto;
    border-radius: 15px; /* Bordas arredondadas nas imagens */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave nas imagens */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para o efeito de hover */
}

/* Efeito de hover - Imagem "salta" para frente */
.service-image:hover {
    transform: translateY(-10px); /* Move a imagem para cima */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Aumenta a sombra para dar mais destaque */
}

/* Estilo responsivo para telas menores (768px ou menos) */
@media (max-width: 768px) {
    .images-container {
        display: flex;
        flex-direction: column; /* As imagens ficam empilhadas em coluna */
        align-items: center; /* Centraliza as imagens horizontalmente */
        padding: 20px;
    }

    .images-row {
        flex-direction: column; /* Empilha as imagens verticalmente */
        justify-content: center; /* Centraliza as imagens horizontalmente */
        gap: 15px; /* Reduz o espaço entre as imagens */
    }

    .service-image {
        width: 80%; /* Aumenta a largura das imagens para melhor aproveitamento do espaço */
        max-width: 90%; /* Máximo de largura para garantir que caibam na tela */
        border-radius: 10px; /* Bordas levemente menores */
    }
}

/* Estilo para telas muito pequenas (480px ou menos) */
@media (max-width: 480px) {
    .images-container {
        padding: 15px; /* Reduz o padding para economizar espaço */
        gap: 15px; /* Ajusta o espaço entre as linhas de imagens */
    }

    .service-image {
        width: 100%; /* Imagens ocupam quase toda a largura disponível */
        max-width: 100%; /* Remove limite de largura para preencher a tela */
        border-radius: 8px; /* Bordas menores */
    }
}

.partner-team {
    text-align: center;
    margin: 50px auto;
    max-width: 800px; /* Limita a largura da seção */
    padding: 20px; /* Espaçamento interno */
    line-height: 1.6; /* Melhora a legibilidade */
    font-family: 'Montserrat', sans-serif; /* Fonte uniforme */
}

.partner-team h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333; /* Ajuste de cor */
}

.partner-team p {
    font-size: 1rem;
    font-weight: 400;
    color: #555; /* Texto mais claro */
}


/* Estilo do menu */
/* Contêiner do menu */
.menu-container {
    display: flex; /* Flexbox para organizar os itens */
    justify-content: space-between; /* Espaça os itens horizontalmente */
    align-items: center; /* Alinha os itens verticalmente */
    background-color: #ffffff; /* Fundo branco */
    padding: 10px 20px; /* Espaçamento interno */
    width: 100%; /* Garante que o menu ocupe toda a largura */
}

/* Lista do menu */
.menu-container ul {
    list-style: none; /* Remove os marcadores da lista */
    display: flex; /* Itens dispostos lado a lado */
    gap: 20px; /* Espaço entre os itens */
    margin: 0;
    padding: 0;
}

/* Links do menu */
.menu-container ul li a {
    text-decoration: none;
    color: #333; /* Cor padrão dos links */
    font-size: 18px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s;
}

/* Efeito de hover nos links */
.menu-container ul li a:hover {
    color: #FF6347; /* Cor de destaque no hover */
}

/* Estilo do botão de emergência */
.menu-btn-emergencia {
    margin-left: auto; /* Empurra o botão para o canto direito */
    list-style: none; /* Remove marcadores */
}

/* Estilo do botão de emergência */
.btn-emergencia {
    background-color: #FF4500; /* Cor laranja forte */
    color: white;
    padding: 10px 20px;
    border-radius: 25px; /* Bordas arredondadas */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border: none; /* Remove bordas */
    outline: none; /* Remove contorno */
    text-align: center; /* Centraliza o texto horizontalmente */
    display: inline-block; /* Para o botão se ajustar ao conteúdo */
    white-space: nowrap; /* Garante que o texto não quebre para a próxima linha */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efeito ao passar o mouse no botão */
.btn-emergencia:hover {
    background-color: #450d03; /* Cor mais clara no hover */
    transform: scale(1.05); /* Leve aumento */
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    .btn-emergencia {
        font-size: 14px; /* Ajusta o tamanho da fonte */
        padding: 8px 16px; /* Diminui o padding */
        width: 100%; /* Faz o botão ocupar toda a largura da tela */
        border-radius: 20px; /* Bordas mais suaves */
    }
}


/* Responsividade */
@media (max-width: 768px) {
    /* Alinha os itens do menu em coluna */
    .menu-container ul {
        display: none; /* Menu oculto por padrão */
        flex-direction: column; /* Itens empilhados no mobile */
        align-items: flex-start; /* Alinha os itens à esquerda */
        gap: 10px;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #fff; /* Fundo branco */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
        padding: 1rem 0;
    }

    /* Exibe o menu quando o botão for ativado */
    .menu-container.active ul {
        display: flex; /* Exibe o menu ao clicar */
    }

    .menu-container ul li a {
        font-size: 16px; /* Tamanho de fonte ajustado no mobile */
    }

    .menu-container ul li a:hover {
        color: #FF6347; /* Cor de destaque no mobile */
    }

    /* Exibe o botão de menu no mobile */
    .menu-toggle {
        display: block; /* Mostra o botão */
        background: none;
        border: none;
        color: #ff0101; /* Cor do botão */
        font-size: 1.5rem;
        cursor: pointer;
    }

    .menu-btn-emergencia {
        margin-left: 0; /* Ajusta o botão de emergência */
    }
}

.company-direita {
    width: 50%;
    float: right;
    text-align: right;
    margin-right: 20px; /* ajuste conforme necessário */
}

.titulo-centralizado {
    text-align: center;
}

.titulo-menor {
    font-size: 1.5em; /* ajuste conforme necessário */
}

.texto-justificado {
    text-align: justify;
}

.cor-personalizada {
    color: #FF5733; /* ajuste para a cor desejada, pode ser um código hexadecimal, nome da cor, rgb, etc. */
}

.quem-somos-esquerda {
    width: 100%;
    text-align: left;
    font-size: 2em; /* ajuste conforme necessário */
    color: navy; /* ajuste conforme necessário */
    margin-left: 20px; /* ajuste conforme necessário */
}

.company-direita {
    width: 50%;
    float: right;
    text-align: right;
    margin-right: 20px; /* ajuste conforme necessário */
}

.titulo-centralizado {
    text-align: center;
}

.titulo-menor {
    font-size: 1.5em; /* ajuste conforme necessário */
}

.texto-justificado {
    text-align: justify;
}

.cor-azul-marinho {
    color: navy; /* ou use #000080 para azul marinho */
}
.about-container-grey {
    display: flex;
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: space-between; /* Espaça as divs horizontalmente */
    padding: 40px; /* Adiciona espaçamento interno */
    font-family: Arial, sans-serif; /* Fonte padrão */
    background-color: #f0f0f0; /* Cor de fundo cinza claro */
    padding: 15px; /* Adiciona um pouco de espaçamento interno */
    text-align: justify;
}

.value-card-container {
    display: flex; /* Utiliza o layout flexível para alinhar os itens */
    justify-content: space-between; /* Distribui o espaço entre os itens de forma igual */
    flex-wrap: wrap; /* Permite que os itens quebrem para uma nova linha se necessário */
    gap: 20px; /* Adiciona um espaço entre as cartas */
}

.value-card {
    flex: 1; /* Faz com que cada carta ocupe espaço igual */
    min-width: 250px; /* Define a largura mínima para garantir que as cartas fiquem lado a lado */
    max-width: 30%; /* Define a largura máxima para cada carta */
    padding: 10px; /* Adiciona espaçamento interno */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil */
    border-radius: 20px; /* Adiciona bordas arredondadas */
    background-color: #fff; /* Define a cor de fundo */
    text-align: justify; /* Justifica o texto dentro das cartas */
}

.value-card h3 {
    margin-bottom: 40px; /* Adiciona espaçamento inferior ao título */
    font-size: 1.3em; /* Ajuste conforme necessário */
    background-color: #002c77; /* Cor de fundo azul para o título */
    color: white; /* Cor do texto no título */
    padding: 10px; /* Adiciona espaçamento interno ao título */
    border-radius: 10px 10px 0 0; /* Bordas arredondadas para o topo do título */
}

.value-card p,
.value-card ul {
    margin-top: 0; /* Remove o espaçamento superior */
    margin-bottom: 10px; /* Adiciona espaçamento inferior */
    font-size: 1em; /* Ajuste conforme necessário */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .value-card-container {
        flex-direction: column; /* Organiza as cartas em coluna */
        align-items: center; /* Centraliza as cartas */
    }

    .value-card {
        max-width: 90%; /* As cartas ocupam quase toda a largura da tela */
        min-width: unset; /* Remove a largura mínima */
    }

    .value-card h3 {
        font-size: 1.2em; /* Reduz o tamanho do título */
        text-align: center; /* Centraliza o texto no título */
    }

    .value-card p,
    .value-card ul {
        font-size: 0.9em; /* Reduz o tamanho do texto */
        text-align: center; /* Centraliza o texto */
    }
}

@media (max-width: 480px) {
    .value-card {
        padding: 8px; /* Reduz o espaçamento interno */
        max-width: 95%; /* Ocupa quase toda a largura */
        border-radius: 10px; /* Bordas menos arredondadas */
    }

    .value-card h3 {
        font-size: 1em; /* Título menor */
        padding: 8px; /* Reduz o espaçamento do título */
    }

    .value-card p,
    .value-card ul {
        font-size: 0.85em; /* Reduz ainda mais o tamanho do texto */
    }
}



.about-heading {
    font-size: 1.5em; /* Tamanho do subtítulo */
    font-weight: bold;
    color: #002c77; /* Cor do texto */
    margin-bottom: 20px;
    text-align: center; /* Justificação do texto */    
}

@media (max-width: 768px) {
    .about-heading {
        font-size: 1.2em; /* Reduz tamanho da fonte em telas menores */
        margin-bottom: 15px; /* Ajusta o espaçamento */
    }
}

.about-text-container p {
    font-size: 1em;
    line-height: 1.6; /* Altura da linha */
    color: #002c77; /* Cor do texto */
    margin-bottom: 20px; /* Espaçamento entre os parágrafos */
    font-family: 'Montserrat', sans-serif; /* Fonte */
    text-align: justify;

    

}

.about-text-container-comandante {
    font-size: 1em;
    padding-right: 40px;
    line-height: 1.6; /* Altura da linha */
    color: #002c77; /* Cor do texto */
    margin-bottom: 20px; /* Espaçamento entre os parágrafos */
    font-family: 'Montserrat', sans-serif; /* Fonte */
    text-align: justify; /* Justificação do texto */    

}
/* Centraliza o texto apenas no mobile */
/* Justifica o texto apenas no mobile */
@media (max-width: 768px) {
    .about-text-container-comandante {
        text-align: justify; /* Alinha o texto justificado */
        padding: 0 10px; /* Pequeno espaçamento horizontal */
        font-size: 1em; /* Mantém o tamanho da fonte */
        line-height: 1.6; /* Ajusta altura da linha */
    }
}


/* Estilos padrão para telas grandes */
.about-container-white {
    display: flex;
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: space-between; /* Espaça as divs horizontalmente */
    padding: 40px; /* Adiciona espaçamento interno */
    background-color: #ffffff; /* Cor de fundo branca */
    font-family: Arial, sans-serif; /* Fonte padrão */
}

.about-title-container-img {
    padding-right: 40px;
    flex: 0 0 40%; /* Mantém a largura ocupada em 40% */
    text-align: left; /* Alinha o texto à esquerda */
}

/* Ajustes para telas médias (ex: tablets) */
@media (max-width: 1024px) {
    .about-container-white {
        flex-direction: column; /* Empilha os itens verticalmente */
        padding: 30px; /* Menos padding para telas menores */
    }

    .about-title-container-img {
        flex: 0 0 50%; /* 50% da largura em telas médias */
        padding-right: 20px; /* Menos padding */
        text-align: center; /* Alinha o texto ao centro */
    }
}

/* Ajustes para telas pequenas (ex: smartphones) */
@media (max-width: 768px) {
    .about-container-white {
        flex-direction: column; /* Empilha os itens verticalmente */
        padding: 20px; /* Menos padding para telas pequenas */
    }

    .about-title-container-img {
        flex: 0 0 100%; /* 100% da largura, ocupa toda a tela */
        padding-right: 0; /* Remove o padding */
        text-align: center; /* Centraliza o texto */
    }
}


/* Estilo padrão para telas grandes */
.about-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center; /* Centraliza os botões */
    gap: 10px; /* Espaçamento uniforme entre os botões */
}

.btn {
    background-color: #002c77;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em; /* Tamanho de fonte ajustado */
    text-align: center; /* Centraliza o texto dentro do botão */
    list-style: none; /* Remove marcadores */
    text-decoration: none; /* Remove a linha embaixo do texto */
}

.btn:hover {
    background-color: #0056b3; /* Cor ao passar o mouse */
}

/* Ajustes para telas médias (ex: tablets) */
@media (max-width: 1024px) {
    .about-buttons {
        gap: 15px; /* Aumenta o espaço entre os botões */
    }

    .btn {
        padding: 8px 18px; /* Diminui o padding para telas menores */
        font-size: 0.9em; /* Aumenta ligeiramente o tamanho da fonte */
    }
}

/* Ajustes para telas pequenas (ex: smartphones) */
@media (max-width: 768px) {
    .about-buttons {
        flex-direction: column; /* Empilha os botões verticalmente */
        gap: 20px; /* Aumenta o espaçamento entre os botões */
    }

    .btn {
        padding: 12px 25px; /* Ajuste o padding para que o botão fique maior */
        font-size: 1em; /* Ajusta o tamanho da fonte para legibilidade */
    }
}


.about-title-container-img-esquerda {
    padding-left: 40px;
    flex: 0 0 40%; /* Mantém a largura ocupada em 25% */
    text-align: left; /* Alinha o texto à esquerda */
}
/* Movendo a imagem para cima do título apenas no mobile */
@media (max-width: 768px) {
    .about-title-container-img-esquerda {
        display: block;
        order: -1; /* Move a imagem para cima */
        padding: 0; /* Remove qualquer padding lateral */
        margin-bottom: 15px; /* Espaço entre a imagem e o título */
        text-align: center; /* Centraliza a imagem */
    }

    .about-title-container-img-esquerda img {
        max-width: 90%; /* Torna a imagem menor em telas pequenas */
        height: auto; /* Mantém a proporção da imagem */
    }
}

.about-text-container-comandante-direita {
    font-size: 1em;
    padding-left: 40px;
    line-height: 1.6; /* Altura da linha */
    color: #002c77; /* Cor do texto */
    margin-bottom: 20px; /* Espaçamento entre os parágrafos */
    font-family: 'Montserrat', sans-serif; /* Fonte */
    text-align: justify; /* Justificação do texto */
    list-style: none; /* Remove marcadores */


}
/* Centraliza o texto apenas no mobile */
@media (max-width: 768px) {
    .about-text-container-comandante-direita {
        text-align: justify;
        padding-left: 0; /* Remove o padding lateral esquerdo */
        padding-right: 0; /* Garante que não tenha padding lateral direito */
    }
}

.services-container-fim {
    background-size: cover;  /* Faz a imagem cobrir toda a div */
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px 10px; /* Ajuste o padding */
    color: rgb(10, 8, 114);
    border-radius: 20px;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    min-height: 300px;  /* Garante uma altura mínima */
    height: 100%;  /* Garante que a div ocupe toda a altura disponível */
}
/* Centraliza apenas o parágrafo no mobile */
@media (max-width: 768px) {
    .services-container-fim p {
        text-align: justify; /* Centraliza o texto */
        text-align-last: center;
        font-size: 1em; /* Mantém o tamanho da fonte */
        margin-left: 30px; /* Centraliza margens horizontalmente */
        margin-right: 30px;
        padding: 10px 0; /* Espaçamento interno */
    }
}


.services-title {
    font-size: 2.5em;
    margin-bottom: 30px; /* Dê um pouco mais de espaço entre o título e os botões */
    font-weight: bold;
    padding-bottom: 20;
    text-transform: uppercase;
    color: #002c77;
}

.services-grid {
    display: flex;
    justify-content: center; /* Centraliza os botões na linha */
    flex-wrap: wrap; /* Permite que os botões se ajustem em várias linhas se necessário */
    gap: 20px; /* Espaçamento entre os botões */
    padding-top: 70px;

}

.service-item {
    background-color: rgba(0, 44, 119, 0.7); /* Fundo semi-transparente */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.service-item h3 {
    font-size: 1.6em;
    margin-bottom: 15px;
}

.btn-service {
    background-color: #002c77;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
}

.btn-service:hover {
    background-color: #0056b3;
}

  .botao-container {
    text-align: center;
  }
  
  .botao {
    background-color: #274578; /* Cor azul claro */
    border: none;
    border-radius: 24px; /* Cantos arredondados */
    width: 300px;
    padding: 0;
    color: #fff;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efeito de sombra */
    cursor: default;
    outline: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    list-style: none; /* Remove marcadores */
  }
  
  .botao .titulo {
    background-color: #274578;
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 20px;
    text-align: center;
    list-style: none; /* Remove marcadores */
  }
  
  .botao .subtitulo {
    background-color: #fff; /* Fundo branco */
    color: #274578; /* Azul escuro */
    font-size: 1rem;
    padding: 15px;
    width: 100%;
    min-height: 250px; /* Define uma altura mínima */
    display: flex;
    align-items: center; /* Centraliza verticalmente o texto */
    justify-content: center; /* Centraliza horizontalmente o texto */
    list-style: none; /* Remove marcadores */
}
  .botao:hover {
    transform: scale(1.05); /* Efeito de zoom */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
  
  .botao:active {
    transform: scale(1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  }
  .salvage-text {
    font-family: 'Montserrat', sans-serif; /* Altere para a fonte de sua preferência */
    font-size: 16px; /* Tamanho do texto */
    line-height: 1.6; /* Espaçamento entre linhas */
    color: #1c0d5e; /* Cor do texto */
    padding: 10px; /* Espaçamento interno */
    margin-bottom: 20px; /* Espaçamento inferior */
}
/* Estilo padrão para a galeria */
.image-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre as linhas de imagens */
}

.image-row {
    display: flex;
    justify-content: space-around; /* Ajusta o espaço entre as imagens */
    align-items: center; /* Alinha verticalmente as imagens */
    gap: 10px; /* Espaçamento entre imagens */
}

/* Ajustes para as imagens em qualquer tamanho de tela */
.image-row img {
    width: 200px; /* Tamanho fixo das imagens */
    height: 130px;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Ajustes para telas médias (ex: tablets) */
@media (max-width: 1024px) {
    .image-row img {
        width: 150px; /* Reduz o tamanho das imagens em tablets */
        height: 100px;
    }

    .image-row {
        justify-content: space-evenly; /* Ajusta o espaçamento em tablets */
    }
}

/* Ajustes para telas pequenas (ex: smartphones) */
@media (max-width: 768px) {
    .image-gallery {
        gap: 10px; /* Menos espaço entre as linhas de imagens */
    }

    .image-row {
        flex-direction: column; /* Empilha as imagens em dispositivos móveis */
        justify-content: center; /* Centraliza as imagens em smartphones */
    }

    .image-row img {
        width: 100%; /* Faz as imagens ocuparem 100% da largura disponível */
        height: auto; /* Ajusta a altura proporcionalmente */
        max-width: 300px; /* Limita a largura máxima para não ficar muito grande */
        margin-bottom: 10px; /* Adiciona um espaçamento entre as imagens */
    }
}


.partners-team {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.partners-team h2 {
    font-size: 24px;
    color: white;
    background-color: #042443; /* Tarja azul */
    padding: 10px;
    text-align: center; /* Centraliza o texto no título */
    margin: 0;
    width: 100%;
    border-radius: 30px; /* Arredonda os cantos da tarja */
}

.partners-team p {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin-top: 10px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 20px; /* Espaço entre as caixas */
    margin-top: 20px;
}

.partner-box {
    background-color: #ffffff;
    border: 1px solid #e12020;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}   

.partner-box h3 {
    font-size: 20px;
    color: #042443;
    margin-bottom: 10px;
}

.partner-box p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}
/* Estilo padrão (desktop) */
.footer-container {
    background-color: #ffffff; /* Fundo branco */
    color: rgb(21, 12, 79); /* Texto azul escuro */
    padding: 20px 30px; /* Espaçamento interno */
    display: flex;
    flex-direction: column; /* Para empilhar seções no layout */
    gap: 20px; /* Espaço entre as seções */
    border-top: 3px solid #274578; /* Linha superior para destaque */
  }
  
  .footer-info {
    text-align: left;
    max-width: 70%;
  }
  
  .footer-info p {
    margin: 5px 0;
    font-size: 1rem;
  }
  
  .footer-info strong {
    color: #0b0e50;
  }
  
  .footer-logo {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .footer-logo img {
    max-width: 320px;
    height: auto;
  }
  
  .footer-legal {
    text-align: center;
    font-size: 0.9rem;
  }
  
  .footer-legal a {
    color: #0a0b44;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s;
  }
  
  .footer-legal a:hover {
    color: #00bfff;
  }
  
  /* Estilo para dispositivos móveis */
  @media (max-width: 768px) {
    .footer-container {
      padding: 15px 20px;
      flex-direction: column; /* Empilha tudo */
      gap: 15px;
    }
  
    .footer-info {
      max-width: 100%; /* Permite ocupar toda a largura */
      text-align: center; /* Centraliza o texto para melhor leitura */
    }
  
    .footer-logo {
      position: static; /* Remove posicionamento absoluto */
      margin: 0 auto; /* Centraliza o logo */
      transform: none; /* Remove transformação */
      text-align: center;
    }
  
    .footer-logo img {
      max-width: 200px; /* Reduz o tamanho do logo para telas menores */
    }
  
    .footer-legal {
      font-size: 0.8rem; /* Diminui o texto */
    }
  }
  
  /* daaqui p baixo é novo*/

/* styles.css */

/* styles.css */

/* styles.css */


/* Estilo padrão (desktop e telas maiores) */
.stellar-logo-banner {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.logo-container {
    position: absolute;
    top: 50%; /* Centraliza verticalmente */
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%);
    z-index: 2;
}

.logo {
    width: 800px; /* Largura fixa em desktop */
    max-width: 100%; /* Garante responsividade */
}

.stellar-banner {
    position: relative;
    width: 100%;
    height: 90vh; /* Altura do banner */
    overflow: hidden;
}

.brand-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Garante que ocupa o container todo */
    z-index: 1;
}

.brand-logo {
    max-width: 900px;
    height: auto;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .stellar-logo-banner {
        height: 70vh; /* Ajusta altura para telas menores */
        position: relative; /* Garante que elementos filhos respeitem o contêiner */
    }

    .logo-container {
        position: absolute; /* Permite posicionamento dentro do contêiner */
        top: 50%; /* Centraliza verticalmente */
        left: 50%; /* Centraliza horizontalmente */
        transform: translate(-50%, -50%); /* Garante centralização exata */
        z-index: 1; /* Garante que a logo fique acima do fundo */
    }

    .logo {
        width: 70%; /* Ajuste responsivo */
        max-width: 600px;
    }

    .stellar-banner {
        height: 70vh;
        position: relative; /* Ajusta para prevenir sobreposições */
        z-index: 0; /* Mantém o banner abaixo da logo */
    }
}

/* Responsividade para telas muito pequenas (480px ou menos) */
@media (max-width: 480px) {
    .stellar-logo-banner {
        height: 35vh; /* Reduz altura */
        position: relative; /* Garante o posicionamento correto */
    }

    .logo-container {
        position: absolute; /* Posiciona dentro do contêiner */
        top: 50%; /* Centraliza verticalmente */
        left: 50%; /* Centraliza horizontalmente */
        transform: translate(-50%, -50%); /* Centraliza de forma exata */
        z-index: 1; /* Garante prioridade no layout */
    }

    .logo {
        width: 90%; /* Ajusta para ocupar a tela */
        max-width: 400px;
    }

    .stellar-banner {
        height: 35vh; /* Reduz a altura do banner */
        position: relative; /* Evita conflitos de sobreposição */
        z-index: 0; /* Certifica que o banner fique no fundo */
    }
}



/* Estilo de slide */
.slides {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out; /* Transição suave de 1 segundo */
    opacity: 0;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active-slide {
    transform: translateX(0); /* Mantém a imagem ativa visível */
    opacity: 1;
}

.previous-slide {
    transform: translateX(-100%); /* Move a imagem anterior para fora da tela à esquerda */
    opacity: 0;
}

.next-slide {
    transform: translateX(100%); /* Move a próxima imagem para fora da tela à direita */
    opacity: 0;
}

.reset {
    transition: none; /* Remove a transição temporariamente */
}




.intro{
    text-align: left; /* Alinha o texto à esquerda */
    font-family: 'Montserrat', sans-serif; /* Fonte */
    font-size: 2em; /* Tamanho do texto */
    font-weight: 700; /* Peso máximo para tornar a letra mais grossa */
    color: #002c77; /* Cor do texto */
    margin: 10px 0; /* Espaçamento superior e inferior */
}

.intro {
    margin-left: 20px; /* Adiciona margem à esquerda */
}
/* Estilo geral da página de contato */
/* Estilo padrão (desktop e telas maiores) */
.contact-page {
    display: flex; /* Usa flexbox para dispor os elementos */
    height: 100vh; /* Ocupa a altura total da tela */
}

.contact-form-section {
    flex: 2; /* O formulário ocupa 2/3 da largura da tela */
    background-color: #f9f9f9; /* Cor de fundo clara para a seção do formulário */
    padding: 40px; /* Espaçamento interno */
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    flex-direction: column; /* Disposição em coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
}

.contact-form-section h2 {
    color: #002c77; /* Cor do título */
    margin-bottom: 20px; /* Espaçamento inferior do título */
}

.contact-form-section form {
    width: 100%; /* Largura total do formulário */
    max-width: 500px; /* Largura máxima do formulário */
}

.contact-form-section label {
    display: block; /* Exibe os rótulos em bloco */
    margin-bottom: 5px; /* Espaçamento inferior dos rótulos */
    color: #1c0d5e; /* Cor dos rótulos */
}

.contact-form-section input,
.contact-form-section textarea {
    width: 100%; /* Largura total dos campos */
    padding: 10px; /* Espaçamento interno dos campos */
    margin-bottom: 20px; /* Espaçamento inferior dos campos */
    border: 1px solid #ccc; /* Borda dos campos */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 1em; /* Tamanho do texto dos campos */
    font-family: 'Montserrat', sans-serif; /* Fonte */
}

.contact-form-section button {
    width: 100%; /* Largura total do botão */
    padding: 10px; /* Espaçamento interno do botão */
    background-color: #002c77; /* Cor de fundo do botão */
    color: white; /* Cor do texto do botão */
    border: none; /* Remove a borda padrão */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 1.2em; /* Tamanho do texto do botão */
    cursor: pointer; /* Muda o cursor ao passar o mouse */
}

.contact-form-section button:hover {
    background-color: #001a55; /* Cor de fundo do botão ao passar o mouse */
}

.logo-section {
    flex: 1; /* O logo ocupa 1/3 da largura da tela */
    background-color: #f9f9f9; /* Cor de fundo clara para a seção do logo */
    display: flex; /* Usa flexbox para centralizar o logo */
    justify-content: center; /* Centraliza o logo horizontalmente */
    align-items: center; /* Centraliza o logo verticalmente */
}

.contact-logo {
    max-width: 80%; /* Ajusta o tamanho máximo do logo */
    max-height: 80%; /* Ajusta a altura máxima do logo */
    transform: translateX(-100px); /* Move o logo 20px para a esquerda */
}

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
    .contact-page {
        flex-direction: column; /* Alinha os elementos verticalmente */
        height: auto; /* Permite rolagem se necessário */
    }

    .contact-form-section {
        flex: 1; /* Ocupa todo o espaço disponível */
        padding: 20px; /* Reduz o espaçamento interno */
    }

    .contact-form-section form {
        max-width: 100%; /* Remove a restrição de largura máxima */
    }

    .logo-section {
        flex: 1; /* O logo ocupa todo o espaço necessário */
        padding: 20px; /* Adiciona espaçamento interno */
    }

    .contact-logo {
        max-width: 100%; /* Garante que o logo seja responsivo */
        transform: none; /* Remove a translação */
    }
}

/* Estilo para telas muito pequenas (ex.: menores que 480px) */
@media (max-width: 480px) {
    .contact-form-section {
        padding: 15px; /* Reduz ainda mais o espaçamento interno */
    }

    .contact-form-section h2 {
        font-size: 1.5rem; /* Reduz o tamanho do título */
        margin-bottom: 15px;
    }

    .contact-form-section input,
    .contact-form-section textarea {
        font-size: 0.9rem; /* Reduz o tamanho do texto nos campos */
    }

    .contact-form-section button {
        font-size: 1rem; /* Reduz o tamanho do texto do botão */
        padding: 8px;
    }

    .logo-section {
        padding: 10px; /* Reduz o espaçamento na seção de logo */
    }

    .contact-logo {
        max-width: 90%; /* Limita o tamanho do logo */
    }
}

/*novo trem de serviços */
.services-container {
    display: flex;
    align-items: flex-start; /* Alinha os itens pelo topo */
    gap: 20px; /* Espaço entre a imagem e o conteúdo */
    padding: 20px;
}

.services-image {
    flex-shrink: 0; /* Impede que a imagem diminua com o conteúdo */
}

.services-image img {
    width: 100%; /* Ajusta a imagem para ocupar toda a largura do contêiner pai */
    max-width: 800px; /* Limita a largura máxima para manter proporções */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 8px; /* Bordas arredondadas, opcional */
}


.services-content {
    display: flex;
    flex-direction: column; /* Empilha as seções verticalmente */
    gap: 20px; /* Espaço entre as seções */
    flex: 1; /* Faz o conteúdo ocupar o espaço restante */
    padding-right: 20px;
}

.service-section {
    padding: 20px;
    border: 1px solid #ddd; /* Borda opcional para destaque */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    background-color: #f9f9f9; /* Cor de fundo */
}

.service-text h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
    color: #333;
}

.service-text ul {
    list-style-type: none; /* Remove os marcadores da lista */
    padding: 0;
    margin: 0;
}

.service-text li {
    margin: 5px 0;
    font-size: 1em;
}
.images-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Espaço entre as imagens */
    padding: 20px;
}

.images-row {
    display: flex;
    justify-content: center; /* Alinha as imagens horizontalmente */
    gap: 20px; /* Espaço entre as imagens na linha */
}

.service-image {
    width: 45%; /* Ajuste o tamanho das imagens */
    max-width: 70%; /* Máximo de largura para as imagens */
    height: auto;
    border-radius: 15px; /* Bordas arredondadas nas imagens */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave nas imagens */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para o efeito de hover */
}
.topo {
    text-align: justify;
    text-align-last: center;
    margin-left: 350px;
    margin-right: 350px;
}
/* Centraliza as imagens */
.imagem-sandro {
    width: 500px;
    height: auto;
    margin-top: 5px; /* Espaçamento da imagem principal */
    margin-left: auto;
    margin-right: auto; /* Centraliza horizontalmente */
    display: block; /* Remove o display flex */
    position: relative; /* Não usa mais position absolute */
    text-align: center;
}

/* Classe de imagem que deve ficar em cima no mobile */
.imagememcima {
    display: block; /* Garantir que a imagem seja exibida como bloco */
    margin-bottom: 20px; /* Espaço abaixo da imagem de cima */
}

.imagememcima img {
    max-width: 100%; /* Garante que a imagem fique responsiva */
    height: auto; /* Mantém a proporção da imagem */
}

/* Ajustes para telas menores */
@media (max-width: 768px) { /* Tablets e celulares */
    .imagememcima {
        display: block; /* Garante que continue sendo exibida */
        margin-bottom: 10px; /* Pequeno espaçamento */
    }
    .imagem-sandro {
        width: 80%; /* Ajusta a largura para telas menores */
        margin-top: 40px; /* Ajusta o espaçamento superior */
    }
}

@media (max-width: 480px) { /* Celulares pequenos */
    .imagememcima {
        display: block; /* Força a exibição da imagem */
        margin-bottom: 10px; /* Pequeno espaçamento */
        margin-top: 80px;
    }

    .imagem-sandro {
        width: 100%; /* Imagem ocupa toda a largura disponível */
        margin-top: 10px; /* Menor espaço superior */
    }
}


/* Estilos para o texto */
.texto-curriculo {
    text-align: justify;
    margin-left: 350px;
    margin-right: 350px;
    margin-top: 10px;
    line-height: 1.5;
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .texto-curriculo {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 50px; /* Menor espaçamento no topo */
    }
}

@media (max-width: 480px) {
    .texto-curriculo {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 30px;
    }
}

.blog {
    text-align: justify; /* Justifica o texto */
    text-align-last: center; /* Centraliza a última linha */
    margin: 30px auto; /* Margem superior de 30px e centraliza horizontalmente */
    font-size: 1.3em; /* Tamanho da fonte */
    max-width: 1200px; /* Limita a largura máxima */
    padding: 0 20px; /* Adiciona espaçamento interno nas laterais */
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .blog {
        font-size: 1.1em; /* Reduz o tamanho da fonte em telas menores */
        margin: 20px; /* Margem reduzida */
        padding: 0 15px; /* Menos padding nas laterais */
    }
}

/*aqui é um teste*/
/* Reset de margens e padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Container pai personalizado */
.caixa-container {
    display: flex; /* Flexbox para deixar lado a lado */
    flex-wrap: wrap; /* Permite quebra de linha */
    gap: 20px; /* Espaçamento entre as caixas */
    justify-content: center; /* Centraliza os itens */
    padding: 20px 0; /* Espaço superior e inferior */
}

/* Caixa individual */
.box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    width: 45%; /* Define a largura para duas caixas lado a lado */
    max-width: 900px;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}

.box:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}

/* Conteúdo esquerdo */
.content {
    padding: 20px 30px;
    width: 50%;
}

.content h2 {
    font-size: 1.6em;
    color: #003333;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.content ul {
    list-style: none;
    line-height: 1.8;
    color: #444;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
    text-align: ju;
}

.content ul li::before {
    content: "•";
    color: #008080;
    margin-right: 8px;
}

/* Imagem direita */
.image {
    width: 65%;
}

.image img {
    width: 95%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Centraliza conteúdo */
.centralizado {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .box {
        flex-direction: column; /* Organiza os itens em coluna */
        width: 90%; /* Ocupa quase toda a largura da tela */
        margin: 0 auto; /* Centraliza a caixa */
    }

    .content, .image {
        width: 100%; /* Conteúdo e imagem ocupam toda a largura */
        padding: 15px; /* Reduz o espaçamento interno */
    }

    .content h2 {
        font-size: 1.4em; /* Reduz o tamanho do título */
        text-align: center; /* Centraliza o título */
    }

    .content ul {
        text-align: center; /* Centraliza os itens da lista */
    }

    .image img {
        width: 100%; /* Imagem ocupa toda a largura do container */
        border-radius: 0; /* Remove o arredondamento em telas pequenas */
    }
}

@media (max-width: 480px) {
    .content h2 {
        font-size: 1.2em; /* Título ainda menor em telas muito pequenas */
    }

    .content ul {
        font-size: 0.9em; /* Reduz o tamanho da lista */
    }
}