/* Estilos Globais */

html {
    overflow-x: hidden; /* Impede o rolamento horizontal */
}

body {
    overflow-x: hidden; /* Impede o rolamento horizontal */
    font-family: 'Roboto', sans-serif;
    color: #2c3e50;
    background-color: #fff; /* Fundo claro */
    padding-right: -100%;
}

h1, h2, h3, h4, h5, h6 {
    color: #2c3e50; /* Azul escuro */
    font-weight: bold;
    margin-bottom: 20px;
}

p {
    font-size: 1rem;
    color: #7f8c8d; /* Cinza suave */
}

/* Links e Botões */
a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #e67e22; /* Cor laranja no hover */
}

/* Botões */
button, .btn {
    background-color: #e67e22;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 12px 30px;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

button:hover, .btn:hover {
    background-color: #f39c12;
    transform: scale(1.05);
}

/* Barra de Navegação */
#nav-bar {
    border-bottom: 3px solid #e67e22;
    background-color: #ffffff00;
    padding: 20px 0;
    width: 100%;
    z-index: 1000;
}

#nav-bar .logo-container img {
    max-width: 210px; /* Ajusta a logo para ficar proporcional */
    padding-bottom: 15px;
    padding-top: 10px;
    height: auto;
    cursor: pointer;
}

/* normal */
#nav-bar .logo-container #l1 {
    width: 9.1%;
    top: 21px;
    position: absolute;
    left: 22%;
    transition: 0.3s ease;
}

#nav-bar .logo-container #l2 {
    width: 35%;
    transform: scaleX(1);
    transition: transform 0.2s ease-in-out;
}

#nav-bar .logo-container #l3 {
    width: 9%;
    top: 21px;
    position: absolute;
    right: 22%;
    transition: 0.3s ease;
}

/* Adicionando transição na barra ao rolar */
#nav-bar.scrolled {
    background-color: #d4edda00; /* Cor sólida ao rolar */
    transition: all 0.3s ease-in-out; /* Suaviza a transição */
}

/* Modificações nas animações ao rolar */
#nav-bar.scrolled .logo-container #l1 {
    left: 40%;
}

#nav-bar.scrolled .logo-container #l2 {
    transform: scaleX(0);
}

#nav-bar.scrolled .logo-container #l3 {
    right: 40%;
}

#nav-bar .nav-link {
    font-size: 15px;
    font-weight: bold;
    color: #2c3e50;
    text-transform: uppercase;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

#float-app {
    position: fixed;
    right: 20px;
    top: 700px;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Cor do botão do WhatsApp */
    color: white;
    border-radius: 50%; /* Deixa o botão redondo */
    padding: 7px; /* Ajusta o tamanho do botão */
    font-size: 30px; /* Tamanho do ícone */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para o botão */
    transition: transform 0.3s ease; /* Suaviza o efeito de hover */
    z-index: 1000; /* Garante que o widget fique em cima de outros elementos */
}

#float-app:hover {
    transform: scale(1.1); /* Aumenta o botão quando o mouse passa sobre ele */
}

#float-app i {
    display: block;
    text-align: center;
}


#nav-bar .nav-link:hover {
    color: #e67e22;
    border-bottom: 2px solid #e67e22;
}

#conteudo-principal {
    padding-top: 30px; /* Espaço igual ou maior que a altura da navbar */
    margin: -80px;
}

#conteudo-principal .text-justify {
    text-align: justify; /* Alinha o texto como na 4ª opção do Word */
}

/* Rodapé */
footer {
    background-color: #fff; /* Fundo branco, para manter a uniformidade */
    color: #3498db; /* Cor do texto (azul escuro) */
    text-align: left;
    border-top: 5px solid #e67e22; /* Cor laranja */
    margin-top: 150px;
}

/* Títulos no rodapé */
footer h5 {
    font-size: 1.25rem; /* Tamanho de título ajustado para manter consistência */
    font-weight: bold;
    color: #e67e22; /* Azul para os títulos */
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: left;
}

/* Links no rodapé */
footer a {
    color: #3498db; /* Azul */
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    color: #e67e22; /* Laranja no hover */
    transform: scale(1.05); /* Aumento suave no hover */
}

footer #map {
    color: #3498db; /* Azul */
    font-size: 2rem;
    text-decoration: none;
    font-weight: bold;
}

