@import url('https://db.onlinewebfonts.com/c/5cfbe76f00e7c4d6ba5d963f6c179606?family=Museo+W01+700');



/* Definir as cores principais */
:root {
    --cor-clara: #f8e4d2;
    --cor-preta: #323130;
    --cor-emerald: #173426;
    --cor-eucalyptus: #516b60;
    --cor-tiki-torch: #c06146;
    --cor-glazed-pottery: #dcbea6;
    --cor-peacoat : #ebc57c;
}

body {
    font-family: 'Hind Madurai', sans-serif;
    background-color: #f8f9fa;
    color: #323130;
}

.hero {
    text-align: center;
    padding: 100px 20px;
    background-color:var(--cor-verde);
}

h1, h2 {
    font-family: 'Museo W01 700', sans-serif; /* Usando a fonte Museo */
    font-size: 4rem; /* Ajuste o tamanho conforme necessário */
    font-weight: 700; /* Peso da fonte */
    color: var(--cor-tiki-torch); /* Cor para o título, pode ajustar conforme necessário */
    text-align: center; /* Centraliza o título */
    margin-bottom: 50px; /* Espaço abaixo do título */
}

p {
    font-family: 'Hind Madurai', sans-serif; /* Font padrão para o parágrafo */
    font-size: 1.25rem; /* Tamanho do texto do parágrafo */
    color: (var(--cor-preta)); /* Cor do texto */
    text-align: center; /* Centraliza o parágrafo */
    margin-bottom: 40px; /* Espaçamento entre o parágrafo e o botão */
}


/* Estilo para a logo */
.navbar-brand img {
    max-height: 80px; /* Ajuste o tamanho da logo conforme necessário */
    margin-right: 20px; /* Espaçamento entre o logo e o menu */
    object-fit: contain; /* Garante que o logo não distorça */
    display: block;
}

/* Centralizar o logo */
.navbar {
    display: flex;
    justify-content: space-between; /* Logo à esquerda e menu à direita */
    align-items: center;
    font-family: 'Hind Madurai', sans-serif; 
    background-color: var(--cor-emerald);
    padding: 30px;
}

/* Estilo para os links do menu */
.navbar-nav {
    display: flex;
    align-items: center; /* Alinha verticalmente os itens de menu com o logo */
    list-style: none; /* Remove os marcadores de lista */
    margin: 0; /* Remove a margem da lista */
    padding: 0; /* Remove o padding da lista */

}

.navbar-nav .nav-item {
    margin-left: 20px; /* Espaçamento entre os itens de menu */
}

.navbar-nav .nav-link {
    color: var(--cor-clara); /* Substitua por outra cor conforme necessário */
    font-size: 1.2rem; /* Ajuste o tamanho da fonte */
    
}

.navbar-nav .nav-link:hover {
    color: var(--cor-tiki-torch); /* Cor quando o mouse passar por cima */
}

/* Remover o fundo transparente padrão do Bootstrap */
.navbar-light .navbar-nav .nav-link {
    color: white; /* Texto branco no menu */
}

/* Estilo do dropdown */
.navbar-nav .dropdown-menu {
    background-color: var(--cor-eucalyptus); /* Fundo verde para o dropdown */
    border: none;
}

.navbar-nav .dropdown-item {
    color: var(--cor-clara); /* Texto branco no dropdown */
}

.navbar-nav .dropdown-item:hover {
    background-color: var(--cor-eucalyptus); /* Fundo ao passar o mouse no item do dropdown */
    color: var(--cor-glazed-pottery); /* Texto preto no hover */
}


