/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}



body {
    line-height: 1.6;
    color: #333;
    background-color: #f7f1e3; /* Tons de areia ou bege claro */
}



/* Estilo do Cabeçalho */
.header-banner {
    position: relative;
    height: 300px;
    background: url('img/turismo-crajubar.png') no-repeat center center/cover;
}

.header-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ajuste para telas menores */
@media only screen and (max-width: 768px) {
    .header-banner {
        background: none; /* Remove o fundo do desktop */
    }

    .header-banner .overlay {
        background: url('img/turismo-crajubar-mobile.png') no-repeat center center; /* Centraliza a imagem */
        background-size: contain; /* Garante que a imagem seja exibida inteira */
        background-position: center; /* Garante que a imagem seja centralizada */
        /* width: %;  Ocupa toda a largura do elemento pai */
        /* height: ;  Aumentei a altura para garantir que a imagem apareça */
        position: relative; /* Garante que a overlay não sobreponha o menu */
        z-index: 0; /* Define um z-index menor */
    }
}





/* Estilo do Menu */
nav {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para separar o menu do cabeçalho */
    text-align: center;
    padding: 1rem 0;
    background-color: #f7f1e3; /* Tons de areia ou bege claro */
    overflow: hidden; /* Evita itens flutuantes fora do menu */
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 5px 10px;
    white-space: nowrap; /* Garante que o texto não quebre em várias linhas */
}

nav ul li a:hover {
    color: #555;
    border-bottom: 2px solid #333;
}

nav ul li a.active {
    color: #fff; /* Cor do texto quando ativo */
    background-color: rgba(0, 0, 0, 0.5); /* Cor de fundo para o item ativo */
    border-radius: 5px; /* Borda arredondada */
    padding: 5px 10px; /* Espaçamento interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra ao redor do link ativo */
}

/* Estilo responsivo para dispositivos móveis */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Colocar os itens em coluna */
        align-items: center;
    }

    nav ul li {
        margin: 10px 0; /* Espaçamento vertical entre os itens */
    }

    nav ul li a {
        font-size: 1rem; /* Ajustar o tamanho da fonte */
    }
}

/* Responsividade para telas menores */
@media (max-width: 478px) {
    nav ul {
        flex-direction: column; /* Empilha os itens verticalmente */
        align-items: center;   /* Centraliza os itens */
    }

    nav ul li {
        margin: 5px 0; /* Espaçamento entre os itens */
    }
}


/* Menu visível por padrão */
.menu-navegacao-principal {
    display: flex; /* Organiza os itens em linha */
    justify-content: center;
    list-style: none;
    gap: 1rem; /* Espaçamento entre os itens */
}

/* Esconde o menu em telas menores que 768px */
@media (max-width: 768px) {
    .menu-navegacao-principal {
        display: none; /* Esconde completamente a lista */
    }
}

/* Estilo para os links do menu '.menu-navegacao-principal' */
.menu-navegacao-principal li a {
    color: #333; /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado */
    font-weight: bold; /* Torna o texto negrito */
    font-size: 1.1rem; /* Tamanho da fonte */
    padding: 5px 10px; /* Espaçamento interno */
}

/* Efeito hover nos links do menu '.menu-navegacao-principal' */
.menu-navegacao-principal li a:hover {
    color: #555; /* Cor do texto ao passar o mouse */
    border-bottom: 2px solid #333; /* Linha inferior ao passar o mouse */
}

/* Estilo para o link ativo do menu '.menu-navegacao-principal' */
.menu-navegacao-principal li a.active {
    color: #fff; /* Cor do texto quando ativo */
    background-color: rgba(0, 0, 0, 0.5); /* Cor de fundo para o item ativo */
    border-radius: 5px; /* Borda arredondada */
    padding: 5px 10px; /* Espaçamento interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra ao redor do link ativo */
}


/* Esconder o menu secundário por padrão */
.menu-secundario ul.hidden {
    display: none;
}

/* Ajustar visibilidade no modo ativo */
.menu-secundario ul.visible {
    display: block;
}

