/* ===================================================
   CONFIGURAÇÕES GERAIS
   ================================================== */

   body {
    background-color: #ffffff;
    color: #333;
    font-size: 1.0rem;
    font-family: 'Montserrat', sans-serif; /* Fonte padrão para o corpo do texto */
}


/* Título grande */
.title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #333;
}


/* Espaçamento extra entre as seções */
section {
    margin-top: 100px;
    margin-bottom: 100px;
}


/* Subtítulos */
.subtitle {
    font-family: 'Cormorant', serif;
    font-weight: 400; /* Remove negrito */
    font-size: 1.8rem;
    color: #ffffff;
}

/* Definir o estilo para parágrafos */
p {

    color: #757575;
    font-family: "Montserrat", serif;
    font-size: 19px;
    line-height: 1.6; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    margin-top: 0px !important;
    font-weight: 300;
    font-style: normal;
 
}


/* Botões com transições suaves */
.btn {
    transition: all 0.3s ease;
    padding: 10px 15px; /* Botões com mais espaçamento interno */
    border-radius: 0px;
}

.btn:hover {
    background-color: #000;
    color: #fff;
}

/* Garante que as imagens sejam responsivas */
img {
    width: 100%;
    height: auto;
    border-radius: 0px; /* Removendo bordas arredondadas */
    object-fit: cover;
    margin-bottom: -10px;
}

video {
    border-radius: 0px; /* Mantendo as bordas retas para vídeos também */
}

/* Adicionando espaçamento interno nas seções */
.container {
    padding: 0px;
}

/* Animações suaves ao carregar seções */
section {
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Remove a seleção de texto em todo o site */
* {
    user-select: text;
    cursor: auto;
}

*:not(input):not(textarea) {
    caret-color: transparent; /* Esconde o cursor de texto (caret) para qualquer elemento que não seja campo de texto */
}

/* ===================================================
CABEÇALHO
================================================== */

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    color: #737373 !important;
    background-color: #ffffff;
    transition: background-color 0.3s ease, padding 0.3s ease;
    padding: 0 !important;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ajuste para o botão do menu */
.navbar-toggler {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 50px;
    width: 80px !important;
    margin-right: -80px;
}

.navbar-toggler-icon {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.navbar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.navbar-text img {
    max-width: 50%;
    height: auto;
    width: 300px;
    display: block;
    margin-left: -10px;
    margin-right: 15px !important;
}

.logo {
    width: 80px;
    transition: width 0.3s ease;
    position: absolute;
    left: 20px;
    top: 50px;
    transform: translateY(-50%);
}

/* Ajuste no navbar-collapse para eliminar o espaço */
.navbar-collapse {
    background-color: #ffffff !important;
    max-height: 500px; /* Aumenta a altura máxima do menu expandido */
    overflow-y: auto;  /* Adiciona rolagem caso necessário */
    padding: 20px 0; /* Remove o padding extra para aproximar o menu */
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-top: -151px !important; /* Ajuste a margem superior para reduzir o espaço */
}

/* Redução do padding entre os links do menu */
.navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0; /* Remove padding para aproximar os itens do topo */
    margin: 0; /* Remove o espaçamento vertical */
    padding-top: 20px; /* Ajusta o espaçamento superior dos links */
    padding-bottom: 20px; /* Ajusta o espaçamento inferior */
    margin-left: 10px;
}

.navbar-nav .nav-link {
    color: black;
    font-size: 1.2rem;
    font-weight: 400;
    transition: color 0.3s ease;
    margin: 0; /* Remove o espaço extra entre os links */
    font-size: 1.2rem; /* Aumenta o tamanho da fonte dos links */
    line-height: 2.5; /* Espaçamento vertical maior */
    padding: 10px 15px; /* Ajuste no espaçamento interno */
}

.navbar-nav .nav-link:hover {
    color: #007bff;
}


/* ===================================================
   VÍDEO
   ================================================== */

/* Estilo da seção de vídeo */
.video-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    height: 110vh; /* Certifica-se de que a altura do container seja 100% da viewport */
    text-align: center; /* Garante que o texto esteja centralizado */
    padding: 0; /* Remove qualquer padding que possa estar descentrando */
    overflow: hidden;
    margin-bottom: -10px !important;
}