/* Estilo do menu hamburguer */
.navbar-toggler {
    background-color: var(--cor-emerald); /* Cor do fundo para o botão */
    border: 1px solid #fff; /* Para deixar uma borda branca ao redor */
    border-radius: 5px; /* Deixar os cantos arredondados se necessário */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23f8e4d2' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}/*Você pode usar qualquer valor de cor, inclusive valores em hexadecimal, se preferir. Exemplo para azul: stroke='%23007bff' (onde %23 é o código para # em URLs).*/

@media (max-width: 992px) {
    .navbar-toggler {
      display: block;
      margin-left: auto; /* Isso move o botão para a direita */
    }
  }
  

  .col-12.text-center h1 {
    margin-top: 50px; /* Ajuste esse valor conforme necessário */
}

.col-12.text-center h3 {
    margin-top: 20px; /* Um pequeno espaçamento entre o título e o subtítulo */
}


a {
    color: var(--cor-clara); /* Links  */
}

a:hover {
    color: var(--cor-glazed-pottery); /* Efeito hover dos links */
}



/* Estilo da imagem com bordas arredondadas e sombra */
.custom-img {
    width: 100%; /* Para garantir que a imagem ocupe toda a largura disponível no contêiner */
    max-width: 1200px; /* Define um limite máximo de largura para a imagem */
    height: auto; /* Mantém a proporção da imagem */
    max-height: 400px; /* Limita a altura máxima da imagem */
    border-bottom-left-radius: 40px; /* Arredonda o canto inferior esquerdo */
    border-bottom-right-radius: 40px; /* Arredonda o canto inferior direito */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona sombra ao redor da imagem */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
    display: block; /* Garante que a imagem se comporte como um bloco */
    object-fit: cover; /* Garante que a imagem seja cortada de forma a cobrir completamente o contêiner */
}



/* Botão */
.custom-btn {
    font-family: 'Museo W01 700', sans-serif;
    background-color: var(--cor-peacoat); /* Laranja escuro */
    color: var(--cor-emerald); /* Texto branco */
    padding: 12px 30px; /* Tamanho do padding */
    border-radius: 50px; /* Bordas arredondadas */
    text-align: center; /* Centralizar o texto */
    font-size: 1.2rem; /* Tamanho da fonte */
    font-weight: bold; /* Peso da fonte */
    text-decoration: none; /* Remove sublinhado do link */
    cursor: pointer; /* Mostra o cursor pointer no hover */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    transition: background-color 0.3s ease; /* Transição suave no hover */
    display: inline-block; /* Permite controlar padding e tamanho corretamente */
    margin-top: 20px; /* Margem superior para separação */
}

.custom-btn:hover {
    background-color: var(--cor-peacoat); /* Laranja mais escuro no hover */
    color: #FFF; /* Mantém o texto branco no hover */
}


/* Ajuste o espaçamento e a largura para dispositivos móveis */
@media (max-width: 768px) {
    .col-md-6 {
        text-align: center;
        margin-bottom: 20px;
    }
}

/* Estilo do footer */
.footer {
    background-color: var(--cor-emerald); /* Cor de fundo */
    color: var(--cor-clara);
    padding: 20px 0;
    font-size: 0.9rem; /* Fonte menor para o footer */
}

.footer-address, .footer-contact, .footer-social {
    text-align: center; /* Centralizar o conteúdo para todos os dispositivos */
    margin-bottom: 40px; /* Espaçamento inferior entre os blocos */
}

.footer-address h5, .footer-contact h5, .footer-social h5 {
    font-weight: bold;
    margin-bottom: 10px; /* Espaçamento inferior entre o título e o conteúdo */
}

.footer p, .footer a {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--cor-clara); /* Mesma cor para os links */
}

.footer a:hover {
    text-decoration: underline;
}

.footer-social a {
    margin: 0 10px; /* Espaçamento horizontal entre os ícones de redes sociais */
}

/* Direitos reservados*/
.footer-bottom {
    font-size: 10px !important;
    color: var(--cor-preta); /* Certifique-se de que a cor também esteja visível */
    text-align: center;
    padding: 10px 0;
}

/* Responsividade */
@media (max-width: 768px) {
    .footer-link, .footer-address, .footer-contact, .footer-social, .footer-section {
        margin-bottom: 15px;
        text-align: center;
    }
    .footer-social {
        margin-top: 20px;
    }
}

