* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-dark1: #FFFFFF; /* Cor de fundo escura */
    --color-white: #d83030; /* Cor de texto branca */
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-dark1);
    color: var(--color-white);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Impede o scroll horizontal */

}


.img-logo-nasa {
    width: 45%; /* Ou o tamanho desejado para o logo */
    display: block; /* Garantir que o logo seja tratado como um bloco */
}

.header,
.navigation-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    
}

.header {
    background-color: #222;
    box-shadow:  1px 1px 4px rgb(238, 235, 33);
    height: 5em;
    justify-content: space-between;
    padding: 0% 5%;
 }
 
.navigation-header {
    gap: 1em;
}

.navigation-header a{
    text-decoration: none;
    color:white;
    background-color: #444;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    border: 2px solid transparent;
}

.navigation-header a:hover {
    background-color: #ffd700;
    color: black;
    border-color: #ffd700;
}



/* Estilo para o botão de menu */
.menu-mobile {
    display: none; /* Oculta o menu por padrão no mobile */
    background: none; /* Remove qualquer fundo */
    border: none; /* Remove a borda */
    font-size: 40px; /* Tamanho do ícone */
    color: white; /* Cor branca para os traços do ícone */
    cursor: pointer; /* Para mostrar o cursor de clique */
    padding: 10px;
}

.carousel-container {
    position: relative; /* Garante que os botões fiquem posicionados corretamente */
    overflow: hidden; /* Esconde os conteúdos que ultrapassam o contêiner */
    border-radius: 10px; /* Adiciona cantos arredondados, opcional */
    max-width: 80%; /* Ajuste para a largura desejada */
    height: 500px; /* Ajuste a altura conforme necessário */
    margin: 20px auto; /* Adiciona espaço ao redor do contêiner */
}

.carousel {
    display: flex; /* Organiza os itens lado a lado */
    transition: transform 0.5s ease-in-out; /* Suaviza o movimento */
    object-fit: cover; /* Ajusta a imagem sem distorcer */
    width: 100%;
}

.carousel-item {
    display: none; /* Esconde todos os itens inicialmente */
    flex: 0 0 100%; /* Cada item ocupa 100% do espaço disponível */
    justify-content: center;
    align-items: center;
    min-width: 100%; /* Garante que cada item ocupa toda a largura do carrossel */
    flex-shrink: 0; /* Evita que os itens reduzam de tamanho */
}

.carousel-item img {
    width: 100%; /* Faz as imagens preencherem o espaço */
    height: 100%; /* Ajusta para cobrir o contêiner */
    object-fit: cover; /* Garante que a imagem não seja distorcida */
    transform: translateY(-200px); /* Ajuste o valor conforme necessário */
}

/* Exibir apenas o item ativo */
.carousel-item.active {
    display: flex; /* Mostra o item ativo */
}
/* Estilo para o texto sobre as imagens */
.carousel-text {
    position: absolute;
    bottom: 10%; /* Ajusta a posição vertical do texto */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-300%); /* Centraliza o texto de forma precisa */
    color: rgb(250, 213, 4); /* Cor do texto */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente para contraste */
    padding: 10px 10px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    text-align: center; /* Centraliza o texto */
    width: 80%; /* Define a largura do bloco de texto */
    max-width: 200px; /* Limita a largura máxima */
}

/* Botões de navegação */
button.prev,
button.next {
    position: absolute;
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
    color: white; /* Cor do texto */
    border: none;
    font-size: 2rem; /* Tamanho do texto do botão */
    padding: 10px;
    cursor: pointer;
    z-index: 10; /* Garante que os botões fiquem acima das imagens */
}

button.prev {
    left: 10px; /* Botão à esquerda */
}

button.next {
    right: 10px; /* Botão à direita */
}


.text-container {
    max-width: 80%; /* Largura máxima do texto */
    margin: 20px auto; /* Centraliza horizontalmente */
    padding: 20px; /* Adiciona espaçamento interno */
    background-color: #444; /* Fundo escuro para contraste */
    color: white; /* Cor do texto */
    border-radius: 8px; /* Arredonda os cantos */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para destaque */
    text-align: center; /* Centraliza o texto */
}

.text-container h2 {
    margin-bottom: 10px; /* Espaço abaixo do título */
    font-size: 1.8rem; /* Tamanho do título */
    color: #ffd700; /* Cor do título */
}