.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Coloca o vídeo atrás do cabeçalho */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre o espaço do vídeo */
}

.descricao-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto; /* Centraliza o container horizontalmente */
    margin-top: -50px !important;
    margin-bottom: 40px !important;
    padding: 0 20px; /* Certifique-se de que o padding seja correto */
    text-align: center; /* Centraliza o texto */
}


h1.title {
    color: #ffffff;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    line-height: 1.2; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 0px;
    font-weight: 300;
    font-style: normal;
    padding: 0px;
}

p.subtitle {
    font-family: 'Montserrat', serif;
    font-size: 22px;
    color: #ffffff;
    margin: 0px 0px 0px;
    margin-bottom: 50px;
    padding: 0px;
    font-style: normal;
    font-weight: 200;
}

/* Estilo do botão "Fale Conosco" */
.video-content a.btn {
    border: 2px solid #000000; /* Borda da cor preta */
    color: #ffffff; /* Texto da cor preta */
    padding: 10px 20px; /* Espaçamento interno */
    font-weight: lighter; /* Negrito */
    text-transform: uppercase; /* Texto em maiúsculas */
    transition: background-color 0.3s, color 0.3s; /* Transição suave para hover */
    text-decoration: none; /* Remove sublinhado */
    display: inline-block; /* Torna o botão um bloco inline */
    margin-bottom: 50px; /* Aumenta o espaço abaixo do botão */
}

.video-content a.btn:hover {
    background-color: #000000; /* Fundo preto no hover */
    color: white; /* Texto branco no hover */
}

/* ===================================================
   Estilização da Seção Engenharia
   ================================================== */

.engenharia-section {
    margin-top: 50px; /* Ajusta o espaço antes da seção "Engenharia" */
}

.engenharia-intro {
    text-align: center;
    margin: 150px auto; /* Aumentar o espaçamento superior e inferior */
    max-width: 800px;
}

.engenharia-intro h2 {
    font-size: 2.2rem; /* Aumentar ligeiramente o tamanho do título */
    font-weight: lighter;
    color: #333;
    margin-bottom: 20px; /* Aumentar o espaçamento inferior */
}

.engenharia-container {
    display: flex;
    align-items: center;
    margin-bottom: 60px; /* Aumentar o espaçamento inferior entre as seções */
}

.engenharia-container.reverse {
    flex-direction: row-reverse;
}

.engenharia-imagem {
    flex: 1;
    margin-right: 20px;
}

.engenharia-imagem img {
    width: 100%;
    height: 350px; /* Reduzir a altura da imagem para manter proporções mais elegantes */
    border-radius: 0px;
    object-fit: cover;
}

.engenharia-texto {
    flex: 2;
    max-width: 50%;
}

.engenharia-texto h3 {
    font-size: 2rem;
    font-weight: lighter;
    margin-bottom: 10px;
    color: #333;
}

h2.title {
    color: #333333;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    line-height: 1.2; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    font-weight: 300;
    margin-top: 50px;
    font-style: normal;
}

h2.title-2 {
    color: #333333;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    line-height: 1.2; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    font-weight: 300;
    margin-top: -80px;
    font-style: normal;
}

p.paragrafo-2-engenharia {
    color: #757575;
    font-family: "Montserrat", serif;
    font-size: 19px;
    line-height: 1.6; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    margin-bottom: -100px;
    font-weight: 300;
    font-style: normal;
}

h2.titlevideo {
    color: #333333;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px !important;
    align-items: center !important;
}

h2.title-sobre-nos {
    color: #333333;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    line-height: 1.2; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    font-weight: 300;
    margin-top: 50px;
    font-style: normal;
    text-transform: uppercase;
}




/* ===================================================
   SLIDER ARQUITETURA
   ================================================== */

.portfolio-slider {
    position: relative;
    width: 100vw; /* Garante que a largura ocupe toda a viewport */
    height: 110vh; /* Garante que a altura ocupe toda a viewport */
    overflow: hidden;
    margin: 0;
    margin-bottom: 20px !important;
    padding: 0;
    left: 0;
}

