/* Resetando margens e padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

/* Fonte e corpo */
body {
    line-height: 1.0;
    background-color: #CCCEB6;
    color: #ffffff;
    font-size: 18px;
}

html {
    scroll-behavior: smooth; 
} 

.logo img {
    width: 190px;  /* Defina o tamanho da logo conforme necessário */
    height: auto;  /* Mantém a proporção da imagem */
}

/* Estilo da barra de navegação */
header {
    background-color:#AAAB86; 
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;  /* Garante que o cabeçalho fique acima do restante do conteúdo */
    padding: 0px 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /*aqui ajusta a altura dos botões*/
    padding: 3px 0px;
    z-index: 1001;  /* Garante que a navegação fique acima do cabeçalho */
}

.nav-list {
    display: flex;
    list-style-type: none;
    justify-content: end;
    white-space: nowrap;
    flex-grow: 1;
    z-index: 1002;
}

.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    text-decoration: none;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1.2), -1px -1px 2px rgba(0, 0, 0, 0.2);
}



/* Menu Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 50px;
    height: 30px;
    /* background: transparent; */
    border: none;
    cursor: pointer;
    margin-bottom: 1em;
    z-index: 1003;  /* Garante que o menu hamburguer fique acima de tudo */
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 5px;
}

.nav-list {
    display: flex;
    list-style-type: none;
}

.nav-list li {
    margin: 0px 5px;
    padding: 4px;
}

.nav-list a { /* ajustes do menu */
    text-decoration: none;
    color: white;
    font-size: 16px;
    padding: 0;
    transition: transform 400ms ease-out;
    white-space: nowrap; /* Impede quebras de linha dentro dos links */
}

/* Exibição do menu no mobile */
@media (max-width: 830px) {
    .hamburger {
        display: flex; /* Mostrar o Hamburger no mobile */
    }

    .nav-list {
        position: absolute;
        top: 69px;
        right: 0px;
        background-color: rgba(170, 171, 134, 0.2); /* Com 50% de transparência */
        width: 100%;
        height: 0;
        flex-direction: column;
        overflow: hidden;
        transition: height 0.3s ease-in-out;
        z-index: 1004;
    }

    .nav-list.active {
        height: 225px; /* Altura do menu quando ativado */
    }

    .nav-list li {
        text-align: center;
        padding: 5px;
        margin-bottom: 5px;
    }

    .nav-list a {
        word-wrap: break-word; /* Permite quebras de linha dentro dos links */
        white-space: normal; /* Permite quebra de linha quando necessário */
        display: block; /* Faz com que os links se comportem como blocos */
        text-align: center; /* Centraliza o texto */
    }
}

/* Forçar quebras de linha apenas quando necessário */
@media (max-width: 1087px) {
    .nav-list a {
        text-align: center;
        word-wrap: break-word; /* Força quebra de palavras longas */
        white-space: normal; /* Permite o texto quebrar em múltiplas linhas */
    }
}

.home h1 {
    font-size: 27px; /*frase em cima do slide*/
    margin-top: 0px;
}

.home p {
    font-size: 18px; /*frase em baixo do slide*/
}

nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: 2px;
    margin-bottom: 0rem;
}

nav ul li {
    margin: 0 15px;
}

/* Estilo dos itens do menu */
nav ul li a {
    color: #fff;
    text-decoration: none;
    display: inline-block; /* Faz o link se comportar como um bloco para permitir a transição de tamanho */
    padding: 0rem 0rem; /* Ajuste o padding para garantir o tamanho adequado dos botões */
    transition: transform 400ms ease-out; /* Adiciona uma transição suave para o efeito */
    /* padding-left: 0em; */
}

/* Efeito de crescimento no hover */
nav ul li a:hover {
    color: #01200d; /*cor da letra ao passar o mouse*/
    transform: scale(1.1); /* Aumenta o tamanho do botão sem alterar o layout de largura e altura */
}