/* Ajuste para dispositivos menores */
@media (max-width: 768px) {
    .menu-secundario ul {
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #f5f5f5; /* Fundo claro para diferenciação */
    }

    .menu-secundario button {
        background-color: #333;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        width: 100%; /* O botão ocupa toda a largura */
    }

    .menu-secundario button:hover {
        background-color: #333;
    }
}



/* Esconde o botão e a lista inicialmente */
.toggle-menu {
    display: none;
}

/* O botão fica oculto por padrão */
.menu-secundario {
    display: none;
}

/* Mostre apenas em resoluções menores que 768px (ajuste conforme necessário) */
@media (max-width: 768px) {
    .menu-secundario {
        display: block;
        text-align: center;
    }

    .menu-secundario button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #555;
        color: white;
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
    }

    .menu-secundario ul {
        display: none; /* Esconda a lista inicialmente */
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #f7f1e3;
        text-align: center;
    }

    .menu-secundario ul.visible {
        display: block; /* Mostre a lista ao clicar no botão */
    }

    .menu-secundario ul li {
        padding: 10px;
        border-bottom: 1px solid #f7f1e3;
    }
}


/* Sessão Sobre o Turismo */
#sobre-turismo {
    padding: 2rem;
    text-align: center; /* Alinha o texto ao centro */
    margin: 0; /* Remove qualquer margem */
    width: 100%; /* Garantir que ocupe toda a largura disponível */
    box-sizing: border-box;
}

#sobre-turismo h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

#sobre-turismo p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #555;
}

#informacoes-adicionais {
    padding: 20px;
    background-color: #f7f1e3;
    text-align: center;
    margin-top: 20px;
}

#informacoes-adicionais .info-container {
    display: inline-block;
    max-width: 600px;
}

#informacoes-adicionais .info-links {
    display: inline-flex; /* Alinha os links lado a lado */
    justify-content: center;
    gap: 20px; /* Espaçamento entre os links */
    margin-top: 10px;
}

#informacoes-adicionais .info-links a {
    font-size: 1em;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center; /* Centraliza o ícone e o texto */
    gap: 5px; /* Espaçamento entre o ícone e o texto */
}

#informacoes-adicionais .info-links a i {
    font-size: 1.2em;
}



/* Estilos para Pontos Turísticos */
#pontos-turisticos {
    text-align: center;
    padding: 2rem 1rem;
    text-decoration: none; /* Remove o sublinhado ou qualquer estilo que possa indicar seleção */
    color: inherit; /* Faz com que a cor do texto herde a cor padrão */
    background: none; /* Remove qualquer fundo que possa indicar que está ativo */
}

#pontos-turisticos h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #333;
    
}


/* Fundo do site */
.site-background {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    line-height: 1.0;
}



/* Ajustes de estilo para o carrossel */
.carousel-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    overflow: hidden;
    margin: 0 auto;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel img {
    width: 100%; /* Garante que a imagem ocupe 100% da largura do container */
    height: auto; /* Ajusta automaticamente a altura para manter a proporção */
    flex: 0 0 100%; /* Faz com que cada imagem ocupe 100% da largura do carrossel */
}

/* Ajuste do carrossel para garantir que apenas uma imagem seja visível */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 50%;
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Responsividade */
@media (max-width: 768px) {
    .carousel-container {
        width: 100%; /* Ajusta o carrossel para ocupar 100% da largura em telas menores */
    }
}

.card-container .card h3 {
    transition: text-shadow 0.3s ease; /* Transição suave para o efeito de sombra */
}

.card-container .card h3:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra ao redor do link ativo */
}

.card-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaçamento entre os cards */
    flex-wrap: wrap;
}

.card {
    width: 250px; /* Largura fixa dos cards */
    height: 350px; /* Altura fixa dos cards */
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Alinha os elementos na vertical */
    justify-content: space-between; /* Espaço igual entre os elementos */
    align-items: center; /* Centraliza os elementos horizontalmente */
    padding: 10px;
    text-align: center;
}

.card img {
    max-width: 100%; /* Ajusta a imagem à largura do card */
    max-height: 150px; /* Define uma altura máxima */
    object-fit: contain; /* Mantém a proporção da imagem */
}

.card h3 {
    font-size: 1.2em;
    margin: 10px 0;
    color: #333;
}