/* Estilo para o título principal */
.main-content h1 {
    font-family: 'Museo W01 700', sans-serif;
    font-size: 3rem;
    color: var(--cor-emerald); /* Verde escuro */
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* Estilo para o texto */
  .text-container p {
    font-family: 'Hind Madurai', sans-serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #323130; /* Preto suave */
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto; /* Centraliza o parágrafo e adiciona espaçamento inferior */
  }
  
  
  /* Centralizando o container */
  .text-container {
    max-width: 800px; /* Limita a largura do container para centralizar */
    margin: 0 auto; /* Centraliza o texto horizontalmente */
    padding: 20px; /* Espaçamento interno */
    line-height: 1.6; /* Altura da linha para melhorar a legibilidade */
    font-size: 1.2rem; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
    font-family: 'Hind Madurai', sans-serif; /* Fonte similar à da imagem */
  }
  

  /* Estilo do título e do texto */
.text-container h1 {
    font-family: 'Museo W01 700', sans-serif;
    font-size: 3rem;
    color: var(--cor-tiki-torch); /* Cor para o título */
    text-align: center; /* Centraliza o título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

.text-container p {
    font-family: 'Hind Madurai', sans-serif;
    font-size: 1.25rem; /* Tamanho do texto */
    line-height: 1.8; /* Ajuste o espaçamento entre linhas */
    color: #323130; /* Cor do texto */
    text-align: justify; /* justifica o texto */
    max-width: 1200px; /* Limita a largura máxima do texto */
    margin: 0 auto 30px auto; /* Centraliza o parágrafo */
}

/* Ajuste para o texto da página inicial ocupar toda a largura */
.text-container-home {
    width: 100%; /* O texto agora ocupa toda a largura */
    padding: 20px; /* Adiciona padding para evitar que o texto encoste nas bordas */
    max-width: 1200px; /* Adiciona um limite de largura máxima para uma melhor visualização */
    margin: 0 auto; /* Centraliza o container dentro da página */
    
}

/* Estilo do título específico da página inicial */
.text-container-home h1 {
    font-family: 'Museo W01 700', sans-serif;
    font-size: 3rem;
    color: var(--cor-tiki-torch);
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo do parágrafo específico da página inicial */
.text-container-home p {
    font-family: 'Hind Madurai', sans-serif;
    font-size: 1.25rem;
    line-height: 1.8;
    color: #323130;
    text-align: justify;
    margin-bottom: 40px;
}

.text-container-home li{
    text-align: justify;
}

/* Estilo para o formulário de contato */
.contact-form-container {
    background-color: var(--cor-eucalyptus); /* Laranja */
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 40px;
    
}

.contact-form-container h2 {
    color: var(--cor-glazed-pottery);
    font-family: 'Museo W01 700', sans-serif;
    margin-bottom: 20px;
}

.custom-btn-red {
    background-color: var(--cor-peacoat); /* Vermelho suave */
    color: #FFF;
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}

.custom-btn-red:hover {
    background-color: var(--cor-glazed-pottery);
}

/* Estilo para o formulário de newsletter */
.newsletter-container h3 {
    font-family: 'Museo W01 700', sans-serif;
    color: var(--cor-glazed-pottery); /* Verde escuro */
}

.map-container {
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona sombra ao redor do mapa */
}

/* Estilo para a imagem na seção de contato */

.custom-img-contact {
    width: 80%; /* ajusta a imagem de acordo cim a largura do container */
    max-height: 400px; /* Define um limite máximo para a altura da imagem */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
    margin: 0 auto; /* Centraliza a imagem */
    display: block; /* Garante que a imagem seja tratada como um bloco */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona sombra à imagem */
   
}

.custom-img-histoire {
    width: 80%; /* ajusta a imagem de acordo cim a largura do container */
    max-height: 600px; /* Define um limite máximo para a altura da imagem */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
    margin: 0 auto; /* Centraliza a imagem */
    display: block; /* Garante que a imagem seja tratada como um bloco */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona sombra à imagem */
  
}

/* Espaçamento maior entre as colunas */
.row.g-5 {
    gap: 20px; /* Ajusta o valor do espaçamento conforme necessário */
}

/* Ajuste para dispositivos menores */
@media (max-width: 992px) {
    .contact-form-container, .col-lg-5 {
        margin-bottom: 30px; /* Adiciona mais espaçamento entre os elementos em telas pequenas */
        max-width: 100%; /* Garante que as colunas não fiquem maiores que o necessário */
    }
}

/*informaçoes de horario*/
.container-fluid {
    margin-bottom: 15px; /* Espaçamento entre os blocos */
    font-size: 1rem; /* Tamanho da fonte dos horários */
    color: #323130; /* Cor do texto */
}

h3 {
    margin-bottom: 20px; /* Espaço abaixo do título */
    color: #5E7961;
    font-family: 'Museo W01 700', sans-serif;
    
}

.container-fluid strong {
    font-size: 1.2rem; /* Tamanho da fonte dos títulos dos blocos */
    color: var(--cor-tiki-torch); /* Cor para destacar os títulos dos blocos */
}

.horaires-container {
    align-items:stretch; /* Faz com que todos os blocos tenham a mesma altura */
    
}

.horaires-block {
    flex: 1;
    min-width: 150px; /* Define uma largura mínima para os blocos */
    text-align: center;
    padding: 10px;
}

.horaires-block p {
    margin: 0;
}

/*sessao da Cucina*/
.text-container-cucina{
    max-width: 800px; /* Limita a largura do container para centralizar */
  margin: 0 auto; /* Centraliza o texto horizontalmente */
  padding: 20px; /* Espaçamento interno */
  line-height: 1.6; /* Altura da linha para melhorar a legibilidade */
  font-size: 1.2rem; /* Tamanho da fonte */
  color: #333; /* Cor do texto */
  font-family: 'Hind Madurai', sans-serif; /* Fonte similar à da imagem */
}

.text-container-cucina h1 {
    font-family: 'Museo W01 700', sans-serif; /* Fonte para o título */
    font-size: 2.5rem; /* Tamanho do título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
    color: var(--cor-tiki-torch); /* Cor do título */
  }
  
  .text-container-cucina p {
    margin-bottom: 20px; /* Espaçamento entre os parágrafos */
    text-align: justify; /* Justifica o texto para um alinhamento limpo */
  }

  .text-container {
    max-width: 800px; /* Limita a largura do container para centralizar */
    margin: 0 auto; /* Centraliza o texto horizontalmente */
    padding: 20px; /* Espaçamento interno */
    text-align: center; /* Centraliza todo o conteúdo do texto dentro do container */
  }
  
  .custom-btn-table {
    display:inline-block;
    padding: 15px 30px; /* Ajusta o espaçamento interno do botão */
    background-color: var(--cor-peacoat); /* Cor do botão */
    color: white; /* Cor do texto do botão */
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 25px; /* Bordas arredondadas */
    font-weight: bold;
    margin-top: 20px; /* Espaçamento superior para separar o botão do texto */
  }
  
  .custom-btn-table:hover {
    background-color: var(--cor-glazed-pottery); /* Efeito hover no botão */
  }
  
  
.text-container-formulaire{
    width: 100%; /* O texto agora ocupa toda a largura */
    padding: 20px; /* Adiciona padding para evitar que o texto encoste nas bordas */
    max-width: 1200px; /* Adiciona um limite de largura máxima para uma melhor visualização */
    margin: 0 auto; /* Centraliza o container dentro da página */
    background-color: var(--cor-eucalyptus);
    margin-bottom: 50px;
}

.text-container-formulaire h3 {
    color: var(--cor-clara);
    text-align: center;
   padding-top: 30px;
   padding-bottom: 30px;
}


.famiglia-section {
    background-color: var(--cor-eucalyptus); /* Cor de fundo laranja */
    padding: 50px 0;
    text-align: center;
    margin-bottom: 50px;
}

.famiglia-section h2 {
    font-family: 'Museo W01 700', sans-serif;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 50px;
}

.team-member {
    background-color: #fff;
    border-radius: 30px; /* Bordas mais arredondadas nos cartões */
    padding: 30px 20px;
    margin-bottom: 30px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s ease;
    text-align: center;
    width: 100%; /* Garante que os cartões ocupem a largura total */
    max-width: 300px; /* Limita a largura máxima dos cartões */
    margin-left: auto;
    margin-right: auto;
}

.team-member:hover {
    transform: translateY(-10px); /* Efeito de elevação ao passar o mouse */
}

.image-container {
    width: 100%;
    max-width: 250px; /* Limita a largura da imagem */
    height: 350px; /* Define a altura da imagem */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border-top-left-radius: 150px; /* Faz a parte superior ser arredondada */
    border-top-right-radius: 150px;
    border-bottom-left-radius: 0; /* Deixa a parte inferior reta */
    border-bottom-right-radius: 0;
    background-color: #fff; /* Cor de fundo para visualizar o formato */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o contêiner corretamente */
}

.team-member h3 {
    font-family: 'Museo W01 700', sans-serif;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
}

.team-member .role {
    font-family: 'Hind Madurai', sans-serif;
    font-size: 1.2rem;
    color: var(--cor-tiki-torch); /* Cor laranja para a função */
    margin-bottom: 10px;
}

.team-member .description {
    font-family: 'Hind Madurai', sans-serif;
    font-size: 1rem;
    color: #666;
    margin-bottom: 20px;
}

/* Responsividade */
@media (max-width: 768px) {
    .team-member {
        margin-bottom: 20px;
    }

    .famiglia-section h2 {
        font-size: 2.5rem;
    }

    .image-container {
        width: 200px;
        height: 280px; /* Ajusta a proporção para telas menores */
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    }
    
  
}

/* Define uma proporção de 16:9 para o carrossel */
.carousel {
    position: relative;
    width: 90%; /* Ajuste a largura como desejar, por exemplo, 80% da página */
   
    margin: 0 auto; /* Centraliza o carrossel na página */
  

    overflow: hidden;
    border-radius: 20px; /* Adiciona bordas arredondadas, opcional */
    
}


/* Ajuste para manter a proporção 16:9 no carrossel principal */
#carouselExampleSlidesOnly {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

#carouselExampleSlidesOnly .carousel-inner img {
    width: 100%;
    height: auto;
    object-fit: contain !important ;
    border-radius: 10px; 
}


.green-section {
    background-color: var(--cor-emerald); /* Ou use #173426, caso prefira */
    padding: 80px 0; /* Adiciona padding ao redor do conteúdo */
}

.green-section h1 {
    color: var(--cor-tiki-torch); /* Para garantir que o texto fique legível no fundo verde */
}

.green-section h3{
    color: var(--cor-clara);
    padding-bottom: 30px;
}

.green-section .carousel-inner img {
    border-radius: 10px; /* Para ajustar bordas arredondadas nas imagens, opcional */
}

/* Corrigir imagens cortadas no carrossel */
#carouselExampleSlidesOnly .carousel-inner img {
    display: block; /* Evita gaps embaixo da imagem */
    width: auto !important; /* Remove o !important do .w-100 */
    max-width: 100%; /* Garante que a imagem não ultrapasse os limites do contêiner */
    height: auto; /* Ajusta automaticamente a altura */
    max-height: 500px; /* Ajuste conforme necessário */
    object-fit: contain !important; /* Mostra a imagem inteira */
    margin: 0 auto; /* Centraliza a imagem */
}

/* Ajuste para o contêiner do carrossel */
#carouselExampleSlidesOnly .carousel {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Mantém uma proporção 16:9 */
    overflow: hidden;
    border-radius: 10px; /* Mantém as bordas arredondadas */
    background-color: #ffffff; /* Fundo branco para evitar espaços escuros */
}

/* Ajustes específicos para telas menores */
@media (max-width: 768px) {
    #carouselExampleSlidesOnly .carousel-inner img {
        max-height: 300px; /* Reduz a altura para tablets */
    }
}

@media (max-width: 480px) {
    #carouselExampleSlidesOnly .carousel-inner img {
        max-height: 200px; /* Reduz a altura para celulares */
    }
}