.text-container p {
    line-height: 1.6; /* Altura da linha para melhor legibilidade */
    font-size: 1rem; /* Tamanho do texto */
}

.service-container {
    max-width: 80%; /* Largura máxima do container */
    margin: 20px auto; /* Centraliza e adiciona espaço ao redor */
    padding: 20px; /* Espaçamento interno */
    background-color:  rgba(247, 210, 4, 0.8); /* Cor de fundo azul */
    color:#333; /* Texto em branco */
    border-radius: 8px; /* Cantos arredondados */
    text-align: center; /* Centraliza o conteúdo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra leve */
}

.service-container p {
    font-size: 18px; /* Tamanho do texto */
}


.whatsapp-container {
    display: flex; /* Organiza os botões em linha */
    flex-wrap: wrap; /* Permite quebrar para linhas menores, se necessário */
    gap: 100px; /* Espaço entre os itens */
    justify-content: center; /* Centraliza o conteúdo */
    padding: 20px; /* Espaçamento interno */
    background-color:rgba(8, 38, 102, 0.8); /* Fundo */
    border-radius: 8px; /* Cantos arredondados */
    max-width: 80%; /* Largura máxima igual à do carrossel */
    margin: 0 auto; /* Centraliza na página */
}

.whatsapp-item {
    display: flex; /* Alinha botão e número lado a lado */
    align-items: center; /* Centraliza verticalmente */
}

.whatsapp-button {
    display: flex;
    align-items: center; /* Ícone e texto centralizados */
    background-color: #25d366; /* Verde do WhatsApp */
    color: white;
    text-decoration: none;
    padding: 20px 15px;
    border-radius: 5px;
    font-size: 20px;
    transition: background-color 0.3s;
}

.whatsapp-button:hover {
    background-color: #128c7e;
}

.whatsapp-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

span {
    margin-left: 1px; /* Espaço entre botão e número */
    color: white; /* Número em preto */
    font-size: 20px;
    margin-top: 20px; /* Ajuste fino para cima ou para baixo */
}


footer {
    margin-top: 20px; /* Ajuste o valor conforme necessário */
    background-color: #222; /* Cor de fundo original */
    color: white; /* Cor do texto original */
    padding: 30px;
    display: flex;
    justify-content: space-between; /* Espaço entre os itens */
    align-items: center; /* Alinhamento vertical */
    box-shadow: 1px -1px 4px rgb(238, 235, 33); /* Sombreamento para cima */
    padding-left: 70px; /* Ajuste esse valor conforme necessário */
    padding-right: 70px; /* Ajuste também o valor da direita */
    }
  
    footer .left {
    text-align: left; /* Alinha o texto à esquerda */
   }
  
  footer .right {
    text-align: right; /* Alinha o texto à direita */
   }
  

  
/* Ajustes para quando a tela for menor que 768px */
@media screen and (max-width: 768px) {
    /* Centralizar o logo */
    .img-logo-nasa {
        max-width: 700px;
        width: 60%;
        margin: 0 auto; /* Certifica que ele está centralizado */
    }

    /* Menu Mobile */
    .menu-mobile {
        display: block; /* Exibe o botão no mobile */
        position: relative;
        z-index: 1100;
    }

    .navigation-header {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px; /* Alinha logo abaixo do botão */
        left: 0;
        width: 100%; /* Use 100% para cobrir toda a tela no mobile */
        padding: 10px;
        z-index: 1000;
    }

    .navigation-header.open-menu-mobile {
        display: flex;
    }

    .navigation-header a {
        color: white;
        padding: 10px;
        text-decoration: none;
        text-align: center;
        display: block;
    }

    .navigation-header a:hover {
        background-color: #ffd700;
    }

    /* Carrossel */
    .carousel-container {
        height: auto; /* Ajusta a altura ao conteúdo */
        width: 100%; /* Garante que ocupe toda a largura */
    }

    .carousel {
        height: auto;
    }

    .carousel-item img {
        transform: translateY(0); /* Restaura a posição no mobile */
    }
    
    .carousel-text {
        transform: translateX(-80%); /* Centraliza corretamente no mobile */
        width: 50%; /* Aumenta a largura do texto no mobile */
        font-size: 10px; /* Ajusta o tamanho da fonte */
    }

    button.prev,
    button.next {
        font-size: 1.2rem;
        padding: 5px;
    }

    /* WhatsApp Container */
    .whatsapp-container {
        gap: 10px;
        padding: 15px;
        max-width: 80%;
        margin: 0 auto; /* Centraliza o contêiner */
    }

    span {
        margin-left: 5px; /* Ajusta espaçamento */
        font-size: 18px; /* Reduz fonte para harmonizar no mobile */
        margin-top: 5px;
    }
}