.card p {
    font-size: 1em;
    color: #555;
    margin-bottom: 10px;
}

.card a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

.card-1 {
    background-color: #f7f1e3; /* Tons de areia ou bege claro */
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 1rem;
    width: 400px;
}



@media (max-width: 768px) {
    /* Centraliza os vídeos dentro de seu contêiner */
    .card-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-1 {
        max-width: 100%; /* Faz o vídeo ocupar 100% da largura do seu contêiner */
        text-align: center; /* Alinha o conteúdo dentro do card */
    }

    video {
        display: block; /* Faz o vídeo ser exibido como bloco */
        margin: 0 auto; /* Centraliza o vídeo horizontalmente */
    }
}




/* Container da seção de depoimentos */
.depoimentos-container {
    text-align: center; /* Centraliza o título */
    margin-bottom: 30px;
}

/* Estilo do título */
.depoimentos-container h2 {
    font-size: 28px;
    font-family: 'Poppins', sans-serif;
    color: #333;
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}



/* Estilo para a seção de depoimentos */
.depoimentos {
    display: flex; /* Ativa o Flexbox */
    justify-content: center; /* Centraliza horizontalmente */
    gap: 20px; /* Espaçamento entre as divs */
    margin: 20px auto; /* Centraliza o contêiner na página */
    padding: 10px;
}

/* Estilo dos depoimentos */
.depoiimento {
    flex: 1; /* Define largura flexível para os elementos */
    text-align: center;
    background-color: #f9f9f9; /* Fundo leve para destaque */
    border: 1px solid #ddd; /* Bordas para definição */
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

.depoiimento:hover {
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
}

/* Estilo das imagens quadradas */
.foto-quadrada {
    width: 150px;
    height: 150px;
    border-radius: 10px; /* Bordas arredondadas */
    object-fit: cover; /* Faz a imagem cobrir o quadrado */
    margin-bottom: 10px; /* Espaçamento entre a imagem e o texto */
}

/* Estilo do nome */
.depoimento h3 {
    font-size: 18px;
    margin: 10px 0;
    color: #333;
}

/* Estilo do texto */
.depoimento p {
    font-size: 14px;
    color: #666;
}

/* Estilo para a imagem e texto do novo depoimento extra */
.depoimento-extra {
    text-align: center;
    margin-top: 30px;
    background-color: #f9f9f9; /* Fundo leve para destaque */
    padding: 20px;
    border: 1px solid #ddd; /* Bordas para definição */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

.depoimento-extra:hover {
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
}

.depoimento-extra img {
    width: 150px; /* Tamanho fixo para a foto */
    height: 150px; /* Mantém a altura igual à largura */
    object-fit: cover; /* Garante que a imagem se ajuste ao quadrado */
    border-radius: 8px; /* Bordas arredondadas */
    margin-bottom: 10px; /* Espaçamento entre a imagem e o texto */
}

.depoimento-extra h3 {
    font-size: 1.5em; /* Tamanho do título */
    margin-top: 10px;
    color: #333;
}

.depoimento-extra p {
    font-size: 1em;
    color: #555;
}

@media (max-width: 768px) {
    /* Ajuste no tamanho da foto e do texto em telas menores */
    .depoimento-extra img {
        width: 120px; /* Foto menor em telas pequenas */
        height: 120px;
    }

    .depoimento-extra h3 {
        font-size: 1.2em; /* Ajuste do tamanho do título */
    }

    .depoimento-extra p {
        font-size: 0.9em; /* Ajuste do tamanho do texto */
    }

    .depoimento-extra {
        padding: 20px; /* Aumenta o preenchimento para mais espaçamento */
        margin-top: 25px; /* Maior distância entre a seção */
    }

    .depoimentos {
        flex-wrap: wrap; /* Permite quebra de linha em telas menores */
        justify-content: center;
        gap: 30px; /* Espaço maior entre os itens */
        padding: 20px; /* Adiciona mais espaço interno na seção */
        margin: 30px auto; /* Centraliza e dá mais espaçamento */
    }

    .depoiimento {
        flex: 0 1 calc(45% - 20px); /* Ajusta a largura para caber confortavelmente dois por linha */
        margin-bottom: 25px; /* Espaçamento maior entre as linhas */
    }
}

@media (max-width: 480px) {
    /* Em dispositivos muito pequenos (como smartphones em modo retrato) */
    .depoimento-extra {
        padding: 15px;
        margin-top: 20px;
    }

    .depoimento-extra img {
        width: 100px; /* Tamanho ainda menor */
        height: 100px;
    }

    .depoimento-extra h3 {
        font-size: 1.1em; /* Menor ainda em telas menores */
    }

    .depoimento-extra p {
        font-size: 0.8em; /* Texto mais compacto */
    }

    .depoimentos {
        padding: 15px; /* Reduz o preenchimento interno em telas muito pequenas */
        margin: 20px auto; /* Espaçamento entre a seção e outros elementos */
        gap: 20px; /* Espaço entre os itens */
    }

    .depoiimento {
        flex: 0 1 100%; /* Cada depoimento ocupa 100% da largura */
        margin-bottom: 20px; /* Espaçamento entre os itens */
    }
}


#guia-turistico {
    margin: 2rem auto;
    text-align: center;
    padding: 2rem 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 100%; /* Certifica que a largura é 100% da tela */
    max-width: 800px; /* Limita a largura máxima */
}

#guia-turistico h2 {
    font-size: 1.8rem; /* Ajusta o tamanho para telas menores */
    margin-bottom: 1.5rem;
    color: #333;
}