.carousel-inner img {
    width: 100vw; /* Faz a imagem ocupar 100% da largura da tela */
    height: 100vh; /* Faz a imagem ocupar 100% da altura da tela */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorção */
    margin: 0;
    padding: 0;
    display: block;
    left: 0;
}

.carousel-item {
    height: 100vh; /* Garante que cada item do carrossel ocupe a altura completa */
    left: 0;
}

.carousel-control-prev,
.carousel-control-next {
    display: none; /* Remove setas de navegação, caso não precise */
}

.slide-content {
    position: absolute;
    top: 50%; /* Centraliza verticalmente o conteúdo do slide */
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza horizontalmente o conteúdo */
    text-align: center;
    color: rgb(255, 255, 255);
    background: none;
    padding: 20px;
}

p.descricao-texto.subtitle {
    text-align: center;
    color: #333333;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    line-height: 1.2; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    font-weight: 300;
    font-style: normal;
}

p.descricao-texto {
    color: #757575;
    font-family: "Montserrat", serif;
    font-size: 19px;
    line-height: 1.6; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    margin-top: 0px !important;
    font-weight: 300;
    font-style: normal;
    padding-top: 0px;
}

.descricao-texto.subtitle2 {
    text-align: center;
    color: #757575;
    font-family: "Montserrat", serif;
    font-size: 19px;
    line-height: 1.6; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    margin-top: -10px !important;
    font-weight: 300;
    font-style: normal;
}

.slide-content h2 {
    color: #ffffff;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    line-height: 1.2; /* Altura da linha para um melhor espaçamento */
    margin: 0px 0px 20px;
    font-weight: 300;
    font-style: normal;
}



.slide-content a.btn {
    border: 0px solid #ffffff;
    color: #ffffff;
    padding: 10px 20px;
    font-weight: lighter;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    display: inline-block;
}

.slide-content a.btn:hover {
    background-color: #ffffff;
    color: #000000;
}


.slide-video {
    width: 100%; /* O vídeo ocupará 100% da largura do container */
    height: 100%; /* O vídeo ocupará 100% da altura do container */
    object-fit: cover; /* Garante que o vídeo cubra todo o espaço do container */
    position: absolute; /* Garante que o vídeo fique dentro do container de forma fluida */
    top: 0; /* Alinha o vídeo ao topo */
    left: 0; /* Alinha o vídeo à esquerda */
}

/* ===================================================
   CARROSSEL DE INSTAGRAM
   ================================================== */

   #instagramWidget {
    padding: 30px 0; /* Diminui o padding superior e inferior da seção */
    background-color: #ffffff; /* Cor de fundo da seção */
    text-align: center; /* Centraliza o conteúdo dentro da seção */
    margin-bottom: 0px; /* Remove o espaço extra entre a sessão e o rodapé */
}

#instagramWidget .titulo-instagram {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    color: #333; /* Cor do título */
    margin-bottom: 15px; /* Diminui o espaçamento inferior para o título */
    margin-top: -50px;
    font-weight: 300;
    letter-spacing: 0.05em; /* Espaçamento entre as letras */
    text-transform: uppercase; /* Deixa o texto do título em maiúsculas */
}

#instagramWidget .container {
    max-width: 800px; /* Limita a largura máxima da área do widget */
    margin: 0 auto; /* Centraliza o container */
}

.lightwidget-widget {
    width: 100%;
    height: 500px; /* Ajuste a altura conforme necessário */
    border: 0; /* Remove a borda */
    overflow: hidden; /* Garante que não haja barra de rolagem */
}


/* ===================================================
   SEÇÃO SOBRE NÓS
   ================================================== */

.sobre-nos-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 50px;
}



.sobre-nos-imagem {
    flex: 1;
    margin-left: 20px;
    margin-right: 100px;
}

.sobre-nos-imagem img {
    width: 100%;
    height:580px;
    border-radius: 0px;
    object-fit: cover;
    margin-top: -60px;
}

.sobre-nos-imagem-2 img {
    width: 100%;
    height:540px;
    border-radius: 0px;
    object-fit: cover;
}

.sobre-nos-texto {
    flex: 1;
    max-width: 50%;
}

.sobre-nos-section {
    display: flex;
    align-items: flex-start; /* Alinha o conteúdo ao topo */
    gap: 20px; /* Espaçamento entre a imagem e o texto */
}

