/*Variáveis em CSS com cores, fontes/famílias tipográficas e tamanhos de letra*/
:root{
    --main-color:rgba(251, 255, 0, 0.304);
    --secondary-color: #6D5411;
    --font-family: Verdana, sans-serif;
    --font-size: 30px;
}

/*Por defeito- o Desktop terá a cor branca e a família tipográfica será uma das variáveis que defini em cima*/
body { 
    font-family: var(--font-family);
    background-color: white;
}

body h1 {
    color: var(--secondary-color); 
    font-size: var(--font-size);
    animation: fadeIn  4s ease-in-out;
}
/* Animação Fade-In - nos textos com a tag h1*/
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 10;
    }
}
.fade-in {
    animation: fadeIn 4s ease-in-out;
}


body h2 { 
    font-size: 18px; 
    color:var(--secondary-color); 
}
body p {
    line-height: 1.5;
    font-size:16px;
}


/* nav, navegação ou navbar*/
/* na nav apliquei uma sombra suave - para melhorar a separação visual entre a navegação e o restante do conteúdo - como se eleva-se a navbar visualmente. */
.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dropdown-menu{background-color:  #bfa868; color: white;
}  

.nav-link:active {
    background-color: wheat;
    color: white;
}
.nav-link{
    color:var(--secondary-color);
}

/* Items na Dropdown que está na nav*/
.dropdown-item:hover {
    background-color:  #E6D50E;
}
.dropdown-item:active {
    background-color: wheat;
}
/* Aplica bordas arredondadas no primeiro item */
.dropdown-menu > li:first-child > a.dropdown-item {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
/* Aplica bordas arredondadas APENAS no último item */
.dropdown-menu > li:last-child > a.dropdown-item {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
/* O 3 elementos seguintes ajudaram a fazer ajustes visuais no menu suspenso (dropdown) */
.dropdown-menu {
    min-width: auto; /* Ajusta a largura ao conteúdo */
    padding: 0; /* Remove espaçamentos extras */
}
.dropdown-item {
    padding: 10px 33px; /* Ajuste para reduzir espaço extra */
}
.dropdown-divider {
    margin: 0px 0; /* Reduz o espaço acima e abaixo do hr */
}




/* Página principal*/
/* Vídeo */
.video-wrapper {
    overflow: hidden; /* Garante que o vídeo não ultrapasse os limites */
    position: relative;
    height: 578px; 
    }
  
    /* Ajuste do vídeo */
    .video-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Corta o vídeo para manter o tamanho */
    }
  
    /* O conteúdo agora está acima do vídeo, mas sem bloquear os controles */
    .content-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Está acima do vídeo */
    pointer-events: none; /* Isso garante que os cliques passem pelo conteúdo */
    background: rgba(0, 0, 0, 0.308); /* Altere o valor de 0.5 para mais claro ou mais escuro */
}


/* Nos 3 págrafos - textos que estão ao lado das imagens. As imagens têm transições flip-left, flip-right */
.sub_title {
    color: var(--secondary-color);
    font-size: 18px;
    width: 100%; 
    height: 100%;
}
/* Transições de flip-right e flip-left nas imagens */
.flip-left, .flip-right, .flip-left1 { 
    opacity: 0; /* Inicialmente as imagens não tem ocupacidade */
    transform: perspective(1000px) rotateY(90deg);
    transition: opacity 3s ease-in-out, transform 3s ease-in-out; /* Animação lenta */
}
/* A primeira imagem (flip-left) */
.flip-left {
    transition-delay: 0s; /* Começa imediatamente */
}
.flip-left.visible {
    opacity: 1; /* Esta imagem já tem ocupacidade - pode ser vista*/
    transform: perspective(1000px) rotateY(0deg); /* Efeito de rotação para a posição normal */
}
/* A segunda imagem (flip-right) */
.flip-right {
    transition-delay: 3s; /* Começa 3 segundos após a primeira */
}
.flip-right.visible {
    opacity: 1; /* Esta imagem já tem ocupacidade - pode ser vista*/
    transform: perspective(1000px) rotateY(0deg); /* Efeito de rotação para a posição normal */
}
/* A terceira imagem (flip-left) */
.flip-left1 {
    transition-delay: 3s; /* Começa 3 segundos após a segunda */
}
.flip-left1.visible {
    opacity: 1; /* Esta imagem já tem ocupacidade - pode ser vista*/
    transform: perspective(1000px) rotateY(0deg); /* Efeito de rotação para a posição normal */
}