#guia-turistico p {
    max-width: 700px;
    margin: 0 auto 2rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

.guia-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    text-decoration: none;
    color: #555;
}

/* Estilo do link */
.local-item a {
    text-decoration: none;
    color: #555;
}

.local-item a:hover {
    color: #555;
    text-decoration: underline;
}

.guia-item {
    width: 100%; /* Faz com que cada item ocupe a largura total em telas pequenas */
    max-width: 300px; /* Limita o tamanho máximo de cada item */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guia-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.guia-img {
    width: 100%; /* A imagem ocupa a largura disponível */
    height: auto; /* Ajusta a altura da imagem de acordo com a largura */
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.guia-item h4 {
    font-size: 1.2rem;
    margin: 10px 0;
}

.guia-item p {
    font-size: 1rem;
    color: #333;
}

.guia-item a {
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    margin: 5px 0;
}

.guia-item a:hover {
    color: #555;
    text-decoration: underline;
}


/* Estilização para tablets */
@media (max-width: 768px) {
    .guia-item {
        flex: 1 1 calc(50% - 1.5rem); /* Dois itens por linha em tablets */
    }
}

/* Estilização para celulares */
@media (max-width: 480px) {
    #guia-turistico {
        padding: 1rem; /* Reduz o padding em telas pequenas */
    }

    .guia-item {
        flex: 1 1 100%; /* Um item por linha em celulares */
        max-width: 100%; /* Tira o limite máximo de largura para que ocupe toda a tela */
        text-align: center; /* Centraliza o texto */
    }

    .guia-img {
        width: 80%; /* Ajusta o tamanho das imagens */
        height: auto;
    }

    h2 {
        font-size: 1.5rem; /* Ajusta o tamanho do título */
    }

    p {
        font-size: 0.9rem; /* Ajusta o tamanho da fonte do parágrafo */
    }
}




/* Estilo para a seção dos desenvolvedores */
#desenvolvedores {
    text-align: center;
    padding: 40px;
}

#desenvolvedores-link {
    text-align: center; /* Centraliza o conteúdo de texto */
    margin-top: 20px; /* Dá um espaçamento superior para separar da seção anterior */
}


#desenvolvedores p {
    text-align: justify; /* Justifica o texto */
    margin: 0 auto; /* Centraliza horizontalmente */
    line-height: 1.8; /* Aumenta o espaçamento entre linhas */
    max-width: 800px; /* Define uma largura máxima */
    color: #555; /* Cor semelhante ao padrão */
    font-size: 1rem; /* Ajuste do tamanho da fonte */
}

#desenvolvedores-link a {
    color: blue;
    text-decoration: underline;
}

