/* Resetando margens e preenchimentos padrão de todos os elementos */

* {

    margin: 0; /* Remove margens padrão */

    padding: 0; /* Remove preenchimentos padrão */

    box-sizing: border-box; /* Inclui borda e padding no cálculo do tamanho */

}



/* Definição do fundo da página com gradiente e fonte padrão */

body {

    background: linear-gradient(90deg, #ffffff, #89bcff, #357ac2); /* Fundo com gradiente */

    font-family: 'Simonetta', cursive; /* Fonte principal */

    text-align: center; /* Centraliza o texto */

    overflow-x: hidden; /* Esconde rolagem horizontal */

}



/* Responsividade para telas muito pequenas */

@media screen and (max-width: 375px) {

    .body-container {

        width: 100%; /* Ocupa toda a largura */

        padding: 0; /* Remove padding */

        min-width: 100%; /* Garante largura mínima */

    }

}



/* Container principal para centralizar os elementos */

.principal-container {

    display: flex; /* Usa flexbox */

    flex-direction: column; /* Coloca elementos em coluna */

    align-items: center; /* Centraliza horizontalmente */

    justify-content: center; /* Centraliza verticalmente */

    padding: 0; /* Sem padding */

}



/* Estilização do logotipo */

.logo-container img {

    max-width: 180px; /* Largura máxima da imagem */

    height: auto; /* Altura automática */

}



/* Estilização do menu de navegação */

.navegacao-container {

    background-color: black; /* Fundo preto */

    padding: 10px 0; /* Espaçamento interno */

    width: 100vw; /* Largura total da viewport */

    border-radius: 0; /* Sem borda arredondada */

    margin-top: 10px; /* Espaço acima */

}



/* Ícone do menu (hambúrguer) */

.menu-toggle {

    display: none; /* Esconde por padrão (mostra só em mobile) */

    font-size: 32px; /* Tamanho do ícone */

    cursor: pointer; /* Cursor de ponteiro */

    color: #e4e4e4; /* Cor do ícone */

    user-select: none; /* Impede seleção do texto */

}



/* Responsividade para o menu e navegação */

@media screen and (max-width: 768px) {

    .menu-toggle {

        display: block; /* Exibe o ícone em telas pequenas */

        margin-right: 80%; /* Margem direita para posicionamento */

        word-wrap: none; /* Impede quebra de linha */

        font-size: 32px; /* Tamanho da fonte do ícone */

        cursor: pointer; /* Cursor de ponteiro ao passar o mouse */

        color: #e4e4e4; /* Cor do texto */

        user-select: none; /* Impede a seleção do texto */

        z-index: 20; /* Z-index para posicionamento */

        position: relative; /* Posicionamento relativo */

    }

    .navegacao-lista {

        display: flex; /* Exibe a lista de navegação como flexbox */

        flex-direction: column; /* Direção da coluna */

        gap: 15px; /* Espaçamento entre os itens */

        background-color: #f0f0f0; /* Cor de fundo */

        position: fixed; /* Posicionamento fixo */

        top: 50%; /* Posicionamento vertical */

        left: 50%; /* Posicionamento horizontal */

        transform: translate(-50%, -50%) scale(0.95); /* Centraliza e escala */

        z-index: 9; /* Z-index para posicionamento */

        padding: 20px 30px; /* Preenchimento */

        border-radius: 12px; /* Bordas arredondadas */

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra */

        visibility: hidden; /* Esconde o menu */

        opacity: 0; /* Transparente */

        pointer-events: none; /* Não interage */

        transition: opacity 0.3s, transform 0.3s; /* Transição suave */

        min-width: 200px; /* Largura mínima */

        align-items: center; /* Centraliza itens */

    }

    .navegacao-lista.ativa {

        visibility: visible; /* Mostra o menu */

        opacity: 1; /* Opacidade total */

        pointer-events: auto; /* Permite interação */

        transform: translate(-50%, -50%) scale(1); /* Escala normal */

    }

}



/* Estilo da lista de navegação */

.navegacao-lista {

    list-style: none; /* Remove marcadores */

    display: flex; /* Exibe como flex */

    justify-content: center; /* Centraliza horizontalmente */

    gap: 15px; /* Espaçamento entre itens */

}

.navegacao-item {

    display: inline; /* Exibe em linha */

}

.navegacao-link {

    font-family: "Simonetta", serif; /* Fonte personalizada */

    font-weight: 400; /* Peso normal */

    text-decoration: none; /* Sem sublinhado */

    color: rgb(255, 255, 255); /* Cor do texto */

    font-size: 18px; /* Tamanho da fonte */

    padding: 8px 12px; /* Espaçamento interno */

    position: relative; /* Para o efeito do ::after */

}

.navegacao-lista.ativa .navegacao-link {

    color: #000000; /* Cor do texto quando o menu está ativo */

}

.navegacao-link:hover {

    background-color: transparent; /* Sem fundo ao passar o mouse */

}

.navegacao-link::after {

    content: ""; /* Cria um pseudo-elemento */

    display: block; /* Exibe como bloco */

    width: 0; /* Largura inicial */

    height: 3px; /* Altura do efeito */

    background-color: #357ac2; /* Cor do efeito */

    transition: width 0.3s ease; /* Transição suave */

    position: absolute; /* Posição absoluta */

    bottom: -5px; /* Distância do fundo */

    left: 50%; /* Centraliza horizontalmente */

    transform: translateX(-50%); /* Centraliza */

}

.navegacao-link:hover::after {

    width: 100%; /* Efeito de sublinhado ao passar o mouse */

}



/* Seção de introdução */

.introducao-container {

    width: 100%; /* Ocupa toda a largura */

    text-align: center; /* Centraliza o texto */

}

.introducao-titulo {

    font-size: 40px; /* Tamanho do título */

    text-shadow:

      0 2px 8px rgba(0,0,0,0.18),   /* sombra principal suave */

      0 1px 0 #000000,                  /* brilho sutil em cima */

      2px 2px 0 rgba(63,133,198,0.10); /* leve sombra azul */

    font-family: 'Arial', sans-serif; /* Fonte do título */

    color: #1d5b95; /* Cor do título */

}

.introducao-texto {

    font-family: 'Simonetta', cursive; /* Fonte do texto */

    font-size: 18px; /* Tamanho da fonte */

    color: black; /* Cor do texto */

    margin-top: 10px; /* Espaço acima */

}



/* Responsividade para introdução */

@media screen and (max-width:375px) {

    .introducao-container {

        padding: 40px 40px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 32px; /* Título menor */

    }

    .introducao-texto {

        font-size: 16px; /* Texto menor */

    }

}

@media screen and (max-width: 1024px) {

    .introducao-container {

        padding: 40px 40px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 32px; /* Tamanho do título */

    }

    .introducao-texto {

        font-size: 16px; /* Tamanho do texto */

    }

}

@media screen and (max-width: 768px) {

    .introducao-container {

        padding: 40px 40px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 32px; /* Tamanho do título */

    }

    .introducao-texto {

        font-size: 16px; /* Tamanho do texto */

    }

}

@media screen and (max-width: 480px) {

    .introducao-container {

        padding: 30px 10px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 28px; /* Tamanho do título */

    }

    .introducao-texto {

        font-size: 14px; /* Tamanho do texto */

    }

}



/* Seção de serviços: bloco com imagem e texto lado a lado */

.bloco-img-texto {

    display: flex; /* Flexbox para alinhar imagem e texto */

    align-items: center; /* Centraliza verticalmente */

    gap: 32px; /* Espaço entre imagem e texto */

    max-width: 1100px; /* Largura máxima */

    margin: 40px auto; /* Centraliza e espaça verticalmente */

    padding: 20px; /* Espaçamento interno */

}

.coluna-imagem {

    flex: 1; /* Ocupa 1 parte do espaço */

    min-width: 180px; /* Largura mínima */

    display: flex; /* Flexbox */

    justify-content: center; /* Centraliza imagem */

}

.coluna-imagem img {

    max-width: 360px; /* Largura máxima da imagem */

    width: 100%; /* Responsivo */

    border-radius: 12px; /* Bordas arredondadas */

    box-shadow: 0 2px 10px rgba(50,90,150,0.1); /* Sombra */

}

.coluna-texto {

    flex: 2; /* Ocupa 2 partes do espaço */

    min-width: 200px; /* Largura mínima */

    text-align: left; /* Alinha texto à esquerda */

}

.coluna-texto p {

    margin-bottom: 0; /* Remove margem inferior */

    color: #222; /* Cor do texto */

    font-size: 1.6rem; /* Tamanho da fonte */

    font-family: 'Montserrat', sans-serif; /* Fonte */

}



/* Responsividade para serviços */

@media (max-width: 800px) {

    .bloco-img-texto {

        flex-direction: column; /* Empilha imagem e texto */

        text-align: center; /* Centraliza texto */

        gap: 18px; /* Espaço menor */

    }

    .coluna-texto {

        text-align: center; /* Centraliza texto */

        font-size: 18px; /* Tamanho da fonte */

    }

}



/* Responsividade para serviços */

@media screen and (max-width: 425px) {

    .bloco-img-texto {

        flex-direction: column; /* Empilha imagem e texto */

        text-align: center; /* Centraliza texto */

        gap: 18px; /* Espaço menor */

    }

    .coluna-texto p {

        text-align: center; /* Centraliza texto */

        font-size: 18px; /* Tamanho da fonte */

    }

}



/* Frase complementar */

.fraseComplemento p {

    font-size: 24px; /* Tamanho da fonte */

    color: #0b0b0b; /* Cor do texto */

    font-family: 'montserrat', sans-serif; /* Fonte */

    margin-top: 20px; /* Espaço acima */

    text-align: center; /* Centraliza texto */

}



@media screen and (max-width: 425px) {

    .fraseComplemento p {

        font-size: 18px;

    }

    

}



/* Frase de encerramento */

.fraseEncerramento h1 {

    font-size: 40px; /* Tamanho do título */

    text-shadow:

      0 2px 8px rgba(0,0,0,0.18),   /* sombra principal suave */

      0 1px 0 #000000,                  /* brilho sutil em cima */

      2px 2px 0 rgba(63,133,198,0.10); /* leve sombra azul */

    font-family: 'Open Sans', sans-serif; /* Fonte */

    color: #1d5b95; /* Cor */

    margin-bottom: 20px; /* Espaço abaixo */

}



@media screen and (max-width: 425px){

.fraseEncerramento h1 {

    font-size: 28px;



}

}



.fraseEncerramento p {

    font-size: 24px; /* Tamanho da fonte */

    color: #0b0b0b; /* Cor do texto */

    font-family: 'montserrat', sans-serif; /* Fonte */

    margin-top: 20px; /* Espaço acima */

    text-align: center; /* Centraliza texto */

    margin: 0 auto; /* Centraliza horizontalmente */

    max-width: 70%; /* Limita largura máxima */

}



@media screen and (max-width: 425px){

    .fraseEncerramento p {

        font-size: 18px;

        max-width: 90%;

    

    }

}



/* Depoimentos */

.depoimentos-section {

    background: #356bb4; /* Fundo azul */

    padding: 56px 0 40px 0; /* Espaçamento interno */

    color: #fff; /* Cor do texto */

    text-align: center; /* Centraliza texto */

}

.depoimentos-titulo {

    font-family: 'Arial', sans-serif;

    font-size: 2.2rem; /* Tamanho */

    margin-bottom: 32px; /* Espaço abaixo */

    color: #fff; /* Cor */

    letter-spacing: 1px; /* Espaçamento entre letras */

}

.depoimentos-carousel {

    width: 92%; /* Largura do carrossel */

    margin: 0 auto; /* Centraliza */


    font-family: 'Arial', sans-serif;
}

.depoimento-video {

    padding: 12px 12px 24px 12px; /* Espaçamento interno */

    box-sizing: border-box; /* Inclui borda e padding no cálculo */

}

.depoimento-video iframe {

    border-radius: 18px; /* Bordas arredondadas */

    box-shadow: 0 2px 12px rgba(10,30,80,0.18); /* Sombra */

    background: #222; /* Fundo escuro */

    width: 100%; /* Responsivo */

    min-height: 215px; /* Altura mínima */

    max-width: 410px; /* Largura máxima */

    margin: 0 auto; /* Centraliza */

    display: block; /* Exibe como bloco */

}



/* Rodapé */

.rodape {

    width: 100%; /* Largura total */

    background-color: #002557; /* Fundo azul escuro */

    display: flex; /* Flexbox */

    justify-content: space-between; /* Espaço entre colunas */

    align-items: center; /* Centraliza verticalmente */

    padding: 20px 40px 10px 40px; /* Espaçamento interno */

    color: white; /* Cor do texto */

    font-size: 16px; /* Tamanho da fonte */

    font-weight: bold; /* Negrito */

    border-top: 2px solid #444; /* Linha superior */

    box-sizing: border-box; /* Inclui borda e padding no cálculo */

    flex-wrap: wrap; /* Permite quebra de linha */

}

.paragrafo1,

.paragrafo2,

.icones-centro {

    flex: 1; /* Cada coluna ocupa 1 parte */

}

.paragrafo1 {

    text-align: left; /* Alinha à esquerda */

}

.paragrafo2 {

    text-align: right; /* Alinha à direita */

}

.icones-centro {

    display: flex; /* Flexbox */

    justify-content: center; /* Centraliza horizontalmente */

    align-items: center; /* Centraliza verticalmente */

    gap: 25px; /* Espaço entre ícones */

    font-size: 26px; /* Tamanho dos ícones */

}

.icones-centro a {

    color: white; /* Cor dos ícones */

    text-decoration: none; /* Sem sublinhado */

    transition: color 0.3s; /* Transição suave */

}

.icones-centro a:hover {

    color: #00bfff; /* Cor ao passar o mouse */

}

/* Navegação no final do rodapé */

.nav-final {

    width: 100%; /* Largura total */

    margin-top: 20px; /* Espaço acima */

    text-align: center; /* Centraliza */

}

.nav-final ul {

    list-style: none; /* Remove marcadores */

    padding: 0; /* Remove padding */

    margin: 0; /* Remove margem */

    display: flex; /* Flexbox */

    flex-wrap: wrap; /* Permite quebra de linha */

    justify-content: center; /* Centraliza */

    gap: 20px; /* Espaço entre itens */

    font-weight: normal; /* Remove negrito da fonte */

}

.nav-final a {

    color: white; /* Cor dos links */

    text-decoration: none; /* Sem sublinhado */

    font-size: 14px; /* Tamanho da fonte */

    transition: color 0.3s; /* Transição suave */

}

.nav-final a:hover {

    color: #00bfff; /* Cor ao passar o mouse */

}

/* Responsivo para rodapé */

@media (max-width: 768px) {

    .rodape {

        flex-direction: column; /* Empilha colunas */

        text-align: center; /* Centraliza texto */

    }

    .paragrafo1,

    .paragrafo2,

    .icones-centro {

        flex: unset; /* Remove flex */

        width: 100%; /* Ocupa toda a largura */

        margin: 10px 0; /* Espaço vertical */

        text-align: center; /* Centraliza texto */

    }

    .nav-final ul {

        flex-direction: column; /* Empilha links */

        gap: 10px; /* Espaço menor */

    }

}