.sobre-nos-texto h2 {
    font-size: 2.5rem;
    margin-bottom: 0px; /* Mantém um pequeno espaçamento entre o título e o texto */
    position: center;
    
}

h2.title-sobre-nos{
    text-align: center;
    margin-top: -50px !important; /* Remove qualquer espaçamento superior adicional */
    margin-bottom: 60px;
}

p.texto-sobre-nos {
    color: #757575;
    font-family: "Montserrat", serif;
    font-size: 19px;
    line-height: 1.6;
    margin-top: 0px; /* Alinha o texto logo abaixo do título */
    margin-bottom: 20px; /* Espaçamento inferior ajustado */
    font-weight: 300;
    font-style: normal;
    text-align: justify;
}

p.texto-sobre-nos-2 {
    color: #757575;
    font-family: "Montserrat", serif;
    font-size: 19px;
    line-height: 1.6;
    margin-top: 0px; /* Alinha o texto logo abaixo do título */
    margin-bottom: 10px; /* Espaçamento inferior ajustado */
    font-weight: 300;
    font-style: normal;
    text-align: justify;
}




/* ===================================================
   RODAPÉ
   ================================================== */

   .footer {
    padding: 20px 0;
    font-size: 0.9rem;
    color: #333;
    background-color: #ffffff;
}

.footer .container {
    display: flex;
    justify-content: space-between; /* Mantém espaçamento entre as colunas */
    align-items: flex-start; /* Alinha os itens ao topo */
    flex-wrap: wrap;
    padding: 0 40px; /* Ajusta o padding lateral */
}

.footer-section {
    flex: 1;
    margin: 0px;
    max-width: 300px; /* Limita a largura máxima de cada coluna */
}

.footer-section h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #333333;
}

.footer-section h4.h4-contato, .footer-section h4.h4-suporte, .footer-section h4.h4-redes {
    text-align: left;
    margin-bottom: 10px;
}

/* Alinhamento dos ícones com o texto */
.footer-section .h4-contato-info {
    display: flex;
    align-items: center;
    gap: 5px; /* Espaçamento entre o ícone e o texto */
}

.footer-section .h4-contato-info img {
    width: 20px;
    height: auto;
    vertical-align: middle;
    position: relative;
    top: -5px; /* Pequeno ajuste para centralizar */
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.footer-section ul li img {
    width: 20px;
    height: auto;
    vertical-align: middle;
    position: relative;
    top: -3px; /* Pequeno ajuste para centralizar os ícones */
}

.footer-section ul li a {
    color: #737373;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #007bff;
}

.social-icons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.social-icons a img {
    max-width: 24px;
    max-height: 24px;
    transition: transform 0.3s;
}

.social-icons a img:hover {
    transform: scale(1.1);
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #737373;
}

.flag-icon {
    width: 16px;
    height: auto;
    vertical-align: middle;
    margin-right: 4px;
    line-height: 0.5em;
    top: -4px !important; /* Pequeno ajuste para centralizar */

}

p.direitos {
    font-size: 15px;
    text-align: center;
}



/* ===================================================
   ELEMENTOS FLUTUANTES E MODAIS
   ================================================== */

/* Estilo do ícone de chat flutuante */
#chat-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #00000075; /* Cor de fundo */
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: 50px;
    width: 50px; /* Mantém o tamanho do botão */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

#chat-icon img {
    width: 30px;
    height: 30px;
    display: block;
    margin-top: -10px;
}

/* Estilo do modal de chat */
.chat-modal {
    display: none; /* Oculto por padrão */
    position: fixed;
    bottom: 80px; /* Ajuste para alinhar na parte inferior */
    right: 20px; /* Alinha o modal à direita */
    background-color: white;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 20px; /* Adiciona padding para o conteúdo */
    z-index: 1001; /* Para garantir que fique acima do ícone */
    text-align: center; /* Centraliza o conteúdo dentro do modal */
}

.chat-modal-content {
    text-align: center;
}

.chat-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}

/* Botão no modal */
#btn-entre-contato {
    background-color: transparent;
    border: 2px solid black;
    padding: 10px 20px;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#btn-entre-contato:hover {
    background-color: #000;
    color: #fff;
}