footer #map:hover {
    color: #e67e22; /* Laranja no hover */
    transform: scale(1.05); /* Aumento suave no hover */
}

/* Lista no rodapé */
footer .list-unstyled li {
    font-size: 1rem; /* Consistente com o tamanho do texto */
    margin-bottom: 10px;
    line-height: 1.6; /* Alinhamento de linhas igual ao restante do site */
}

/* Botão Fale Conosco */
footer .btn-primary {
    color: #fff;
    padding: 12px 24px; /* Padding ajustado para maior consistência */
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

footer .btn-primary:hover {
    background-color: #f39c12; /* Amarelo-laranja */
    transform: scale(1.05);
}

/* Mapa no rodapé */
footer .ratio {
    border-radius: 10px;
    height: 80%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave para o mapa */
    transition: transform 0.3s ease;
}

footer .ratio:hover {
    transform: scale(1.1);
}

/* Redes Sociais no rodapé */
footer .social-links a {
    display: flex;
    align-items: left; /* Alinha o ícone e o texto */
    font-size: 1.1rem;
    color: #3498db; /* Azul escuro para as redes sociais */
    text-decoration: none;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

footer .social-links a:hover {
    color: #e67e22; /* Laranja no hover */
    transform: scale(1.1);
}

footer .social-links a i {
    font-size: 2rem; /* Tamanho consistente para os ícones */
    margin-right: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Linha separadora */
footer hr {
    border: 1px solid #7f8c8d; /* Cinza suave para a linha */
    margin: 30px auto;
    width: 80%;
}

/* Texto adicional */
footer p {
    font-size: 0.9rem;
    margin-top: 15px;
    color: #7f8c8d; /* Cor suave para o texto adicional */
}

footer .row {
    display: list-item;
    justify-content: center;
}

/* Cartões */
#cards {
    background-color: #3498db; /* Fundo azul */
    border-radius: 5px;
    margin-top: -110px;
    padding-bottom: 30px;
    width: 100%;
    height: 840px;
    box-shadow: 4 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-content: center;
    justify-items: center;
}

#cards .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#card .container {
    padding: 0 10px;
}

.container {
    padding: 0px 100px; /* Padding consistente */
}

#cards .card {
    background-color: #fff;
    border: none;
    margin-top: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 350px;
    height: 225px; /* Uniformiza os cartões */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#cards .card-body {
    padding: 35px;
    text-align: justify;
}

#cards .card-title {
    font-size: 1.3rem;
    color: #3498db;
    font-weight: bold;
    text-align: left;
    padding-bottom: 10px;
}

#cards .card-text {
    font-size: 1rem;
    color: #7f8c8d;
    text-align: left;
}

/* Texto de Apresentação */
.text-primary {
    color: #3498db;
    font-size: 2.5rem;
    display: inline;
}

.text-secondary {
    display: inline;
    font-weight: normal;
}

.row.align-items-center {
    margin-bottom: 50px;
}

img {
    height: auto;
}   

#intro {
    padding-top: 72px;
    padding-bottom: 62px;
    text-align: left;
    justify-items: left;
    text-justify: auto;
}

#intro p {
    font-size: 1.1rem;
    padding-top: 30px;
}

#intro-img {
    position: absolute;
    right: 0%;
    top: 24%;
    width: 800px; /* Faz com que a largura ocupe toda a tela */
    z-index: -1; /* Move a imagem para trás de outros itens */
    opacity: 0.5; /* Ajusta a opacidade (opcional) */
    object-fit: cover; /* Garante que a imagem cubra a área */
}

#sobre img{
    padding-bottom: 20px;
}

#sobre {
    padding-top: 80px;
    text-align: left;
    justify-items: left;
    text-justify: auto;
}

#sobre p {
    padding-top: 20px;
}

#serv {
    margin-top: 80px;
}

#serv .row {
    margin-top: 10px; /* Se preferir ajustar o espaçamento nos cards */
    margin-bottom: 20px; /* Se preferir ajustar o espaçamento nos cards */
}

#serv .card {
    border-radius: 5px;
    border: none;
    background-color: #f4f7fa;
    height: 550px; /* Mantém todos os cards com o mesmo tamanho */
    display: flex;
    flex-direction: column;
    padding: 15px; /* Espaçamento interno */
}

