body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow-x: hidden; /* Oculta a rolagem horizontal */
        }

body {
    background-color: #101820;
    /*font-family: "Lucida Console", "Courier New", monospace;*/
    /*font-family: Helvetica, "Trebuchet MS", sans-serif;*/
    font-family: 'Inter', 'Roboto', sans-serif;


}


/* --------------------------------------------------------------------------------- */


/* Cabeçalho */

.navbar {
    background-color: #101820; /* Fundo preto */
}

.navbar-brand img {
    margin-left: 70px;
    height: 60px;
}

.navbar .navbar-nav .nav-link {
    color: #fff; /* Cor branca para os links */
}

.navbar .navbar-nav .nav-link:hover {
    color: #ccc; /* Cor cinza para o estado hover e ativo */
}

.navbar-light .navbar-nav .nav-link.active {
    /*color: #101820; /* Cor cinza para o estado hover e ativo
    background-color: #f0f0f0;
    text-decoration: underline;*/
    color: #fff;
    font-weight: bold;
}


/* --------------------------------------------------------------------------------- */


/* seção HOME */

#introContainer {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #000; /* Cor de fundo preta */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: clip-path 1.5s ease-in-out;
    clip-path: inset(0% 0% 0% 0%); /* Início visível */
}
#introContainer.hide {
    clip-path: inset(0% 50% 0% 50%); /* Esconde a partir do meio */
}
#introVideo {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
}

#mainContent {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in;
}
#mainContent.show {
    display: block;
    opacity: 1;
}


 /* Animação para deslizar da esquerda para a direita */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%);
        opacity: 1;
    }
}

/* Animação para revelar do centro para as laterais */
@keyframes revealFromCenter {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.col-md-10 {
    position: relative;
    width: 100%;
    height: 600px;  /*Altura definida */
    background: url('../img/predios.jpg') no-repeat center center;
    background-size: cover;
}
        
.overlay-content {
    position: absolute;
    left: 25%;
    bottom: 60px; /* Posicionamento inferior ajustável */
    transform: translateX(-50%);
    text-align: center;
    color: #f0f0f0;
    background-color: rgba(0, 0, 0, 0.35); /* Fundo semitransparente opcional */
    padding: 20px;
    width: 60%; /* Ajuste a largura conforme necessário */
    animation: slideInFromLeft 2s ease-out forwards;
}


.overlay-content img {
    max-width: 70%;
    margin: auto;
}


/* --------------------------------------------------------------------------------- */


/* Estilo da seção de apresenta empresa */

.caixa-branca {
    color: #101820; /* Cor padrão do texto */
    background-color: #f0f0f0; /* Fundo branco */
    padding: 30px 10px; /* Espaçamento interno ajustado */
}

.caixa-branca .container {
    padding: 40px 0;
}

.apresenta {
    margin: 20px;
}
.titulo-apresenta {
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 3em;
}
.texto-apresenta {
    margin: 50px 10px 10px 10px;
    font-size: 1.7em;
    text-align: justify;
}
.final-apresenta {
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between; /* Distribui os itens: um à esquerda, outro à direita */
}

.final-apresenta img {
    max-width: 200px; /* Ajuste o tamanho conforme necessário */
}

.caixa-branca .arvore img{
    margin: 0 auto;
    border: 3px solid #101820;
}


/* --------------------------------------------------------------------------------- */


/* Estilo da seção de Atendimento */
.caixa-atendimento {
    background-color: #101820; /* Fundo da seção */
    color: #ffffff; /* Cor dos textos */
    padding: 20px 0; /* Espaçamento interno */
}

.caixa-atendimento .container {
    padding: 50px 0; /* Espaçamento interno */
}

/* Estilo do título */
.titulo-secao {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.7em;
    margin: 35px 0 50px 35px;
    padding-top: 20px;
    text-align: left; /* Alinhado ao canto superior esquerdo */
}

/* Estilo para as colunas */
.quadro-imagem {
    width: 210px;
    height: 210px;
    background-color: #101820; /* Cor de fundo para o quadro */
    margin: 0 auto 10px; /* Centraliza o quadro e dá espaço inferior */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Garante que imagens não "vazem" */
}

.quadro-imagem img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Mantém proporção da imagem */
}

.titulo-imagem {
    font-size: 20px;
    margin: 10px 0 5px 0;
    padding-left: 20%;
    text-align: left;
    color: #FF4444;
}

.descricao-imagem {
    font-size: 18px;
    color: #FFF;
    padding-left: 20%; /* Alinha o texto com um recuo */
    text-align: left;
    margin-bottom: 10px;
    position: relative; /* Necessário para o pseudo-elemento */
}