/* Ajustes para telas menores que 410px */
@media screen and (max-width: 440px) {
    body, html {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Evita cortes laterais */
    }

    .img-logo-nasa {
        width: 70%; /* Reduz proporcionalmente o logo */
    }

    .whatsapp-container {
        max-width: 80%; /* Ajusta largura para caber na tela */
    }

    .whatsapp-button {
        padding: 10px 8px; /* Reduz o espaçamento interno */
        font-size: 14px; /* Reduz o tamanho do texto */
    }

    .navigation-header a {
        font-size: 14px; /* Reduz o tamanho da fonte no menu */
    }

    .carousel-container, .carousel {
        padding: 0px; /* Ajusta espaçamento interno */
    }

    span {
        font-size: 16px; /* Ajusta o tamanho do texto */
    }

    footer {
        width: 100%;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
    }
    
    footer p {
        font-size: 12px; /* Ajuste o tamanho da fonte conforme necessário */
    }
    
}



/*//////////////////////////////////////////////////////////////////////////////////////*
/* Service HTML*/

.pagina-servico .text-container {
    background-color: rgba(247, 210, 20, 0.8) ; /* Cor de fundo suave */
    color: #000000;              /* Cor da fonte */
    padding: 40px;            /* Espaçamento interno */
    margin: 20px auto;        /* Centraliza o contêiner horizontalmente */
    width: 90%;               /* Define a largura do contêiner */
    border-radius: 10px;      /* Borda arredondada */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra leve */
    font-family: Arial, sans-serif; /* Define a fonte */
    text-align: justify;      /* Alinha o texto para justificar */
}

.pagina-servico .text-container h2 {
    text-align: center;
    font-size: 30px; /* Tamanho do texto */
    color: #000000; /* Cor do título (preto ou outra cor) */
}


/* Estilo para o contêiner geral */
.pagina-servico .service-container {
    display: flex;               /* Define os itens em linha */
    justify-content: space-around; /* Distribui espaço uniformemente */
    align-items: center;         /* Centraliza verticalmente */
    flex-wrap: wrap;             /* Permite quebrar para próxima linha se necessário */
    padding: 10px;               /* Adiciona espaçamento interno */
    margin: 20px auto;           /* Centraliza horizontalmente */
    width: 100%;                  /* Define a largura */
    background-color: #444;   /* Cor de fundo do contêiner */
    border-radius: 10px;         /* Arredonda as bordas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona sombra leve */
}

/* Estilo para cada item de serviço */
.pagina-servico .service-item {
    display: flex;               /* Coloca a caixa e o texto em linha */
    flex-direction: column;      /* Organiza em coluna (caixa em cima, texto embaixo) */
    align-items: center;         /* Centraliza os itens */
    margin: 50px;                /* Espaçamento entre os itens */
    width: 500px;                /* Largura fixa de cada item */
}

/* Estilo para a caixa da imagem */
.pagina-servico .service-box {
    position: relative; /* Permite posicionar o texto sobre a imagem */
    width: 100%; /* A imagem ocupa toda a largura do contêiner */
    height: 300px; /* Altura fixa da caixa da imagem */
    overflow: hidden; /* Garante que o texto fique dentro da caixa */
    margin-bottom: 10px; /* Espaçamento entre a imagem e o texto abaixo */
}

/* Estilo para imagens dentro da caixa */
.pagina-servico .service-box img {
    width: 100%; /* Imagem ocupa toda a largura da caixa */
    height: 100%; /* Imagem ocupa toda a altura da caixa */
    object-fit: cover; /* Garante que a imagem se ajuste sem distorcer */
    border-radius: 10px;
}

/* Estilo para o texto sobre a imagem (no canto superior direito) */
.pagina-servico .service-box .image-text {
    position: absolute; /* Texto posicionado sobre a imagem */
    top: 10px; /* Distância do topo */
    right: 10px; /* Distância da direita */
    color: #e3e5d1; /* Cor branca para contraste */
    font-size: 18px; /* Tamanho do texto */
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
    padding: 5px 10px; /* Espaçamento interno no texto */
    border-radius: 5px; /* Bordas arredondadas no fundo */
}