/* Ajuste no efeito de clique */
nav ul li a:active {
    transform: scale(1.1); /* Ajuste o efeito de clique para algo mais suave */
}


/* Estilo do Carrossel */

/* Estilos para o vídeo de fundo */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Coloca o vídeo atrás do conteúdo */
    overflow: hidden;
}

#bg-video {
    object-fit: cover; /* Faz o vídeo cobrir a área do carrossel sem distorcer */
    width: 100%;
    height: 100%;
    filter: blur(2.5px); /* Aplica o efeito de desfoque no vídeo */
}
.carousel-inner {
    /* background-image: url('/img/xadrez.JPG'); */
    /* background-image: contain; */
    background-size: cover;
    background-color: #AAAB86;
    display: flex;
    overflow: hidden; /* Garante que as imagens não ultrapassem a área do carrossel */
    border-radius: 1%;
    z-index: 6; /* Coloca o vídeo atrás do conteúdo */
}

.carousel-item {
    flex: 0 0 100%;
    transition: transform 0.5s ease-in-out; /* Animação suave ao transitar entre os itens */
}

.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* background-color: #04041a; */
    /* border-radius: 10%; */
    padding: 1em;
    z-index: 15;
}

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

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

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-color: #ffffff00;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: block;
}

.image1, .image2, .image3, .image4 {
    height: 80vh;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 50.5); /* Cria um desfoque nas bordas */
}

/* As imagens dos slides */
.image1 {
    background-image: url('video/logo.png');
}

.image2 {
    background-image: url('video/memorias1.png');
}

.image3 {
    background-image: url('/img/imagem1.jpg');
}

.image4 {
    background-image: url('/img/imagem4.jpg');
}

.home p {
    font-size: 20px;
    color: #FFF;
}

p {
    margin-top: 18px;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), -1px -1px 2px rgba(0, 0, 0, 0.2);
}

/* Media Queries para ajustes em telas menores */
@media (max-width: 768px) {
    .instagram-embed iframe {
        max-width: 100%;
        height: 250px;
    }
}

/* Seção Home */
.home {
    margin-top: 0px;
    background-color: rgba(170, 171, 134, 0.5); /* Com 50% de transparência */
    padding: 80px 20px 20px 20px;  /* Ajusta o padding para dar mais espaço na parte superior */
    text-align: center;
    padding-top: 150px; /* Adiciona o espaço necessário para não cobrir o conteúdo com o cabeçalho */
}

/* Estilos das seções */
.section {
    padding: 5px 0px;
    text-align: center;
}


.home {
    background-color: rgba(170, 171, 134, 0.5); /* Com 50% de transparência */
}

.quem-somos {
    background-color: #AAAB86;
}

/* Estilos gerais para a seção */
.nossa-historia {
    padding: 10px 20px;
    background-color: #7b7c649f; /* Cor de fundo da seção */
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    color: #FFF;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(0, 0, 0, 0.3); /* Efeito de alto relevo */
    margin-bottom: 0px;
}

.historia-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* gap: 20px; */
    margin-top: 10px;

}

.historia-texto {
    flex: auto;
    max-width: 60%; /* Limita a largura do texto */
    text-align: left;
    font-size: 18px;
    color: #FFF;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), -1px -1px 2px rgba(0, 0, 0, 0.2); /* Efeito de alto relevo suave */
    margin: 10px 30px 20px 30px;
}

.historia-imagem {
    flex: 1;
    max-width: 35%; /* Limita a largura da imagem */
    padding-right: 20px;
    padding-left: 20px;
}

.historia-img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Adiciona borda arredondada à imagem */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adiciona sombra suave */
}

/* Responsividade */
@media (max-width: 768px) {
    .historia-content {
        flex-direction: column; /* Empilha a imagem e o texto em telas pequenas */
        text-align: justify; /* Centraliza o texto */
    }

    .historia-texto {
        max-width: 100%; /* Ocupa toda a largura no mobile */
    }

    .historia-imagem {
        max-width: 100%; /* Ocupa toda a largura no mobile */
        margin-top: 0px; /* Adiciona espaço entre o texto e a imagem */
        margin-bottom: 20px;
    }
}