.dev-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.dev-item {
    width: 250px;
    text-align: center;
    border-radius: 8px;
    padding: 20px;
}

.dev-foto {
    width: 100px;
    height: 100px;
    border-radius: 10px; /* Leve arredondamento nas bordas */
    margin-bottom: 15px;
    object-fit: cover; /* Garante que a imagem ocupe completamente o quadrado */
    border: 2px solid #ccc; /* Adiciona uma borda fina para destacar a imagem */
}

.dev-item h3 {
    margin: 10px 0;
    font-size: 1.2em;
}

.dev-item p {
    font-size: 0.9em;
    color: #555;
}


/* Responsividade para telas pequenas */
@media (max-width: 768px) {
    #desenvolvedores p {
        font-size: 0.9rem;
    }

    .dev-container {
        flex-direction: column;
        align-items: center;
    }

    .dev-item {
        width: 80%;
        margin-bottom: 20px;
    }

    .dev-item h3 {
        font-size: 1rem;
    }

    .dev-item p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    #desenvolvedores p {
        font-size: 0.8rem;
    }

    .dev-container {
        flex-direction: column;
    }

    .dev-item {
        width: 90%;
    }

    .dev-foto {
        width: 120px;
        height: 120px;
    }

    .dev-item h3 {
        font-size: 0.9rem;
    }

    .dev-item p {
        font-size: 0.7rem;
    }
}


/* Estilo para o Footer */
/* Estilo para o Footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 1rem 0; /* Diminuir o padding vertical */
    text-align: center;
    width: 100%;
}

.footer-content {
    max-width: 100%; /* Garantir que o conteúdo ocupe toda a largura possível */
    margin: 0 auto;
    padding: 0 1rem;
}

.footer-content p {
    margin: 0.5rem 0;
    font-size: 0.9rem; /* Diminuir o tamanho da fonte para dispositivos móveis */
    color: #fff;
}

/* Estilo para telas menores (responsividade) */
@media screen and (max-width: 600px) {
    footer {
        padding: 1rem 0; /* Ajuste de padding em telas pequenas */
    }

    .footer-content p {
        font-size: 0.85rem; /* Fonte ainda menor em dispositivos muito pequenos */
    }
}









#localizacao-estatua {
    text-align: center; /* Centraliza o texto da seção */
}

.location-container {
    display: flex; /* Alinha os filhos em linha (horizontalmente) */
    flex-wrap: wrap; /* Permite que os itens quebrem para a linha seguinte, se necessário */
    justify-content: center; /* Centraliza os itens no eixo horizontal */
    align-items: center; /* Alinha os itens no eixo vertical */
    margin: 20px 0; /* Adiciona margem superior e inferior */
}

.image-container {
    margin: 0 10px; /* Espaço entre as imagens */
    max-width: 45%; /* Limita a largura máxima das imagens */
}

.location-container p {
    flex-basis: 100%; /* Faz o parágrafo ocupar a linha inteira */
    text-align: center; /* Centraliza o texto do parágrafo */
    margin-top: 10px; /* Espaço acima do parágrafo */
}


/* Estilo do Cabeçalho */
.header-banner {
    position: relative;
    height: 60vh;
    background-image: url('img/turismo-crajubar.png') no-repeat center center/cover;
    background-size: cover;
    background-position: center;
}

.banner-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Estilo geral do menu */
.navigation-menu {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1rem 0;
    background-color: #f7f1e3; /* Tons de areia ou bege claro */
    position: relative;
    z-index: 10; /* Define um z-index maior para o menu */
}

.menu-list {
    display: flex;
    justify-content: center;
    list-style: none;
    background-color: #f7f1e3; /* Tons de areia ou bege claro */
}

.menu-link {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 5px 10px;
}

.menu-link:hover {
    color: #555;
    border-bottom: 2px solid #333;
}

.menu-link.active {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 5px 10px;
}

/* Ajuste para telas menores */
@media (max-width: 478px) {
    .menu-list {
        flex-direction: column; /* Empilha os itens do menu */
        align-items: center;
    }

    .menu-list li {
        margin: 5px 0; /* Espaçamento vertical entre os itens */
    }

    .menu-link {
        font-size: 0.9rem; /* Ajusta o tamanho da fonte para caber melhor */
    }
}