#serv .card h3 {
    font-size: 1.25rem; /* Título maior */
    margin: 0.5rem 0; /* Espaçamento entre o título e o texto */
    height: 3rem; /* Uniformiza a altura dos títulos */
    display: flex;
    align-items: center; /* Alinha verticalmente o texto do título */
    justify-content: start; /* Alinha o texto à esquerda */
    text-align: left;
}


#serv .card p {
    flex: 1; /* Preenche o espaço disponível no card */
    margin: 0; /* Remove margens extras */
    overflow: hidden; /* Evita o estouro de texto */
    text-overflow: ellipsis; /* Trunca textos muito longos */
    text-align: left; /* Texto alinhado à esquerda */
    font-size: 1rem; /* Tamanho consistente para o texto */
    line-height: 1.5; /* Espaçamento entre linhas */
}

#serv button {
    border-radius: 5px;
    width: 80%;
    align-self: end;
    justify-self: center;
}

#serv .card img {
    max-width: 100px; /* Reduz o tamanho da imagem */
    height: auto;
    align-self: start; /* Alinha a imagem à esquerda */
}

/* Estilos para a seção Fale Conosco */
#cont-container {
    max-width: 800px;
    background-color: #f9f9f9; /* Fundo claro para destacar a seção */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

#cont-container h2 {
    font-size: 2rem;
    color: #3498db; /* Azul para o título */
    text-align: center;
    margin-bottom: 20px;
}

#cont {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre os campos */
}

#cont label {
    font-size: 1rem;
    color: #2c3e50; /* Texto escuro */
    font-weight: bold;
}

#cont input[type="text"],
#cont input[type="email"],
#cont textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#cont input[type="text"]:focus,
#cont input[type="email"]:focus,
#cont textarea:focus {
    border-color: #3498db; /* Destaque em azul no foco */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3); /* Sombra azul no foco */
    outline: none;
}

#cont textarea {
    resize: none; /* Evita redimensionamento manual */
    min-height: 150px; /* Altura inicial do campo de texto */
}

#cont button[type="submit"] {
    background-color: #e67e22; /* Botão laranja */
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 15px;
    margin-bottom: 50px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#cont button[type="submit"]:hover {
    background-color: #f39c12; /* Cor mais clara no hover */
    transform: scale(1.05); /* Efeito de zoom leve */
}

#cont button[type="submit"]:active {
    background-color: #d35400; /* Cor mais escura ao clicar */
    transform: scale(0.95); /* Redução leve ao clicar */
}

/* Mensagem de Sucesso ou Erro */
#cont .alert {
    padding: 15px;
    font-size: 1rem;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
}

#cont .alert-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

#cont .alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}
#int {
    margin-top: 80px;
    text-align: left;
    padding-bottom: 80px;
}

.integrators-grid {
    display: flow-root;
    width: 100%; /* Cobre toda a largura da página */
}

.integrator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distribui espaço entre os elementos */
    background: #fff; /* Cor de fundo opcional */
    padding: 20px; /* Espaçamento interno */
    margin-top: 40px;
    border: 1px solid #ddd; /* Borda opcional */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    height: 200px; /* Altura fixa para consistência */
    transition: transform 0.3s ease;
}

#ngc-img {
    transform: scale(0.5);
}

.integrator-item:hover {
    transform: scale(1.1);
}

.integrator-item img {
    object-fit: contain;
    height: 150px; /* Altura da imagem */
    width: auto;
}

#seg {
    margin-top: 80px;
    text-align: left;
}

#seg .card {
    border-radius: 10px;
    background-color: #f4f7fa;
    width: 213%;
    height: 210px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#seg .row{
    display: flow-root;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Estilo do modal */
.modal.fade .modal-content {
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal.fade .modal-header {
    background-color: #3498db;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.modal.fade .modal-header .btn-close {
    background-color: #fff;
    border-radius: 50%;
}

.modal.fade .modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.modal.fade .modal-body {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
}

.modal.fade .modal-body h3 {
    color: #3498db;
    font-size: 1.3rem;
    font-weight: bold;
}

.modal.fade .modal-body h4 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2980b9;
}

.modal.fade .modal-footer .btn {
    font-size: 1rem;
    padding: 10px 20px;
}