/* Exibe o modal quando a classe 'show' é adicionada */
.chat-modal.show {
    display: block;
}



/* Estilo do ícone de WhatsApp flutuante */
#whatsapp-icon {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background-color: #00000075; /* Cor de fundo */
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

#whatsapp-icon img {
    width: 30px;
    height: 30px;
    display: block; /* Garante que a imagem seja tratada como um bloco */
    margin-top: -10px; /* Ajuste o valor até que o ícone esteja na posição desejada */
}

#top-button {
    position: fixed;
    bottom: 140px;
    right: 20px;
    background-color: #00000075;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

#top-button img {
    width: 30px;
    height: 30px;
    display: block; /* Garante que a imagem seja tratada como um bloco */
    margin-top: -8px; /* Ajuste o valor até que o ícone esteja na posição desejada */
}


/* ===================================================
   RESPONSIVIDADE
   ================================================== */

/* Menu hamburger para dispositivos móveis */
@media (max-width: 576px) {

    .navbar {
        height: 70px; /* Reduzindo altura para caber na tela */
    }

    .logo {
        width: 60px; /* Reduzindo o tamanho da logo */
        top: 35px; /* Ajustando posição vertical */
        left: 10px; /* Ajustando posição horizontal */
    }


    .navbar-text img {
        width: 150px; /* Ajuste do tamanho do nome */
        margin-top: -10px; /* Centralização vertical */
        margin-left: 80px; /* Ajuste para centralizar horizontalmente */
    }

    /* Ajuste no título sobre o vídeo */
    .video-content h1.title {
        font-size: 1.5rem; /* Reduzindo o tamanho do título */
        margin-top: 20px;
        padding: 0 10px;
    }

    .video-content p.subtitle {
        font-size: 1rem; /* Reduzindo o tamanho do subtítulo */
        padding: 0 10px;
        margin-top: 5px;
    }
}