.borda-red{
    border-top: 1px solid red;
    margin: 0 20% 40px 20%  ;
}

.asterisco {
    text-align: center;
    padding-bottom: 40px;
}



/* --------------------------------------------------------------------------------- */

/* Estilo da seção de DIFERENCIAIS */

.caixa-branca2 {
    color: #101820; /* Cor padrão do texto */
    background-color: #f0f0f0; /* Fundo branco */
    padding: 30px 10px; /* Espaçamento interno ajustado */
}

.caixa-branca2 .container{
    padding: 40px 0px; /* Espaçamento interno ajustado */
}


/* Ajustando imagens */
.caixa-branca2 img {
    margin: 20px;
    padding: 30px 10px;
    max-width: 100%; /* Garante responsividade */
    height: auto;
}

/* Estilo de cada diferencial (item de texto e imagem) */
.caixa-branca2 .diferencial {
    display: flex;
    align-items: center; /* Centraliza verticalmente a imagem e o texto */
    margin-bottom: 20px; /* Espaçamento entre os itens */
    padding: 5px 0;
}

/* Quadrados para imagens pequenas */
.caixa-branca2 .quadro-pequeno {
    width: 140px; /* Dimensão do quadrado */
    height: 140px;
    background-color: #f0f0f0; /* Fundo para contraste */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita vazamento da imagem */
}

.caixa-branca2 .quadro-pequeno img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ajusta imagem dentro do quadrado */
    display: block; /* Garante que a imagem seja renderizada */
}

/* Texto ao lado das imagens */
.caixa-branca2 .texto-diferencial {
    flex: 1; /* Faz o texto ocupar o restante do espaço */
    text-align: left; /* Alinhamento à esquerda */
}

.caixa-branca2 .titulo-diferencial {
    font-size: 20px;
    color: #FF4444; /* Cor vermelha para o título */
    margin-bottom: 5px;
}

.caixa-branca2 .texto-diferencial p {
    font-size: 16px;
    color: #101820; /* Cor preta para o parágrafo */
    margin: 0;
}


/* --------------------------------------------------------------------------------- */


/* Estilo da seção Decisões */

.decisao {
    background: url("../img/imagemdecisao-orig.jpg") no-repeat center center;
    background-size: cover; /* Faz a imagem ocupar toda a seção */
    height: 100vh; /* Ajusta a altura para ocupar a tela inteira */
    display: flex;
    align-items: center;
    justify-content: right;
    text-align: center;
    position: relative;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Fundo transparente */
    margin-right: 30px;
    padding: 100px;
    width: 700px;
    height: 100vh;
    /* Centralizando conteúdo */
    display: flex;
    flex-direction: column; /* Mantém h3 e h2 em coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    text-align: center; /* Centraliza o texto */
}

.overlay h4 {
    background-color: #FFECEC;
    color: #FF4444;
    margin: 20px 10px;
    padding: 10px;
    border-radius: 15px;
}

.overlay h2 {
    color: white;
    margin: 20px 10px;
    padding: 10px;
    font-size: 3.1em;
}


/* --------------------------------------------------------------------------------- */


/* Estilo da seção Opiniões */

.caixa-opiniao {
    background-color: #f0f0f0; /* Fundo da seção */
    color: #101820; /* Cor dos textos */
    padding: 60px 0; /* Espaçamento interno */
}

.opiniao {
    margin: 30px 0;
}

.opiniao p {
    padding: 20px 0; /* Espaçamento interno */
}

/* Estilo do título */
.titulo-opiniao, .titulo-opiniao p {
    
    text-align: center;
}

/* Estilo para as colunas */
.quadro-texto {
    margin: auto;
    text-align: justify;
    margin: 20px 10px 60px 0;
}


/* --------------------------------------------------------------------------------- */

/* Estilo da seção Celular */

.caixa-celular{
    background-color: #f0f0f0;
    padding: 30px 0 20px 0;
}

.texto-celular {
    margin: 0;
    padding: 10px 0;
}

.titulo-celular {
    margin-bottom: 20px;
    font-size: 1.2em;
}

.imagem-celular {
    margin: auto 0;
}

.imagem-celular img{
    margin-top: 20px;
}

.celular {
    margin: 30px;
}


/* --------------------------------------------------------------------------------- */


/* Estilo da seção Perguntas/Respostas */

.faq {
    padding: 40px;
    color: #FFF;
}

.faq-item {
    border-bottom: 1px solid #FF4444;
    padding: 10px 0;
    color: #FFF;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFF;
}