/* Equipa - feita com cards */
.equipa{
    background-color: #E2E2E2; 
}
/* No título da Equipa uma animação de rotação, ou seja, uma palavra será alterada pela seguinte, posteriormente também apliquei esta animação na página sobre*/
.rotating {
    display: inline-block;
    height: 1em; /* Define a altura para garantir que as palavras se alinhem corretamente */
}
.rotating span {
    position: absolute; /* Posiciona as palavras uma sobre a outra */
    opacity: 0;
    animation: rotateWords 7s infinite; /* Duração e loop infinito */
}
.rotating span:nth-child(1) {
    animation-delay: 0s; /* a primeira palavra começa imediatamente */
}
.rotating span:nth-child(2) {
    animation-delay: 2s; /* Tempo de atraso entre a primeira e a segunda palavra */
}
.rotating span:nth-child(3) {
    animation-delay: 4s; /* Tempo de atraso entre a segunda e a terceira palavra */
}
@keyframes rotateWords {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(0);
    }
    40% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 0;
        transform: translateY(50px);
    }
}

/* Tamanho das cards (com os elementos da equipa)*/  
.equipa-1{
   width: 18rem;
}
/* Efeitos de Hover Criativos com animações- nas Cards dos elementos da equipa. Nestas animações ao fazer hover faz com que as cards elevam-se com sombra (box-shadow)*/
.equipa-1:hover{
    animation: brilho 2s ease-in-out infinite, 
    pulsar 5s ease-in-out ;
}
@keyframes brilho{
    0%, 100%
    {
        box-shadow: 0 0 20px #E6D50E;
    }
    50%
    {
        box-shadow: 0 0 20px orange;
    }
}
@keyframes pulsar{
    0%
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
}

/* Aumenta o tamanho dos ícones nas páginas do website */
.custom-icon-size {
    font-size: 20px;
}  

/* Fundo do formulário e botão que muda de cor (no hover e no active). Este formulário está presente na página de contactos e home*/
.formulario_00{
    background-color: #E2E2E2;
}
/* Todos os Botões do website têm hover e active. A cor dos botões será diferente ao dos links (no hover e no active)*/
.btn-dark {
    background-color:#E6D50E !important;
    border: 1px solid black !important;
    border-radius: 4px !important;
}
.btn-dark:hover
{
    background-color:  var(--secondary-color) !important; 
    border: 1px solid black !important;
    border-radius: 4px !important;
}
.btn-dark:active
{
    background-color:wheat !important; 
    border: 1px solid black !important;
    border-radius: 4px !important;
}
/* Ainda no formulário - Para o botão LIMPAR coloquei outra cor, que ajuda a distinguir visualmente do botão SUBMETER*/
.btn-dark1 {
    background-color:#bfa868 !important;
    border: 1px solid black !important;
    border-radius: 4px !important;
    color: white !important;
}
.btn-dark1:hover
{
    background-color: var(--secondary-color) !important; 
    border: 1px solid black !important;
    border-radius: 4px !important;
}
.btn-dark1:active
{
    background-color:wheat !important; 
    border: 1px solid black !important;
    border-radius: 4px !important;
}




/* Página sobre */
/* Carousel - O objetivo era afastar as setas do conteúdo - fazendo com que elas não fiquem umas sobre as outras nos diferentes tamanhos de ecrã*/
.carousel-control-prev, .carousel-control-next {
    z-index: 15; /* Mantém as setas acima do conteúdo */
    padding: 0 15px; /* Adicionar espaçamento lateral */
    width: 10%; /* Ajustar a largura das setas */
}

/* Nas Imagens */
/* Tem efeitos de Hover Criativos- com imagens que escurecem com um hover e por cima a sobreposição de texto */
.img-hover-container {
    position: relative;
    display: inline-block;
}
.img-hover-container .img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Isso faz a imagem preencher o contêiner sem distorcer */
    transition: opacity 0.3s ease;
}
.img-hover-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.img-hover-container:hover .overlay {
    opacity: 1;
}
.img-hover-container .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.img-hover-container:hover .text {
    opacity: 2;
}