@media (max-width: 576px) {
    .navbar-toggler {
        height: 40px;
        width: 50px !important;
        margin-right: 0;
        margin-top: -10px !important;
    }

    .navbar-collapse {
        width: 100%; /* Corrigindo largura para caber no viewport */
        margin-top: 10px; /* Ajustando margem */
        max-height: 300px; /* Aumente a altura máxima da barra expandida */
        overflow-y: auto; /* Adicione rolagem vertical se o conteúdo for muito grande */
    }

    .navbar-nav {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbar-nav .nav-link {
        font-size: 1rem;
        padding: 10px 0;
        color: #333;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f5f5f5; /* Separadores entre links */
    }

    .navbar-toggler-icon {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba%28110, 110, 110, 1%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
    }
}

/* Ajustes responsivos para a seção de Engenharia */
@media (max-width: 576px) {
    .engenharia-section {
        flex-direction: column; /* Alinha imagem e texto em coluna no celular */
        text-align: center; /* Centraliza o texto */
    }

    .engenharia-container {
        display: flex;
        flex-direction: column; /* Empilha a imagem e o texto */
        align-items: center;
        text-align: center;
    }

    .engenharia-imagem {
        margin-right: 0; /* Remove margens laterais */
        margin-bottom: 20px; /* Espaçamento entre imagem e texto */
        width: 100%; /* Ajusta a largura da imagem */
    }

    .engenharia-imagem img {
        width: 100%;
        height: auto; /* Ajuste para evitar distorção da imagem */
        max-height: 250px; /* Limita a altura da imagem para manter a proporção */
    }

    .engenharia-texto {
        max-width: 90%; /* Mesma largura do texto de Engenharia */
        text-align: justify; /* Justifica o texto */
        padding: 0 10px; /* Espaçamento interno */
        margin: 0 auto; /* Centraliza horizontalmente */
    }

    .engenharia-intro {
        margin-top: 30px;
        padding: 0 10px;
    }

    h2.title{
        text-align: center;
    }

    h2.title-2 {
        margin-top: 10px;
    }

    p.paragrafo-2-engenharia{
        margin-bottom: -150px !important;
    }
}

/* Ajustes responsivos para o layout do David */
@media (max-width: 576px) {

    .sobre-nos-section{
        flex-direction: column; /* Alinha imagem e texto em coluna no celular */
        text-align: center; /* Centraliza o texto */
    }

    h2.title-sobre-nos {
        text-align: center;
        margin-bottom: 70px; /* Ajuste do espaço entre o título e a imagem */
        margin-top: -50px;
    }

    .sobre-nos-container {
        display: flex;
        flex-direction: column; /* Empilha a imagem e o texto */
        align-items: center;
        text-align: center;
    }

    .sobre-nos-imagem {
        width: 80%; /* Deixa a imagem responsiva */
        max-height: 500px; /* Define uma altura máxima para manter a proporção */
        object-fit: cover; /* Ajusta a imagem para preencher a área sem distorcer */
        margin-bottom: 50px !important;
        margin: 20px auto; /* Centraliza horizontalmente */

    }

    .sobre-nos-imagem img {
        width: 100%; /* Imagem responsiva */
        max-width: 300px; /* Define um limite de largura */
        height: auto; /* Mantém as proporções */
        margin-bottom: 0px; /* Espaço entre a imagem e o texto */
    }

    .sobre-nos-texto {
        max-width: 90%; /* Mesma largura do texto de Engenharia */
        text-align: justify; /* Justifica o texto */
        padding: 0 10px; /* Espaçamento interno */
        margin: 0 auto; /* Centraliza horizontalmente */
        margin-top: -15px;
        margin-bottom: -90px !important;
    }
}

/* Ajustes responsivos para o layout da Aline */
@media (max-width: 576px) {

    .sobre-nos-container reverse{
        display: flex;
        flex-direction: column-reverse; /* Empilha a imagem e o texto */
        align-items: center;
        text-align: center;
    }


    .sobre-nos-imagem-2 {
        width: 80%; /* Deixa a imagem responsiva */
        max-height: 500px; /* Define uma altura máxima para manter a proporção */
        object-fit: cover; /* Ajusta a imagem para preencher a área sem distorcer */
        margin-bottom: 100px !important;
        margin: 20px auto; /* Centraliza horizontalmente */
        order: -1;

    }

    .sobre-nos-imagem img {
        width: 100%; /* Imagem responsiva */
        max-width: 300px; /* Define um limite de largura */
        height: auto; /* Mantém as proporções */
        margin-bottom: 0px; /* Espaço entre a imagem e o texto */
    }

    .sobre-nos-texto-2 {
        max-width: 90%; /* Mesma largura do texto de Engenharia */
        text-align: justify; /* Justifica o texto */
        padding: 0 10px; /* Espaçamento interno */
        margin: 0 auto; /* Centraliza horizontalmente */
        margin-top: -15px;
        order: 1;
        margin-bottom: 100px;
    }
}


    h2.titulo-instagram{
        margin-top: 50px !important;
    }

@media (max-width: 576px) {
    .footer .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 10px;
    }

    .footer-section {
        max-width: 100%; /* Ocupa toda a largura disponível */
        margin-bottom: 20px;
    }

    .footer-section h4 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        text-align: center;
    }

    .footer-section ul {
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-section ul li {
        margin-bottom: 10px;
        text-align: center;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
    }

    .footer-bottom {
        text-align: center;
        font-size: 0.8rem;
        color: #737373;
        margin-top: 20px;
    }

    /* Centraliza o contato com ícones */
    .h4-contato-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px; /* Espaçamento entre o ícone e o texto */
    }

    .footer-section h4.h4-suporte {
        text-align: center; /* Centraliza o texto do título */
        margin: 0 auto 10px auto; /* Centraliza e ajusta o espaço inferior */
        width: 100%; /* Garante que ocupe a largura total */
    }

    .footer-section h4.h4-contato {
        margin-top: 50px !important;
        text-align: center; /* Centraliza o texto do título */
        margin: 0 auto 10px auto; /* Centraliza e ajusta o espaço inferior */
        width: 100%; /* Garante que ocupe a largura total */
    }

    .footer-section h4.h4-redes {
        margin-top: 50px !important;
        text-align: center; /* Centraliza o texto do título */
        margin: 0 auto 10px auto; /* Centraliza e ajusta o espaço inferior */
        width: 100%; /* Garante que ocupe a largura total */
    }
}