.container-instagram {
    /* justify-content:center; */
    align-items: center;
    background-color: #606D5B;
    color: #fff;
}

.titulo-instagram{
    padding: 20px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), -1px -1px 2px rgba(0, 0, 0, 0.2);
}

.localizacao {
    background-color: #606D5B;
    color: #fff;
}

.contato {
    background-color: #e2cba7;
}

h1, h2 {
    font-family: 'Verdana', serif;
}

h2 {
    padding-top: 20px;
    margin: 0px 50px 20px 61px;
    font-size: 27px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), -1px -1px 2px rgba(0, 0, 0, 0.2);
}

/* Estilo do rodapé */
footer {
    background-color: #333;
    color: #fff;
    /* padding: 2px; */
    /* padding-top: 1em; */
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
    z-index: 1001;
}

/* Container para os ícones e o texto */
.footer-content {
    display: flex;
    align-items: center; /* Alinha os itens no centro verticalmente */
    justify-content: center; /* Centraliza os itens horizontalmente */
    flex-wrap: wrap; /* Garante que eles se ajustem em telas pequenas */
    line-height: normal;
    }


  /* Contêiner dos vídeos do Instagram */
  .instagram-embed-container {
    position: relative;
    display: flex;              /* Usando Flexbox */
    justify-content: center;    /* Alinha os vídeos no centro horizontalmente */
    /* align-items: center;        Alinha os vídeos no centro verticalmente (caso necessário) */
    gap: 100px;                  /* Espaçamento entre os vídeos */
    flex-wrap: wrap;            /* Permite que os vídeos quebrem linha em telas menores */
}


/* Estilo da área de redes sociais */
.social-media {
    display: flex; /* Usando flexbox para os ícones ficarem lado a lado */
    margin-right: 15px; /* Espaço entre os ícones e o texto */
}

/* Estilo dos ícones */
.social-icon {
    color: #fff; /* Cor do ícone */
    font-size: 20px; /* Tamanho do ícone */
    margin: 0 10px; /* Espaçamento entre os ícones */
    text-decoration: none; /* Remove o sublinhado */
    transition: transform 0.3s ease, color 0.3s ease; /* Transição suave */
    align-items: center;
    margin-bottom: 0.7em;
}

/* Efeito de hover nos ícones */
.social-icon:hover {
    color: #ffd700; /* Cor dourada no hover */
    transform: scale(1.1); /* Aumenta o tamanho do ícone */
}

/* Estilo da frase no rodapé \Footer*/
footer p {
    font-size: 12px; /* Tamanho da fonte */
    margin: 1em;
}

/* produtos e lojas no index*/

/* Container geral */
.item-container {
    position: relative;
    display: flex;
    justify-content: center;  /* Centraliza os itens */
    flex-direction: column;
    width: 100%;
    margin-top: 0px;
    flex-wrap: wrap;
    background-color:  #AAAB86;
    color: #fff;
    padding: 0;
    box-sizing: border-box;
}

/* Container dos itens dentro do .item-container */
.childs-container {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-bottom: 1em;
    /* flex-wrap: wrap;  */
}

/* Estilo de cada item */
.item {
    position: relative;
    width: 30%;  /* Definido 30% para 3 colunas em telas grandes */
    max-width: 350px;
    height: 250px;
    overflow: hidden;
    transition: transform 0.3s;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px;
}

/* Imagem do item */
.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Efeito de hover nos itens */
.item:hover {
    transform: scale(1.1);
}

/* Link dentro de cada item */
.item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Título do item */
.item-title {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 0;
    font-size: 18px;
}

/* Legenda do item */
.item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 0;
    font-size: 14px;
}