.faq-question span {
    font-size: 22px;
    color: #FFF;
}

.faq-answer {
    display: none;
    padding: 10px;
    color: #FFF;
    border-radius: 15px;
}
.faq-answer a {
    color: #FFF;
}


/* --------------------------------------------------------------------------------- */



/* Formatações objetos - Botões */

.btn {
    margin: 20px; /* Remove margens padrão */
  }

.botao-alongado {
  background-color: #101820;
  color: #f0f0f0;
  padding: 10px 45px; /* Alonga horizontalmente */
  border-radius: 30px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: bold;
}

.botao-alongado:hover {
  background-color: #f0f0f0;
  color: #101820;
  border: 1px solid #101820;
}

.botao-decisao {
  background-color: #f0f0f0;
  color: #101820;
  padding: 10px 45px; /* Alonga horizontalmente */
  border-radius: 30px;
  border: 1px solid #101820;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: bold;
}

.botao-decisao:hover {
  background-color: #101820;
  color: #f0f0f0;
  border: 1px solid #f0f0f0;
}


/* --------------------------------------------------------------------------------- */


/* Rodapé */

.footer {
    background-color: #101820; /* Mesmo fundo do menu */
    bottom: 0; /* Gruda no rodapé da página */
    left: 0;
    width: 100%; /* Ocupa a largura inteira */
    padding: 10px 20px; /* Espaçamento interno */
    display: flex;
    justify-content: flex-start; /* Alinha os links à esquerda */
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Leve sombra no topo */
}

.footer .nav-link {
    color: #f0f0f0; /* Mesma cor dos links do menu */
    margin-right: 15px; /* Espaçamento entre os links */
    text-decoration: none;
    font-size: 14px;
}

.footer .nav-link:hover {
    color: #ccc; /* Mesmo efeito de hover */
    text-decoration: none;
}

.footer .nav-link.active {
    color: #f0f0f0;
    font-weight: bold;
}

.direitos{
    color: #FFF;
    text-align: center;
    padding: 10px;
}



/* --------------------------------------------------------------------------------- */


/* Media query para telas pequenas */
@media (max-width: 767.98px) {
    .overlay-content {
        left: 50%;
        bottom: 20px; /* Ajuste conforme necessário */
        width: 90%; /* Ajuste conforme necessário */
        padding: 10px;
    }
    .overlay-content img {
        max-width: 80%; /* Ajuste conforme necessário */
    }
    .overlay-content p {
        bottom: 5px; /* Ajuste conforme necessário */
        font-size: 1em; /* Ajuste conforme necessário */
    }

    .navbar-brand img {
        margin-left: 0px;
        width: 170px;
    }

    .item h2, .item p {
        margin: 10px 20px;
        text-align: center; /* Centralizar o texto */
    }

    .item p {
        max-width: 90%; /* Limitar a largura do parágrafo */
        text-align: center; /* Centralizar o texto */
        margin: 0 auto 20px auto; /* Centralizar e adicionar margem inferior */
        font-size: 1em;
        letter-spacing: 1px;
    }   

    .caixa-preta p {
        max-width: 100%;
        font-size: 1em;
        letter-spacing: 1px;
    }

    .apresenta {
        margin: 20px auto;
    }

    .titulo-apresenta {
        font-size: 2.5em;
        text-align: center;
    }

    .texto-apresenta {
        font-size: 1.5em;
    }

    .final-apresenta img {
        max-width: 160px;
        padding: 10px;
    }

    .caixa-branca2 img {
        margin: 0 auto;
    }

    #opinioes h2 {
        font-size: 2em;
    }
    .footer .nav-link {
        margin-right: 5px; /* Espaçamento entre os links */
        font-size: 11px;
    }
    .direitos{
        font-size: 11px;
    }

    .decisao {
        justify-content: center;
    }

    .overlay {
        margin: 0;
        padding: 10px;
        width: 400px;
        height: 60vh;
    }
    .overlay h4 {
        font-size: 1em;
    }

    .overlay h2 {
        font-size: 1.7em;
    }

    .btn {
        margin: 10px; /* Remove margens padrão */
      }

    .botao-alongado {
        padding: 10px 30px; /* Alonga horizontalmente */
    }

}





/* Media query para telas médias */
@media (max-width: 991.98px) {

    .item p {
        max-width: 90%; /* Limitar a largura do parágrafo */
        text-align: center; /* Centralizar o texto */
        margin: 0 auto 20px auto; /* Centralizar e adicionar margem inferior */
        font-size: 1em;
        letter-spacing: 1px;
    }
}