/* Lista - com textos das materias primas temos*/
.title_list{
    color: var(--secondary-color);
}
.list{
    font-size: 18px; 
    line-height: 1.5;
}

/* Fundo da tabela. Esta tabela tem o percuso/história da marca com datas */
.table_percurso{
    background-color: #E2E2E2; 
}





/* Página dos contactos*/
/*mapa*/
iframe {border: 1px solid black;} 


/*link com hover e active no formulário fictício*/
.link_0{ color: var(--secondary-color);}
.link_0:hover{ color: #E6D50E;}
.link_0:active{ color: orange;}

/*link com hover e active no texto LIGUE-NOS*/
.link_ligue-nos{color:black;}
.link_ligue-nos:hover{ color: #E6D50E;}
.link_ligue-nos:active{ color: orange;}
/* o texto/link em cima, que no ficheiro html esta localizado dentro de uma tag de h2, tem a Animação Bounce aplicado na class do ficheiro html*/
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px);
    }
    60% {
      transform: translateY(-10px);
    }
}
.bounce {
    animation: bounce 4s linear infinite ;
}


/*texto sublinhado com hover e active na tag details*/
.details_text:hover {color:  #E6D50E;}
.details_text:active {color:orange;}
/* o texto sublinhado em cima com a tag details e o aúdio (no ficheiro html), têm a Animação Slide-In - que faz com que os elementos venham da direita*/
@keyframes slideIn {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
.slide-in {
    animation: slideIn 11s ease-out;
}



/* Botão com um link interno que direciona para o início da página. Este botão tem transição e hover, que muda a cor do botão (está neste documento css em - btn-dark:hover) e aumenta o tamanho do botão (a baixo em - botao-fixo:hover). Para além disso, está em todas as páginas de html um script, que faz com que o botão fique visivel após fazer scroll.*/
.botao-fixo {
    width: 140px; height: 40px;
    transition: width 2s, height 4s;
    position: fixed;
    bottom: 150px; /* Distância da parte inferior da página */
    right: 40px;  /* Distância da parte direita da página */
    z-index: 9999; /* Para garantir que fique acima de outros elementos */
    
}
.botao-fixo:hover { 
    width: 170px; 
    height: 60px;
}



/* Rodapé*/
footer { 
    position: static;
    div.mycontainer {width:100%; overflow:auto;}
    div.mycontainer div {width:33%;float:left;}  
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);  /* Sombra suave na parte superior para diferenciar da cor dos elementos que estão em cima (nas páginas dentro da tag de conteudo principal - section) */
} 
footer  a { color: var(--secondary-color);}
footer  a:hover{ color:#E6D50E;}
footer  a:active{ color:orange;}
footer  a:visited{ color:brown;}


/* Nas duas Media Queries seguintes optei por alterar a cor do fundo das páginas (em html), cada cor tem alguma opacidade/transparencia, para a cor não ser tão forte (beneficiando a legibilidade dos textos/links). Também para a versão de tablet usei para posicionar melhor as setas do banner inicial da página sobre. Posteriormente usei para adaptar o tamanho do vídeo da página inicial, para fazer com que ficasse semelhante ao das outras páginas (pelo menos nas medidas de 800px e 480px.*/

/* Media Querie_Em Ecrãs Tablet - que têm 800px ou menos. Para além disso tentei que nesta */
@media screen and (max-width:800px) { 
    body{
        background-color: rgba(249, 242, 177, 0.836);

        .carousel-control-prev {
            left: -1%; /* Afasta a seta da esquerda do carousel na página sobre */  
        }
        .carousel-control-next {
            right: -1%; /* Afasta a seta da direita do carousel na página sobre */
        }
        .video-wrapper {
            height: 283px; /* Altura ainda menor*/
        }
    }
}

/* Media Querie_ Em ecrãs Mobile - que têm 480px, apliquei uma variável de cor*/
@media screen and (max-width:480px) { 
    body{
        background-color: var(--main-color);
        .video-wrapper {
            height: 171px; /* Altura ainda menor */
        }
        .video_title_p{padding-left: 16px;}
    }
}