/* Estilo das Seções */
#about-tourism, #tourist-attractions, #city-maps {
    padding: 2rem 1rem;
    text-align: center;
}

#sobre-turismo p {
    padding: 1rem;
    text-align: justify; /* Alinha o texto para que ocupe toda a largura da seção */
    max-width: 800px; /* Limita a largura do conteúdo para facilitar a leitura */
    margin: 0 auto 0.1rem; /* Diminui ainda mais o espaçamento entre os parágrafos */
    color: #333;
}

@media (max-width: 480px) {
    #sobre-turismo h2 {
        font-size: 20px;
    }
}


#sobre-site {
    padding: 2rem;
    text-align: justify; /* Alinha o texto para que ocupe toda a largura da seção */
    max-width: 800px; /* Limita a largura do conteúdo para facilitar a leitura */
    margin: 0 auto; /* Centraliza a seção na página */
    color: #333;
}

#sobre-site h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
    text-align: center;
}

@media (max-width: 768px) {
    #sobre-site h2 {
        text-align: left;
        padding-left: 1rem;
    }
}

#sobre-site p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #555;
    line-height: 1.6; /* Aumenta o espaçamento entre linhas para melhorar a legibilidade */
}

/* Seção Inicial de Estatísticas, Definição e Locais */
#estatisticas-historia {
    padding: 2rem;
    text-align: center;
    margin: 1.5rem 0;
    border-radius: 8px;
    background-color: rgba(192, 210, 229, 0.2); /* Azul com transparência */
    overflow: hidden; /* Oculta o conteúdo que sai da área visível */
    position: relative; /* Permite controle sobre o conteúdo interno */
}

/* Container para os itens que será animado */
#estatisticas-historia .estatisticas-container {
    display: flex; /* Exibe os itens em linha */
    transition: transform 0.5s ease-in-out; /* Suaviza a transição entre os movimentos */
}

/* Estilo dos itens de estatísticas */
.estatistica-item {
    width: 30%;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 1rem;
    border-radius: 8px;
    background-color: #fff;
    transition: transform 0.3s ease, background-color 0.3s ease;
    flex-shrink: 0; /* Impede que os itens se encolham ao ocupar o espaço */
}

/* Efeito ao passar o mouse */
.estatistica-item:hover {
    transform: scale(1.05); /* Aumenta levemente o tamanho */
    background-color: #e0e0e0; /* Cor de fundo ao passar o mouse */
}

.estatistica-item h3 {
    font-size: 2rem;
    color: #333;
}

.estatistica-item p {
    font-size: 1rem;
    color: #555;
}


/* Estilo da seção de definição do historiador */
#definicao-historiador {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #f2f2f2; /* Cor de fundo suave */
    border-radius: 8px;
    text-align: justify;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 8px rgba(89, 89, 89, 0.286);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
}

/* Efeito ao passar o mouse */
#definicao-historiador:hover {
    background-color: #e0e0e0; /* Cor de fundo mais escura */
    transform: scale(1.05); /* Leve aumento ao passar o mouse */
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.4); /* Aumento da sombra */
}


/* Estilo da seção */
#locais-visitacao {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    background-color: #f7f1e3; /* Tons de areia ou bege claro */
}

/* Contêiner dos locais */
.locais-container {
    display: flex;
    gap: 20px; /* Espaçamento entre os blocos */
    justify-content: center; /* Centraliza os blocos horizontalmente */
    flex-wrap: wrap; /* Permite que os blocos quebrem linha em telas menores */
    margin-top: 1rem;
}

/* Estilo de cada bloco local-item */
.local-item {
    background-color: #f8f8f8;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 250px; /* Define uma largura fixa */
}

/* Estilo da imagem dentro do bloco */
.local-item img {
    width: 100%;
    height: 150px; /* Ajusta a altura */
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.local-item a {
    text-decoration: none;
    color: #007bff;

}

/* Estilo ao passar o mouse */
.local-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Estilo do título do local */
.local-item h4 {
    font-size: 1.3rem;
    color: #333;
    margin-top: 0.5rem;
}

/* Estilo do parágrafo */
.local-item p {
    font-size: 1rem;
    color: #555;
}

/* Estilo do link */
.local-item a {
    text-decoration: none;
    color: #555;
}

.local-item a:hover {
    color: #555;
    text-decoration: underline;
}

#depoimento-romeiro {
    margin: 2rem auto;
    text-align: center;
    padding: 2rem 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    width: 100%;
}