/* Media query para telas menores */
@media (max-width: 1000px) {
    .item {
        width: 45%; /* Dois itens por linha em telas médias */
    }
}

@media (max-width: 600px) {
    .item {
        width: 100%; /* Itens em tela cheia em dispositivos muito pequenos */
    }
    .childs-container {
        flex-direction: column;  /* Empilha os itens verticalmente */
        align-items: center;  /* Centraliza os itens na tela */
    }
}


/*____________________________*/

.instagram-media {
    background-color: white;
    border-radius: 3px;
    border: 1px solid rgb(219, 219, 219);
    box-shadow: none;
    display: block;
    margin: 0px 0px 12px;
    min-width: 326px;
    padding: 0px;
    max-height: 860px;
}

.instagram-embed iframe {
    background-color: white;
    border-radius: 3px;
    border: 1px solid rgb(219, 219, 219);
    box-shadow: none;
    display: block;
    margin: 0px 0px 12px;
    min-width: 326px;
    padding: 0px;
    height: auto;
    align-items: stretch;
}

iframe {
    width: 500px;
    height: 980px;
    max-height: 980px;
}


/* ________LOjas________ */


/* .menu-item {
    text-align: center;
    margin: 20px;
    flex: 1 1 calc(33.333% - 40px); 
}

.menu-item img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    padding: 3px 0px;
    z-index: 1001; 
} */

h2 {
    font-family: Verdana, sans-serif;
    font-size: 27px;
    /* margin-top: 0em; */
}

.menu-item h3 {
    font-size: 1px;
    margin-top: 10px;
}

.menu-item p {
    font-size: 14px;
    margin: 5px 0;
}

.section {
    padding: 0px 0px;
    text-align: center;
    background-color: #606D5B;
};


.map-container {
    padding: 12px;
    height: 200px;
}
.map-container iframe {
    align-items: center;
    width: auto;
    min-width: 350px;
    height: 280px;
    max-height: 980px;
}

.loja h3{
    font-size: 18px;
}

.loja p{
    font-size: 14px;
    padding: 4px;
}

.lojas-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #606D5B;
    margin-bottom: 0px;
    padding-bottom: 10px;
}

.loja {
    flex: 1 1 calc(33.333% - 20px);
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.loja img {
    width: 100%;
    height: auto;
    max-height: 250px;
    max-width: 450px;
    border: 1px solid #ccc;
    margin-top: 20px;
}
.loja-info {
    padding: 10px;
}

@media (max-width: 1000px) {
    .loja {
        flex: 1 1 calc(50% - 20px);
    }
}


@media (max-width: 768px) {
    .loja {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .loja {
        flex: 1 1 100%;
    }
}

/* botão top */
#topBtn {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 30px;
    z-index: 100;
    font-size: 16px;
    background-color: #33333396;
    color: rgb(255, 255, 255);
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
  }
  
  #topBtn:hover {
    background-color: #555555;
  } */
  #topBtn svg {
    vertical-align: middle;
  }

  /* Botão nossa Historia */
  .btn-historia {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #435F5B;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .btn-historia:hover {
    background-color: #AAAB86;
  }
  
  /* Modal Historia */
  .modalHistoria {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 60px;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
  }
  
  .modalHistoria-content {
    background-color: #CCCEB6;
    margin: auto;
    padding: 20px;
    max-width: 700px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .modalHistoria-texto {
    font-size: 16px;
    color: #333;
    text-align: center;
  }
  
  .modalHistoria-img img {
    width: 100%;
    border-radius: 8px;
  }
  
  .fechar {
    color: #aaa;
    float: right;
    font-size: 28px;
    cursor: pointer;
  }
  
  .fechar:hover {
    color: #333;
  }
  
 
  /* rolagem dos botões */
  .scroll-fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* loading spinner */
  #loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #CCCEB6;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #c83b3b;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: girar 1s linear infinite;
  }
  
  @keyframes girar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  body.loading {
    overflow: hidden;
  }