/* Estilo do Header */
html {
    scroll-behavior: smooth;
}

header {
    background-size: cover;
    background-position: center;
    position: relative;
    height: 80px;
    padding-top: 0;
    margin-top: 0;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    z-index: 1;
}

/* Garantir que o conteúdo do header esteja sobre a imagem */
header .navbar {
    position: relative;
    z-index: 2;
}

/* Deixe a logo e o texto em cima da imagem */
.navbar {
    background-color: transparent;
    /* Torna o fundo do menu transparente */
    z-index: 10;
    /* Garante que o menu fique sobre a imagem */
    padding-top: 0;
    padding-bottom: 0;
}

/* Faz com que a imagem do banner mantenha a altura e o conteúdo apareça por cima */
.banner-container {
    position: relative;
    height: 250px;
    /* Ajuste a altura conforme necessário */
}

.banner-container img {
    height: 85px;
    object-fit: cover;
    /* Garante que a imagem seja cortada proporcionalmente, sem distorção */
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

/* Menu recolhido - Ícone do botão */
.navbar-toggler {
    border-color: black;
    /* Cor da borda do botão de menu */
}

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

/* Links do menu quando abertos */
.navbar-nav .nav-link {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    /* Remove margens superiores dos links */
    color: black;
}

/* Alinhamento central do menu na tela pequena */
.navbar-nav {
    text-align: center;
}

.nav-links li a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease;
    /* Suaviza a transição */
}

.nav-links li a:hover {
    background-color: #00a396;
    /* Fundo branco com 20% de opacidade ao passar o mouse */
    color: #fff;
    /* Mantenha o texto branco */
}


.navbar-brand img {

    margin-top: 0;
    /* Remove qualquer margem superior no logo */

    /* Ajuste conforme o tamanho desejado do logo */
    /* Ajuste o tamanho da logo conforme necessário */
}

/* Botão primário transparente */
.btn-primary {
    background-color: #00a396;
    /* Fundo transparente */
    color: black;
    /* Cor do texto branca */
    cursor: pointer;
    padding: 10px 25px;
    border: 2px solid #008981;
    /* Borda branca */
    border-radius: 200px;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Suave transição */
}

/* Alteração ao passar o mouse */
.btn-primary:hover {
    background-color: #008981;
    /* Cor verde escura no hover */
    border-color: #fff;
    /* Ajustar a cor da borda no hover */
    color: #fff;
    /* Texto branco no hover */
}

.btn-contato {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FFF;
    background-color: #008981;
    /* Cor original */
    padding: 10px;
    width: 80%;
    border-radius: 10px;
    text-align: center;
    border: none;
    text-decoration: none;
    /* Remove borda */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Transição suave */
}

/* Efeito hover */
.btn-contato:hover {
    background-color: #00a396;
    /* Cor de fundo mais clara no hover */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    /* Adiciona uma sombra leve */
    color: #FFF;
    /* Garante que a cor do texto não mude */
    cursor: pointer;

    /* Muda o cursor ao passar por cima */
}


.navbar .dropdown-menu {
    background-color: #FFF;
    /* Fundo branco com 20% de opacidade */
    backdrop-filter: blur(10px);
    /* Efeito de desfoque no fundo */
    border: none;
    /* Remove a borda padrão */
    box-shadow: none;
    /* Remove a sombra padrão */
}

.navbar .dropdown-menu a {
    color: #00a396;
    /* Texto branco */
}

.navbar .dropdown-menu a:hover {
    background-color: #00a396;
    /* Fundo ligeiramente mais opaco ao passar o mouse */

    /* Mantém o texto branco ao passar o mouse */
}

/* Permitir o hover para abrir o menu dropdown */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    /* Remove o deslocamento do menu quando aberto */
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titulo-imagem {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    /* sombra escura */
    color: #fff;
    /* Texto branco para contraste */
}

@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .navbar {
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Ajuste para garantir que o menu mobile empurre o conteúdo da página */
.collapse.navbar-collapse {
    position: relative;
    z-index: 1;
    /* Garante que o menu fique acima do conteúdo */
}

.navbar-collapse {
    z-index: 1030;
    /* Ajuste o valor se necessário */
}

/* Estilo do Footer */
footer {
    background-color: #01787D;
    color: #fff;
    padding: 2px 0;
}

.footer-container {
    display: block;
    /* Sobrescreve o flex do Bootstrap */
}

.footer-section {
    padding: 5px 0;
}

.footer-section h3 {
    margin-top: 0;
}

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

.footer-section ul li {
    margin-bottom: 5px;
}

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

.social-icons a {
    color: #fff;
    text-decoration: none;
    margin-right: 15px;
    font-size: 20px;
    transition: color 0.3s;
}

.footer-bottom {
    text-align: center;
    font-size: 14px;
}

/* Ajustes responsivos para melhor visualização em telas menores */
@media (max-width: 768px) {
    .contact-section {
        padding: 30px 0;
    }

    .form-control.transparent-input {
        background-color: rgba(255, 255, 255, 0.7);
        /* Mais opacidade em telas menores */
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 90%;
    }
}