/* Estilo para o texto abaixo da imagem */
.pagina-servico .service-text {
    color: #e7d509;                 /* Cor do texto */
    font-size: 16px;             /* Tamanho da fonte */
    font-family: Arial, sans-serif; /* Fonte */
    text-align: center;          /* Centraliza o texto */
    font-weight: bold;           /* Texto em negrito */
}

 /* Responsividade */
@media (max-width: 768px) {
    .pagina-servico .service-container {
        flex-direction: column;
        padding: 20px;
    }

    .pagina-servico .service-item {
        margin: 20px 0;
        width: 100%;
    }

    .pagina-servico .service-box {
        height: 150px; /* Ajusta a altura da imagem em telas menores */
    }

    .pagina-servico .service-text {
        font-size: 14px;
    }
}






/* Estilo para o contêiner que envolve os três containers de contrato */
.contratos-de-manutencao .contracts-container {
    width: 80%; /* Limita a largura para 80% */
    margin: 0 auto; /* Centraliza o container na página */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 50px;
    padding: 80px;

    background-color: #d1d1d1; /* Cinza mais claro que o cinza do topo */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para destaque */

    
}

/* Estilo para cada item de contrato */
.contratos-de-manutencao .contract-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 60px;
    max-width: 300px;
    flex: 1 1 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Para o contêiner do Contrato Básico */
/* Contêiner básico com fundo amarelo claro */
.contract-item:nth-child(1) {
    background-color: #f9f4a7; /* Amarelo claro */
}

/* Contêiner intermediário com fundo vermelho claro */
.contract-item:nth-child(2) {
    background-color: #f9a7a7; /* Vermelho claro */
}

/* Contêiner flexível com fundo verde claro */
.contract-item:nth-child(3) {
    background-color: #a7f9a7; /* Verde claro */
}


.contratos-de-manutencao .contract-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Estilo dos títulos e descrições */
.contratos-de-manutencao .contract-item h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.contratos-de-manutencao .contract-item p {
    font-size: 16px;
    color: #555;
}



@media (max-width: 768px) {
    .contracts-container {
        display: flex;
        flex-direction: column; /* Alinha os itens verticalmente */
        width: 100%; /* Garante que o container ocupe toda a largura */
        padding: 10px; /* Pequeno espaço interno */
        gap: 20px; /* Espaçamento uniforme entre os elementos */
    }

    .contract-item {
        width: 100%;  /* Agora, os containers pequenos vão ocupar 100% da tela */
        margin: 10px 0;  /* Espaçamento entre os containers */
        box-sizing: border-box;
      }
}























/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Estilo geral do contêiner do mapa */
.map-container {
    max-width: 80%; /* Largura máxima do contêiner */
    height: auto; /* Deixa o contêiner ajustar sua altura conforme o conteúdo */
    margin: 20px auto; /* Centraliza horizontalmente e adiciona espaço acima e abaixo */
    text-align: center; /* Centraliza o texto dentro do contêiner */
    background-color: #d6d6d6; /* Cor de fundo clara */
    padding: 20px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
  }
  
  /* Estilo do título */
  .map-title {
    font-size: 24px;
    font-weight: bold;
    color: #333; /* Cor escura para contraste */
    margin-bottom: 15px; /* Espaço entre o título e o mapa */
  }
  
  /* Estilo do iframe (mapa) */
  .map iframe {
    width: 90%; /* Preenche a largura disponível do contêiner */
    height: 500px; /* Altura fixa do mapa */
    border: 0; /* Remove a borda padrão */
    border-radius: 5px; /* Bordas arredondadas */
  }
  
  /* Estilo do endereço */
  .map-address {
    font-size: 18px;
    color: #333333; /* Cor cinza para o texto */
    margin-top: 15px; /* Espaço entre o mapa e o endereço */
  }

  @media (max-width: 768px) { /* Para telas menores, como tablets e celulares */
    .map-container {
        height: auto; /* Mantém altura automática */
        padding: 15px; /* Ajusta o espaçamento */
    }

    .map iframe {
        height: 300px; /* Diminui a altura do mapa */
    }
}