.depoimento-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.foto-romeiro img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.texto-romeiro {
    max-width: 600px;
    text-align: center;
}

.texto-romeiro .depoimento {
    font-size: 1rem;
    font-style: normal;
    color: #555;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Responsividade adicional */
@media (min-width: 768px) {
    #depoimento-romeiro {
        max-width: 60%;
    }

    .foto-romeiro img {
        width: 180px;
        height: 180px;
    }

    .texto-romeiro .depoimento {
        font-size: 1.2rem;
    }
}






.card-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.card {
    width: 250px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 1rem;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.card h3 {
    font-size: 1.5rem;
    margin: 0.8rem 0;
    color: #333;
}

.card p {
    font-size: 1rem;
    color: #555;
}


/* Estilo para o texto introdutório sobre os historiadores */
.historiadores-intro {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 2rem;
    text-align: center;
    line-height: 1.6;
}

/* Estilo para os locais a serem visitados */
.card h4 {
    font-size: 1.2rem;
    color: #333;
    margin-top: 1.2rem;
}

.card ul {
    list-style-type: none;
    padding: 0;
}

.card ul li {
    font-size: 1rem;
    color: #555;
    margin: 0.5rem 0;
}


.attractions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
}

.attraction-card {
    max-width: 300px;
    text-align: center;
}

.attraction-link {
    text-decoration: none;
    color: #333;
}

.attraction-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.map-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

#city-map {
    padding: 2rem 1rem;
    text-align: center;
}

.region-map {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

.footer-content {
    font-size: 0.9rem;
}



/* Estilo responsivo para celulares */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* Reduz o tamanho da fonte para telas menores */
        padding: 0 1rem; /* Adiciona espaçamento interno */
    }

    .header-banner {
        height: 40vh; /* Reduz a altura do banner para caber melhor em telas pequenas */
        background-position: top; /* Ajusta o foco da imagem */
    }

    nav ul {
        flex-direction: column; /* Empilha os itens do menu */
        gap: 10px; /* Espaçamento entre os itens */
    }

    nav ul li {
        margin: 0; /* Remove a margem horizontal */
    }

    .carousel-container {
        width: 100%; /* Garante que o carrossel ocupe toda a largura da tela */
    }

    .card-container {
        flex-direction: column; /* Alinha os cartões em uma coluna */
        gap: 1rem; /* Ajusta o espaçamento entre os cartões */
    }

    .card {
        width: 100%; /* Faz os cartões ocuparem toda a largura disponível */
    }

    #sobre-turismo, #sobre-site, #estatisticas-historia, #definicao-historiador, #locais-visitacao {
        padding: 1rem; /* Reduz o espaçamento interno */
        text-align: justify; /* Mantém o alinhamento para leitura */
    }

    .local-item {
        width: 100%; /* Faz cada item ocupar toda a largura disponível */
    }

    .menu-link {
        font-size: 1rem; /* Ajusta o tamanho da fonte do menu */
    }
}


/* Media Query para telas menores */
@media (max-width: 768px) {
    .header-banner {
        height: 200px;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 5px 0;
    }

    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .card-1 {
        flex: 1 1 90%;
    }

    iframe {
        width: 100%;
        height: 300px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .header-banner {
        height: 150px;
    }

    nav ul li a {
        font-size: 0.9em;
        padding: 8px 10px;
    }

    .card-1 {
        margin: 10px 0;
    }
}


/* Ajuste para dispositivos menores */
@media (max-width: 768px) {
    iframe {
        width: 100%; /* Ocupará toda a largura disponível */
        height: 300px; /* Reduz a altura */
    }
}

@media (max-width: 480px) {
    iframe {
        width: 100%; /* Permanece 100% da largura */
        height: 250px; /* Altura ainda menor para dispositivos muito pequenos */
    }
}