@import url(../Style/transition.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    cursor: none;
}



::-webkit-scrollbar {
    background-color: transparent;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #669bbc;
    border-radius: 100px;
    
}

/*Primeira Seção*/

body {
    background-color: #060916;
    margin: 0;
    padding: 20px;
    font-family: 'Inter', sans-serif;
    color: white;
    overflow-x: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    /* Adicione outros estilos necessários */
}

/* Primeira Seção */
.first-section {
    width: 100%;
    height: 100vh;
    padding-top: 60px; /* Ajuste este valor para a altura do seu header */
    margin-bottom: 300px;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 300px;
}


.text-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.text-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Espaço entre a seta e o texto */
}

.arrow-image {
    width: 100px; /* Ajuste conforme necessário */
    height: auto;
    margin-top: 5px; /* Alinha a seta com o topo do texto */
}

.text-block {
    flex: 1;
}

h2 {
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 900; /* Inter Black */
    font-size: 60px;
    margin-top: 0;
    margin-bottom: 10px; /* Espaço entre o título e o parágrafo */
    line-height: 1.2; /* Ajuste conforme necessário para melhor espaçamento */
    overflow: hidden;
    
}

h2 span {
    animation: revelar  1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
    display: block;
}

@keyframes revelar {
  0% {
    transform: translate(0,100%);
  }
  100% {
    transform: translate(0,0);
  }
};

.text-block p {
    margin-right: 100px; /* Remove margens padrão do parágrafo */
    font-size: 14px;
}

.content-image1 {
    width: 480px;
    height: 540px;
    object-fit: cover;
    border-radius: 25px;
    position: relative;
    top: -25%;
    filter:contrast(1.1);
    overflow: hidden;
}


.content-image2 {
    width: 780px;
    height: 450px;
    object-fit: cover;
    border-radius: 25px;
    position: relative;
    top: -5%;
    right: 100px;
    overflow: hidden;
}

/* Adicione este código ao final do seu arquivo CSS existente */

@media (max-width: 768px) {
    .first-section {
        height: auto; /* Permite que a altura se ajuste ao conteúdo */
        min-height: 100vh; /* Mantém a sensação de tela cheia se o conteúdo for pouco */
        padding-top: 80px; /* Pequeno ajuste se o header mudar de tamanho */
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 150px; /* Reduz a margem inferior */
    }

    .content-grid {
        grid-template-columns: 1fr; /* Muda para uma única coluna */
        grid-template-rows: auto auto auto auto; /* Ajusta as linhas para o conteúdo */
        gap: 20px; /* Adiciona um espaço entre os itens do grid empilhados */
    }

    .grid-item {
        padding-bottom: 0; /* Remove o padding inferior excessivo */
        /* Se o item vazio não fizer sentido em uma coluna, podemos escondê-lo: */
        /* &.empty { display: none; } */
        /* Ou ajustar a ordem se necessário com grid-row */
    }

    .grid-item.empty {
        display: none; /* Oculta o item vazio para economizar espaço */
    }

    .text-content {
        /* O alinhamento já deve funcionar bem, mas pode ser ajustado se necessário */
        /* Por exemplo, centralizar o texto:
        align-items: center;
        justify-content: center;
        text-align: center; */
    }

    .text-wrapper {
        flex-direction: column; /* Empilha a seta e o bloco de texto */
        align-items: center; /* Centraliza a seta e o texto */
        gap: 15px;
        width: 100%; /* Ocupa a largura disponível */
    }

    .arrow-image {
        width: 60px; /* Reduz o tamanho da seta */
        margin-top: 0;
        /* Adicione transform rotate se quiser que a seta aponte para o texto abaixo */
        /* transform: rotate(90deg); */
    }

    h2 {
        font-size: 40px; /* Reduz o tamanho do título */
        text-align: center; /* Centraliza o título */
    }

    .text-block p {
        margin-right: 0; /* Remove a margem direita */
        font-size: 14px; /* Pode manter ou ajustar se necessário */
        text-align: center; /* Centraliza o parágrafo */
        padding-left: 15px; /* Adiciona um pouco de padding para não colar nas bordas */
        padding-right: 15px;
    }

    .content-image1,
    .content-image2 {
        width: 90%; /* Faz a imagem ocupar a maior parte da largura disponível */
        max-width: 400px; /* Um limite máximo para não ficar gigante */
        height: auto; /* Mantém a proporção da imagem */
        position: static; /* Remove o posicionamento relativo e os offsets */
        margin: 20px auto; /* Centraliza a imagem e adiciona margem */
        /* top, right, left, bottom não terão efeito com position: static */
    }

    .content-image1 {
        /* Se precisar de uma ordem específica, pode usar: grid-row: 3; */
        /* (considerando que o texto é o 1º visível e o empty sumiu) */
    }

    .content-image2 {
        /* grid-row: 4; */
    }
}

/* Adicione este código DEPOIS do breakpoint de 768px */

@media (max-width: 480px) {
    .first-section {
        padding-top: 70px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 100px; /* Reduz ainda mais a margem inferior */
    }

    .text-wrapper {
        gap: 10px; /* Menor espaço entre seta e texto */
    }

    .arrow-image {
        width: 50px; /* Seta um pouco menor */
    }

    h2 {
        font-size: 32px; /* Título ainda menor */
    }

    .text-block p {
        font-size: 13px; /* Texto do parágrafo um pouco menor se necessário */
    }

    .content-image1,
    .content-image2 {
        width: 100%; /* Imagens ocupam toda a largura disponível */
        max-width: none; /* Remove o max-width anterior se quisermos que ocupe 100% */
        margin-top: 15px;
        margin-bottom: 15px;
    }

    /* Animação do título: pode ser muito grande ou causar repintura em mobile.
       Se houver problemas de performance ou layout, considere simplificar ou remover.
       Exemplo para remover a animação em telas pequenas: */
    /*
    h2 span {
        animation: none;
        transform: none; // Garante que esteja visível se a animação for desativada
    }
    */
}

/* Segunda Seção */

.second-section {
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 150px;
}

.second-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: 100%;
    width: 100%;
    padding-left: 30px;
}

.second-grid-item {
    padding: 20px;
}

.full-text-area {
    grid-row: 1;
    grid-column: 1;
}

.small-image-text-area {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    align-items: center;
}

.small-image-text-area .small-image {
    max-width: 100px;
    margin-right: 20px;
}

.quad-content-area {
    grid-row: 1;
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.quad-content-item {
    padding: 10px;
}

.empty-area {
    grid-row: 2;
    grid-column: 2;
}

.full-text-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 32px;
    text-align: left;
    color: #fff;
    line-height: 1.4; /* Ajuste conforme necessário para melhor legibilidade */
    margin: 0;
    padding: 20px;
}


.split-line {
    overflow: hidden;
}

.split-parent {
    overflow: hidden;
}

.quad-content-item h5 {
    font-family: 'Unica One' , sans-serif;
    font-weight: 900; /* This is equivalent to Inter Black */
    font-size: 27px;
    color: #669BBC;
    margin-bottom: 10px; /* Add some space between the title and the paragraph */
    margin-top: 20px;
    overflow: hidden;
    text-transform: uppercase;
}

.quad-content-item p {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Regular weight for the paragraph text */
    font-size: 14px; /* Adjust this value as needed */
    line-height: 1.5; /* Improves readability */
    width: 100%;
}

.quad-content-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Adds space between the items */
}

.second-grid-item.small-image-text-area {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 20px; /* Ajuste conforme necessário */
}

.small-image-text-area .small-image {
    width: 80px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    margin-right: 15px; /* Espaço entre a imagem e o texto */
}

.small-image-text-area .small-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.small-image-text-content h4 {
    margin: 0;
    font-family: 'inter', sans-serif;
    font-weight: 900; /* Inter Black */
    font-size: 24px; /* Ajuste conforme necessário */
}

.small-image-text-area p {
    margin: 5px 0 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px; /* Ajuste conforme necessário */
}

.white-divider {
    border: 0;
    height: 1px;
    background-color: white;
    margin: 10px 0;
}

.combined-quote-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    padding: 20px;
}

.quote-content {
    margin-bottom: 20px;
}

.author-info {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.author-info .small-image {
    width: 162px;
    height: 198px;
    margin-left: 15px;
}

.author-info .small-text-content {
    text-align: left;
    margin-left: 20px;
    padding: 0;
}

/* === CSS PARA RESPONSIVIDADE (VERSÃO AJUSTADA) === */

@media (max-width: 768px) { /* Ponto de quebra para tablets e telas menores */

    .second-section {
        height: auto; /* Permite que a altura da seção se ajuste ao conteúdo */
        padding-top: 60px; /* Reduz o preenchimento superior */
        padding-bottom: 40px; /* Adiciona preenchimento inferior */
    }

    .second-grid-container {
        grid-template-columns: 1fr; /* Faz com que os itens principais (.combined-quote-area e .quad-content-area) ocupem 100% da largura, empilhando-os */
        grid-template-rows: auto; /* Linhas com altura automática */
        padding-left: 20px;   /* Ajusta o preenchimento lateral */
        padding-right: 20px;  /* Ajusta o preenchimento lateral */
        gap: 40px; /* Espaçamento entre a área da citação/autor e a área dos 4 destaques */
    }

    /* Ajustes para a área da citação e autor (.combined-quote-area) */
    .combined-quote-area {
        padding: 0; /* Remove padding extra se não for necessário, ou ajuste conforme o gosto */
        /* O display: flex e flex-direction: column já existentes aqui
           farão com que .quote-content e .author-info fiquem empilhados. */
    }

    .quote-content {
        margin-bottom: 30px; /* Espaço entre a citação e as informações do autor */
    }

    .quote-content .copy {
        font-size: 22px; /* Ajuste o tamanho da fonte da citação */
        line-height: 1.5;
        text-align: left; /* Mantém o alinhamento original ou mude para 'center' se preferir */
        /* Para evitar que o texto fique muito largo: */
        max-width: 600px; /* Limita a largura máxima do parágrafo da citação */
        margin-left: auto;   /* Centraliza o bloco do parágrafo se ele for menor que max-width */
        margin-right: auto;  /* Centraliza o bloco do parágrafo se ele for menor que max-width */
        padding: 0 10px; /* Adiciona um pequeno padding lateral ao texto se necessário */
    }
    
    .quote-content .copy span {
        /* Se houver estilos específicos no span que precisem de ajuste */
    }

    .author-info {
        flex-direction: row; /* Para manter imagem e texto lado a lado, se houver espaço */
        align-items: center; /* Centraliza verticalmente a imagem e o texto */
        justify-content: center; /* Centraliza o conjunto autor-info */
        gap: 15px; /* Espaço entre a imagem e o texto do autor */
    }

    .author-info .small-image {
        width: 60px; /* Tamanho menor para a imagem do autor */
        height: auto;
        margin-left: 0; /* Reseta margens se necessário */
    }

    .author-info .small-text-content {
        text-align: left;
        margin-left: 0;
    }

    .small-image-text-content h4 {
        font-size: 18px; /* Ajuste o tamanho da fonte */
    }

    .small-image-text-area p, /* Selector mais genérico para o parágrafo do autor */
    .author-info .small-text-content p {
        font-size: 13px; /* Ajuste o tamanho da fonte */
    }

    /* Ajustes para a área dos 4 destaques (.quad-content-area) */
    .quad-content-area {
        /* IMPORTANTE: Não alteramos o 'grid-template-columns' e 'grid-template-rows' aqui
           para manter o layout 2x2 que ele já tem no desktop.
           Apenas ajustamos espaçamentos ou outros detalhes se necessário. */
        gap: 15px; /* Ajusta o espaçamento entre os 4 itens */
        padding: 0; /* Remove padding extra se não for necessário */
    }

    .quad-content-item {
        padding: 15px; /* Ajusta o padding interno de cada item */
        text-align: left; /* Ou 'center' se preferir para os itens */
    }

    .quad-content-item h5 {
        font-size: 20px; /* Ajuste o tamanho da fonte */
        margin-top: 0;
    }

    .quad-content-item p {
        font-size: 12px; /* Ajuste o tamanho da fonte */
    }

    .white-divider {
        margin: 10px 0; /* Ajusta a margem do divisor */
    }
}

/* Opcional: Ajustes para telas ainda menores (ex: max-width: 480px) */
@media (max-width: 480px) {
    .second-section {
        padding-top: 40px;
    }

    .second-grid-container {
        padding-left: 15px;
        padding-right: 15px;
        gap: 30px;
    }
    
    .quote-content .copy {
        font-size: 18px; /* Fonte ainda menor para a citação */
        padding: 0 5px;
    }

    .author-info {
        flex-direction: column; /* Em telas muito pequenas, empilhar imagem e texto do autor */
        align-items: center;
        text-align: center;
    }
    
    .author-info .small-text-content {
        text-align: center;
    }

    .small-image-text-content h4 {
        font-size: 16px;
    }
    
    .author-info .small-text-content p {
        font-size: 12px;
    }

    .quad-content-item h5 {
        font-size: 18px;
    }

    .quad-content-item p {
        font-size: 11px;
    }

    /* Se em telas muito pequenas o 2x2 do quad-content-area ficar apertado,
       você poderia optar por empilhar os itens aqui: */
    /*
    .quad-content-area {
        grid-template-columns: 1fr;
    }
    */
}



/*Terceira Seção */
.third-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin-top: 5%;
}

.third-section-container {
    position: relative;
    width: 100%;
    height: 100%;
}


.quote-card1 {
    position: absolute;
    padding: 30px;
    border-radius: 25px;
    max-width: 400px;
}

.quote-card2 {
    top: 50px;
    left: 550px;
    position: relative;
    padding: 30px;
    border-radius: 25px 25px 25px 250px;
    max-width: 400px;
}


.primary-card {
    
    right: 50px;
    background-color: #457b9d;
    z-index: 1;
}

.secondary-card {
    top: 200px;
    right: 450px;
    background-color: #1D3557;
    color: white;
    z-index: 2;
}

.quote-text {
    font-weight: 300;
    font-size: 14px;
    text-align: right; /* Alinha o texto à direita */
    margin-top: 0; /* Remove qualquer margem superior */
    margin-right: -5px; /* Adiciona margem negativa para empurrar o texto para a direita */

}

.third-section-title {
    font-family: 'inter', sans-serif;
    font-weight: 900;
    bottom: 100px;
    left: 50px;
    font-size: 3.5em;
    color: #669BBC;
    margin-bottom: 10px;;
}


.title-and-svg {
    padding-left: 35px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.quote-author {
    margin-top: 10px;
    text-align: right;
}

.author-name {
    font-family: 'inter', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    margin-right: -5px;
}

.author-position {
    font-family: 'unica one', sans-serif;
    font-style: italic;
    font-size: 1.0em;
    margin-right: -5px;
    text-transform: uppercase;
}

/* Quarta Seção 1978 */

section.quarta {
    width: 100vw;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 40px;
}

.ano {
    font-family: 'inter', sans-serif;
    font-weight: 900;
    font-size: 30vw;
    display: flex;
    justify-content: right;
}

span.cima {
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 5px aliceblue;
    z-index: 10;
    top: 0;
    right: 10%;
}

span.baixo {
    position: absolute;
    color: aliceblue;
    z-index: 1;
    top: 0;
    right: 10%;
}

.bloco-1 {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: right;
    margin-bottom: 12rem;
}

.imagem-1 {
    position: relative;
    top: 37%;
    padding: 40px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.imagem-1 img {
    position: relative;
    width: auto;
    height: 700px;
    object-fit: cover;
    border-radius: 0px 0px 0px 137px;
    z-index: 5;
    align-self: flex-end;
}

.legenda-1 {
    padding-top: 15px;
    font-size: small;
    text-align: right;
    padding: auto;
}

.texto-1 {
    position: absolute;
    top: 80%;
    left: 0%;
}

.texto-1 p {
    font-size: 2em;
    width: 40%;
}

.texto-1 span {
    color: #669BBC;
    font-weight: 900;
}

.bloco-2 {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.imagem-2 {
    top: 70%;
    padding: 40px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.imagem-2 img {
    width: 40vw;
    height: auto;
    object-fit: cover;
    border-radius: 0px 150px 0px 150px;
    z-index: 5;
    align-self: flex-start;
}

.legenda-2 {
    width: fit-content;
    padding-top: 15px;
    font-size: small;
    text-align: right;
    padding: auto;
}

.texto-2 {
    height: fit-content;
    width: 50%;
    display: flex;
    justify-content: right;
    align-self: flex-end;
    padding-right: 40px;
}

.texto-2 p {
    font-size: 1.8em;
    text-align: right;
}

/* Quinta Seção 1985 */


section.quinta {
    width: 100vw;
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem 2rem;
}

section.quinta .ano {
    text-align: center;
    justify-content: center;
}

.quinta .texto {
    max-width: 900px;
    margin: 0 auto;
    font-size: 25px;
    text-align: left;
}

.quinta .texto-2-quinta {
    max-width: 900px;
    margin-left: auto; 
    font-size: 25px;
    text-align: right; 
}

section.quinta .texto span,
section.quinta .texto-2-quinta span {
    color: #669BBC;
    font-weight: 900;
}

.container-quinta {
    display: flex;
    flex-direction: row;
    align-items: center; /* alinha verticalmente */
    width: 100%;
    height: auto;
    margin-bottom: 4.5em;
    gap: 15px; /* espaço entre legenda e quadros */
}

.quadros {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.container-quinta .quadros img {
    width: 250px;
    height: 350px;
    object-fit: cover;
}

.legenda-quinta {
    position: relative;
    width: 100%;
    margin-left: 15px;
}

.legenda-quinta-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* alinha tudo à direita dentro da legenda */
    justify-content: flex-end; /* alinha tudo à direita dentro da legenda */
    width: auto;
}

.legenda-container {
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.legenda-container-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* texto e imagem alinhados à direita */
}

.legenda-quinta img,
.legenda-quinta-2 img {
    width: 100px;
    height: auto;
}

.copy-quinta p {
    font-size: small;
    text-align: left;
    margin: 0;
    margin-right: auto;
    width: fit-content;
}


.copy-quinta-2 p {
    font-size: small;
    text-align: right;
    margin: 0;
    margin-left: auto;
    width: fit-content;
}

.conteudo-quinta {
  display: flex; /* Ativa o Flexbox */
  justify-content: space-between; /* Alinha os itens com espaço entre eles */
  align-items: flex-start; /* Alinha os itens no topo */
  gap: 2rem; /* Cria um espaço de 2rem (aprox. 32px) entre as colunas */
  max-width: 1200px; /* Define uma largura máxima para o conteúdo */
  margin: 0 auto; /* Centraliza o container na página */
  flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo se não houver espaço */
}

/* 2. Estilização das Colunas de Texto */
.texto-esquerda,
.texto-direita {
  flex: 1; /* Permite que as colunas cresçam para ocupar o espaço disponível */
  min-width: 280px; /* Define uma largura mínima para evitar que fiquem espremidas demais */
}

/* 3. Estilização dos Parágrafos dentro das colunas */
.conteudo-quinta p {
  font-size: 1.3rem; /* Tamanho da fonte solicitado (aprox. 28.8px) */
  line-height: 1.6; /* Altura da linha para melhor legibilidade */
  color: #fff; /* Cor do texto (um cinza escuro é mais suave que o preto puro) */
  margin: 0; /* Remove a margem padrão do parágrafo */
}

/* 4. Destaque para o texto dentro da tag <span> */
.conteudo-quinta span {
  font-weight: 700; /* Deixa o texto em negrito (bold) */
  color: #669bbc; /* Uma cor de destaque, como um azul corporativo. Ajuste conforme sua paleta. */
}

/* ==========================================================================
   INÍCIO DA SECÇÃO RESPONSIVA - Quinta Seção
   ========================================================================== */

@media screen and (max-width: 992px) {
    /* Ajustes para tablets e telas menores */

    section.quinta {
        /* Reduz a margem superior e o preenchimento (padding) para economizar espaço vertical */
        margin-top: 5%;
        padding: 3rem 1.5rem;
    }

    .conteudo-quinta p {
        /* Reduz um pouco o tamanho da fonte para melhor encaixe em telas menores */
        font-size: 1.2rem;
    }
}


@media screen and (max-width: 768px) {
    /* Ajustes para a maioria dos telemóveis */

    section.quinta {
        /* Reduz ainda mais o preenchimento para telas de telemóvel */
        padding: 2.5rem 1rem;
    }

    /* O seu flex-wrap já faz o trabalho de empilhar as colunas,
       então apenas ajustamos o alinhamento de texto para consistência quando estão empilhadas. */
    .texto-esquerda,
    .texto-direita {
        text-align: left; /* Alinha ambos os textos à esquerda para uma leitura mais natural */
    }

    .conteudo-quinta p {
        font-size: 1.1rem; /* Tamanho de fonte confortável para leitura em telemóvel */
    }

    .quinta .ano span {
        /* Se o 'ano' não tiver um tamanho definido, esta regra ajuda a controlá-lo */
        font-size: 3rem; /* Ajuste o tamanho conforme necessário */
    }
}

/* Sexta Seção  1995*/

section.sexta {
    width: 100vw;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 40px;
    display: flex;
    margin-top: 15%;
    flex-direction: column;
}

.ano-sexta {
    font-family: 'inter', sans-serif;
    font-weight: 900;
    font-size: 30vw;
    position: absolute;
    top: 0;
    left: 2rem;
    display: flex;
    justify-content: left;
}

.ano-sexta span.baixo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: aliceblue;
}

.ano-sexta span.cima {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    color: transparent;
    -webkit-text-stroke: 5px aliceblue; /* contorno branco no fundo */
}

.container-sexta-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8rem; /* dá espaço para o "1995" não sobrepor */
    z-index: 2;
    position: relative;
}

.imagens-sexta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
    height: fit-content;
    margin-top: 11%;
    padding-left: 3em;
}

.imagens-sexta img {
    width: 350px;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

.texto-sexta {
    margin-right: 3rem;
    max-width: auto;
}

.texto-sexta p {
    font-size: 1.8em;
    text-align: right;
}

.container-sexta-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    position: relative;
}

.imagens-sexta-2 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 3em;
}

.imagens-sexta-2 img {
    width: auto;
    max-width: 450px;
    height: auto;
    background-color: aliceblue;
    border-radius: 4px;
    padding: 10px;
}

.texto-sexta-2 {
    margin-top: 3rem;
    width: 50%;
    text-align: left;
}

.texto-sexta-2 p {
    font-size: 1.3rem;
}

.texto-sexta-2 span {
    color: #c1121f;
    font-weight: 900;
}

/* Sétima Seção 2003 */

section.setima {
    width: 100vw;
    height: auto;
    overflow: hidden;
    padding: 40px;
    text-align: center;
}

.setima .ano {
    text-align: left;
    display: inline-block;
    position: relative;
    
}

.texto-setima {
    margin-top: 2rem;
    max-width: auto;
    margin-left: auto;
    margin-right: auto;
}

.texto-setima p {
    font-size: 1.8rem;
    margin-bottom: 3rem;
}

.texto-setima span {
    color: #669BBC;
    font-weight: 900;
}

.texto-setima img {
    width: auto;
    height: 250px;
    background-color: rgb(255, 255, 255);
    border-radius: 100%;
    border: 5px solid #669BBC;
    padding: 20px;
}

.texto-setima-2 {
    margin-top: 10%;
    color: white;
    padding: 4rem 1rem;
}

.texto-setima-2 p {
    max-width: 800px;
    margin-left: 0;           /* alinha à esquerda */
    margin-right: auto;       /* impede centralização automática */
    font-size: 1.5rem;
    text-align: left;         /* garante alinhamento do conteúdo */
}

.comp-setima {
    display: flex;
    justify-content: flex-end; /* imagem lado direito da tela */
    align-items: flex-end;
    margin-top: 2rem;
}

.comp-setima img {
    max-width: 70%;
    height: auto;
    object-fit: cover;
}

.hpp {
    margin-top: 10%;
    padding-right: 4rem;
    padding-left: 2rem;
}

.imagem-hpp {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: end;
}

.imagem-hpp img {
    width: 45%;
    height: auto;
    object-fit: cover;
}

.imagem-hpp p {
    font-size: 1.5rem;
    text-align: left;
    margin-left: 4rem;
}

.imagem-hpp span {
    color: #c1121f;
    font-weight: 900;
    font-size: 2.5rem;
    font-family: "unica one", sans-serif;
    text-transform: uppercase;
}

.texto-hpp {
    max-width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10%;
}

.texto-hpp p {
    width: 70%;
    font-size: 1.5rem;
    text-align: left;
}

.texto-hpp span {
    color: azure;
    font-weight: 900;
    font-size: 2rem;
    font-family: "unica one", sans-serif;
    text-decoration: underline;
    text-transform: uppercase;
}

.galeria-setima {
    margin-top: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
    flex-wrap: wrap; /* se for mobile, permite quebra */
}

.coluna-esquerda img {
    width: 550px;
    height: auto;
    object-fit: cover;
    border-radius: 150px 0px 150px 0px;
    border: 5px solid #c1121f;
}

.coluna-direita {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coluna-direita img {
    width: 550px;
    height: auto;
    object-fit: cover;
}

.galeria-final {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding: 4rem 2rem;
    flex-wrap: wrap;
}

.imagem-esquerda img {
    width: 650px;
    height: auto;
    object-fit: cover;
    border-radius: 0px 150px 0px 150px;
}

.coluna-direita-final {
    display: flex;
    flex-direction: column;
}

.coluna-direita-final img {
    width: 250px;
    height: auto;
    object-fit: cover;
}

.coluna-direita-final img:first-child {
    border-radius: 75px 0px 0px 0px;
}

.coluna-direita-final img:last-child {
    border-radius: 0px 0px 75px 0px;
}

/* Oitava Seção 2011 */

section.oitava {
    text-align: center;
}

section.oitava .ano {
    text-align: center;
    justify-content: center;
}

.logo-oitava img {
    max-width: 50vw;
    height: auto;
    margin: 2rem auto;
}

.imagens-oitava {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    gap: 1rem;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.img-lateral {
    width: 350px;
    height: auto;
    object-fit: cover;
    z-index: 1;
}

.img-central {
    width: 350px;
    height: auto;
    object-fit: cover;
    margin-bottom: 2rem;
    z-index: 2;
    position: relative;
    top: -2.5rem;
}


/* Nona Seção 2021 */

section.nona {
    height: auto;
    width: 100vw;
    position: relative;
    margin-top: 35% ;
}

.ano-nona {
    font-weight: 900;
    font-size: 30vw;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.ano-nona span.cima {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.ano-nona span.baixo {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.compressor-coair {
    height: auto;
    width: 100%;
}

.compressor-coair img {
    width: 100vh;
    height: auto;
    object-fit: cover;
    z-index: 5;
    position: relative;
    transform: translate(100%, -40%);
}

.texto-nona {
    z-index: 10;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
}

.texto-nona p {
    width: 75%;
}

.logos-nona {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.logos-nona img {
    width: 200px;
    height: auto;
    object-fit: cover;
}

.logos-nona img:last-child {
    width: 300px;
}

.logos-nona p {
    font-size: 4em;
    font-weight: 900;
    color: #fff;
}


.nona-secao-final {
    margin-top: 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
    flex-wrap: wrap;
    text-align: center;
}

.coluna-imagens {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bloco-verde {
    background: linear-gradient(to bottom right, #189A43, #060916 80%);
    border-radius: 120px 0px 120px 0px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.coluna-imagens.direita .bloco-verde {
    flex-direction: row;
    border-radius: 0px 150px 0px 150px;
}

.bloco-verde img {
    max-width: 250px;
    object-fit: contain;
}

.texto-central {
    max-width: 600px;
    color: white;
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: right;
}

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


/* Décima Seção 2025*/

section.decima {
    height: auto;
    width: 100vw;
    margin-top: 5% ;
    padding: 4rem 2rem;
}

.texto-decima {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.texto-decima p {
    width: 90%;
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 5%;
}

.texto-final {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.texto-final p {
    width: 60%;
    text-align: right;
    font-size: 1.5rem;
    margin-bottom: 5%;
}

/* Oitava Seção 
.eighth-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.eighth-section-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.eighth-section-row-1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.eighth-section-col-1 {
    flex: 1;
    padding-right: 20px;
}

.eighth-section-col-2 {
    flex: 1;
    text-align: right;
}

.eighth-section-text {
    font-size: 18px;
    line-height: 1.6;
    color: #fff;
    text-align: left;
}

.eighth-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 36px;
    color: #fff;
    margin-bottom: 10px;
}

.eighth-section-divider {
    border: 0;
    height: 1px;
    background-color: white;
    margin: 10px 0;
}

.eighth-section-row-2 {
    display: flex;
    justify-content: space-between;
}

.eighth-section-person-col {
    flex: 1;
    padding: 0 10px;
}

.eighth-section-person-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}*/








.wrapper,
.content {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.content {
  overflow-x: hidden;
}

.content .section {
  width: 100vw;
  height: 100vh;
}

.content .section.hero {
  background-image: url(../assets/img/SOBRE/Estabelecimento\ Comercial\ Martin\ Bianco\ Compressores.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: hidden;
}

.image-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  perspective: 500px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  overflow: hidden;
}

/* ==========================================================================
   CSS RESPONSIVO PARA A PÁGINA SOBRE (sobre.css)
   Adicione este bloco ao FINAL do seu arquivo sobre.css
   ========================================================================== */

/* Ajuste geral para cursor em dispositivos touch/menores */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
    html {
        cursor: auto; /* Restaura o cursor padrão do sistema */
    }
    .cursor {
        display: none; /* Esconde o elemento do cursor customizado */
    }
}

/* Ajustes no Menu para telas menores */
@media (max-width: 768px) {
    header {
        padding: 15px 20px; /* Ajusta o padding do header */
    }

    .logo img {
        max-width: 180px; /* Reduz um pouco o logo se necessário */
    }

    .menu-button, .close-button {
        font-size: 14px; /* Ajusta o tamanho da fonte dos botões */
        padding: 8px 15px;
    }

    .menu-banner {
        width: 100%; /* Menu ocupa a tela toda */
    }

    .menu-items {
        padding-top: 80px; /* Mais espaço no topo para o botão de fechar */
        gap: 15px; /* Reduz o espaço entre os itens */
    }

    .menu-item-wrapper {
        margin: 10px 0;
    }

    .menu-card {
        width: 180px; /* Ajusta o tamanho dos cards no menu */
        height: 120px;
    }

    .menu-item {
        font-size: 18px; /* Ajusta o tamanho da fonte dos links do menu */
    }

    .contact-info .contact-link {
        font-size: 14px;
    }

    .contact-info .contact-button {
        font-size: 16px;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .menu-card {
        width: 150px;
        height: 100px;
    }

    .menu-item {
        font-size: 16px;
    }
}


/* Primeira Seção (Revisado e Complementado) */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Reduz o padding geral do body */
    }

    .first-section {
        height: auto;
        min-height: auto; /* Ajustado para não forçar 100vh se o conteúdo for pequeno */
        padding-top: 80px;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 80px; /* Reduzido */
    }

    .content-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 30px; /* Aumentar um pouco o gap entre os itens empilhados */
    }

    .grid-item {
        padding-bottom: 0;
    }

    .grid-item.empty {
        display: none;
    }

    .text-content {
        /* Manter como está, pois text-wrapper cuidará do alinhamento */
    }

    .text-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
    }

    .arrow-image {
        width: 50px; /* Reduzido */
        margin-top: 0;
        transform: rotate(90deg); /* Aponta para baixo, para o texto */
    }

    h2 {
        font-size: 36px; /* Reduzido */
        text-align: center;
    }

    .text-block p {
        margin-right: 0;
        font-size: 14px;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .content-image1,
    .content-image2 {
        width: 90%;
        max-width: 350px; /* Limite para não ficar muito grande */
        height: auto;
        position: static;
        margin: 20px auto;
        border-radius: 15px; /* Menor borda */
    }
}

@media (max-width: 480px) {
    .first-section {
        padding-top: 70px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 60px;
    }

    .text-wrapper {
        gap: 10px;
    }

    .arrow-image {
        width: 40px;
    }

    h2 {
        font-size: 28px;
    }

    .text-block p {
        font-size: 13px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .content-image1,
    .content-image2 {
        width: 95%; /* Ocupa mais da largura */
        max-width: none;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    /* Opcional: Desativar animação do título em telas muito pequenas se causar problemas */
    /*
    h2 span {
        animation: none;
        transform: none;
    }
    */
}

/* Wrapper e Image Container (Efeito Hero com GSAP) */
@media (max-width: 768px) {
    .wrapper {
        /* O GSAP pode precisar de ajustes via JS (ScrollTrigger.matchMedia())
           para alterar o comportamento da animação em telas menores se o efeito
           de pin/scrub não for ideal. Por CSS, podemos apenas garantir
           que o conteúdo dentro se comporte bem. */
    }
    .content .section.hero {
        background-position: center 30%; /* Pode ajustar a posição do background */
    }
}

@media (max-width: 480px) {
    .content .section.hero {
         /* Se o efeito de zoom do GSAP for muito intenso ou causar lentidão,
           a melhor abordagem seria desabilitá-lo ou simplificá-lo via JavaScript
           usando ScrollTrigger.matchMedia().
           gsap.matchMedia().add("(max-width: 480px)", () => { ... });
           Por CSS, não podemos controlar diretamente a animação GSAP,
           mas podemos garantir que a imagem de fundo não seja excessivamente cortada.
         */
        background-size: cover; /* Garante que cubra, mesmo que corte mais */
    }
    .image-container img {
        /* Similar ao .section.hero, o controle da animação é melhor via JS.
           Aqui podemos apenas garantir que a imagem em si não quebre o layout
           caso a animação seja desabilitada ou falhe. */
        object-fit: cover;
    }
}


/* Segunda Seção (Revisado e Complementado) */
@media (max-width: 768px) {
    .second-section {
        height: auto;
        padding-top: 60px;
        padding-bottom: 60px; /* Adicionado padding inferior */
    }

    .second-grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; /* Ajustado para duas linhas automáticas */
        padding-left: 20px;
        padding-right: 20px;
        gap: 50px; /* Aumentado o gap */
    }

    .combined-quote-area {
        padding: 0;
        align-items: center; /* Centraliza o conteúdo da citação/autor */
    }

    .quote-content {
        margin-bottom: 30px;
        width: 100%; /* Ocupa a largura total */
    }

    .quote-content .copy {
        font-size: 20px; /* Reduzido */
        line-height: 1.6;
        text-align: center; /* Centralizado */
        max-width: 100%; /* Permitir que ocupe a largura toda */
        padding: 0 10px;
    }

    .author-info {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px; /* Aumentado o gap */
        width: 100%; /* Ocupa a largura total */
    }

    .author-info .small-image {
        width: 80px; /* Aumentado um pouco */
        height: auto;
        margin-left: 0;
    }

    .author-info .small-text-content {
        text-align: left;
        margin-left: 0;
    }

    .small-image-text-content h4 {
        font-size: 18px;
    }

    .author-info .small-text-content p { /* Alvo mais específico */
        font-size: 14px;
    }

    .quad-content-area {
        grid-template-columns: 1fr 1fr; /* Mantém 2 colunas se couber */
        gap: 20px; /* Aumentado o gap */
        padding: 0;
        width: 100%; /* Ocupa a largura total */
    }

    .quad-content-item {
        padding: 15px;
        text-align: left;
    }

    .quad-content-item h5 {
        font-size: 18px; /* Reduzido */
        margin-top: 0;
        margin-bottom: 8px;
    }

    .quad-content-item p {
        font-size: 12px;
        line-height: 1.5;
    }

    .white-divider {
        margin: 8px 0;
    }
}

@media (max-width: 480px) {
    .second-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .second-grid-container {
        padding-left: 15px;
        padding-right: 15px;
        gap: 30px;
    }
    
    .quote-content .copy {
        font-size: 17px; /* Reduzido */
        padding: 0;
    }

    .author-info {
        flex-direction: column; /* Empilha em telas muito pequenas */
        text-align: center;
        gap: 10px;
    }
    
    .author-info .small-text-content {
        text-align: center;
    }

    .small-image-text-content h4 {
        font-size: 17px;
    }
    
    .author-info .small-text-content p {
        font-size: 13px;
    }

    .quad-content-area {
        grid-template-columns: 1fr; /* Empilha os 4 itens */
        gap: 25px;
    }

    .quad-content-item {
        padding: 10px;
        text-align: center; /* Centraliza o conteúdo dos itens */
    }

    .quad-content-item h5 {
        font-size: 19px; /* Pode aumentar um pouco se estiver centralizado */
    }

    .quad-content-item p {
        font-size: 12px;
    }
}


/* Terceira Seção */
@media (max-width: 768px) {
    .third-section {
        height: auto; /* Altura automática */
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .third-section-container {
        position: relative; /* Mantém o contexto de posicionamento */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .quote-card1, .quote-card2 {
        position: static; /* Remove posicionamento absoluto */
        max-width: 90%; /* Ajusta a largura */
        margin: 0 auto; /* Centraliza os cards */
        padding: 20px;
        border-radius: 15px; /* Borda uniforme */
    }
    
    .quote-card2 {
        border-radius: 15px; /* Remove o border-radius especial */
        /* A ordem visual será definida pela ordem no HTML agora */
    }

    .primary-card {
        /* right, z-index não são mais necessários como antes */
    }

    .secondary-card {
        /* top, right, z-index não são mais necessários */
    }

    .quote-text {
        font-size: 13px;
        text-align: left; /* Alinha à esquerda para melhor leitura */
        margin-right: 0;
    }

    .author-name {
        font-size: 1.3em;
        margin-right: 0;
    }

    .author-position {
        font-size: 0.9em;
        margin-right: 0;
    }
    
    .quote-author {
        text-align: left; /* Alinha à esquerda */
    }

    .title-and-svg {
        position: static; /* Remove posicionamento absoluto */
        padding-left: 0;
        order: -1; /* Coloca o título e SVG no topo */
        margin-bottom: 20px;
    }

    .third-section-title {
        font-size: 2.5em; /* Reduz o título */
        text-align: center;
        margin-bottom: 15px;
    }

    .title-and-svg svg {
        width: 80px; /* Reduz o SVG */
        height: auto;
    }
}

@media (max-width: 480px) {
    .third-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .third-section-container {
        padding-left: 15px;
        padding-right: 15px;
        gap: 25px;
    }

    .quote-card1, .quote-card2 {
        max-width: 100%;
        padding: 15px;
    }

    .quote-text {
        font-size: 12px;
    }

    .author-name {
        font-size: 1.2em;
    }

    .author-position {
        font-size: 0.85em;
    }

    .third-section-title {
        font-size: 2em;
    }

    .title-and-svg svg {
        width: 60px;
    }
}


/* Quarta Seção - 1978 */
@media (max-width: 768px) {
    section.quarta {
        padding: 20px;
        margin-top: 80px; /* Adiciona margem superior */
    }

    .ano {
        font-size: 25vw; /* Reduz um pouco o tamanho do ano */
        justify-content: center; /* Centraliza o ano */
    }
    span.cima, span.baixo {
        right: auto; /* Remove o 'right' para permitir centralização */
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    span.cima {
        -webkit-text-stroke-width: 3px; /* Traço mais fino */
    }


    .bloco-1 {
        height: auto; /* Altura automática */
        margin-bottom: 60px; /* Reduz margem */
        align-items: center; /* Centraliza conteúdo */
    }

    .imagem-1 {
        position: static; /* Remove posicionamento */
        padding: 0;
        width: 90%;
        max-width: 400px; /* Limite para imagem */
        margin: 0 auto 20px auto; /* Centraliza */
        order: 1; /* Imagem primeiro */
    }

    .imagem-1 img {
        width: 100%; /* Imagem ocupa o container */
        height: auto;
        border-radius: 0 0 0 80px; /* Ajusta borda */
    }

    .legenda-1 {
        font-size: 0.8em;
        text-align: center;
        padding-top: 10px;
    }

    .texto-1 {
        position: static; /* Remove posicionamento */
        width: 100%;
        text-align: center; /* Centraliza texto */
        order: 2; /* Texto depois da imagem */
    }

    .texto-1 p {
        font-size: 1.5em; /* Reduz fonte */
        width: 95%;
        margin: 0 auto; /* Centraliza parágrafo */
    }

    .bloco-2 {
        height: auto; /* Altura automática */
        align-items: center; /* Centraliza conteúdo */
    }

    .imagem-2 {
        position: static;
        padding: 0;
        width: 90%;
        max-width: 400px;
        margin: 0 auto 20px auto;
        order: 1;
    }

    .imagem-2 img {
        width: 100%;
        height: auto;
        border-radius: 0 80px 0 80px;
    }

    .legenda-2 {
        font-size: 0.8em;
        text-align: center;
        padding-top: 10px;
        width: 100%;
    }

    .texto-2 {
        position: static;
        width: 100%;
        padding-right: 0;
        text-align: center;
        order: 2;
    }

    .texto-2 p {
        font-size: 1.4em; /* Reduz fonte */
        width: 95%;
        margin: 0 auto;
        text-align: center;
    }
}

@media (max-width: 480px) {
    section.quarta {
        padding: 15px;
        margin-top: 60px;
    }
    .ano {
        font-size: 30vw; /* Pode aumentar um pouco para impacto visual */
    }
    span.cima {
        -webkit-text-stroke-width: 2px;
    }

    .bloco-1 {
        margin-bottom: 40px;
    }
    .imagem-1, .imagem-2 {
        width: 95%;
    }
    .texto-1 p {
        font-size: 1.2em;
    }
    .texto-2 p {
        font-size: 1.1em;
    }
    .legenda-1, .legenda-2 {
        font-size: 0.75em;
    }
}


/* Quinta Seção - 1985 */
@media (max-width: 768px) {
    section.quinta {
        margin-top: 10%;
        padding: 0 20px; /* Adiciona padding lateral */
    }

    section.quinta .ano {
        font-size: 25vw; /* Consistente com a seção anterior */
    }

    section.quinta .texto {
        font-size: 1.3em;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: center; /* Centraliza o texto introdutório */
        margin-bottom: 40px;
    }

    .container-quinta {
        flex-direction: column; /* Empilha legenda e quadros */
        gap: 30px;
        margin-bottom: 3em;
    }

    .quadros {
        flex-wrap: wrap; /* Permite que os quadros quebrem a linha */
        justify-content: center; /* Centraliza os quadros */
        gap: 15px;
    }

    .container-quinta .quadros img {
        width: calc(50% - 10px); /* Duas imagens por linha, com gap */
        max-width: 200px; /* Limite para não ficarem muito grandes */
        height: auto; /* Altura automática para manter proporção */
    }

    .legenda-quinta, .legenda-quinta-2 {
        width: 100%;
        margin-left: 0;
        display: flex; /* Para centralizar o conteúdo interno */
        justify-content: center;
    }
    
    .legenda-quinta .legenda-container,
    .legenda-quinta-2 .legenda-container-2 {
        position: static; /* Remove posicionamento absoluto */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza a imagem e o texto */
        text-align: center;
    }
    
    .legenda-quinta-2 {
        order: 1; /* Para o segundo container, a legenda pode vir antes dos quadros */
    }
    .container-quinta:nth-of-type(2) .quadros { /* Seleciona o segundo .container-quinta */
        order: 2;
    }


    .legenda-quinta img,
    .legenda-quinta-2 img {
        width: 70px; /* Reduz o ícone */
        margin-bottom: 10px;
    }

    .copy-quinta p, .copy-quinta-2 p {
        font-size: 0.9em;
        text-align: center; /* Garante centralização */
        width: auto;
    }
}

@media (max-width: 480px) {
    section.quinta .ano {
        font-size: 30vw;
    }
    section.quinta .texto {
        font-size: 1.1em;
        width: 95%;
        margin-bottom: 30px;
    }
    .container-quinta .quadros img {
        width: calc(100% - 10px); /* Uma imagem por linha */
        max-width: 250px; /* Um pouco maior se for uma por linha */
    }
    .legenda-quinta img,
    .legenda-quinta-2 img {
        width: 60px;
    }
    .copy-quinta p, .copy-quinta-2 p {
        font-size: 0.8em;
    }
}


/* Sexta Seção - 1995 */
@media (max-width: 768px) {
    section.sexta {
        padding: 20px;
        margin-top: 10%;
    }

    .ano-sexta {
        font-size: 25vw;
        position: relative; /* Para não sobrepor tanto */
        justify-content: center;
        text-align: center;
        left: auto;
        margin-bottom: 20px; /* Espaço abaixo do ano */
    }
    .ano-sexta span.cima, .ano-sexta span.baixo {
        position: relative; /* Simplifica posicionamento */
        left: auto; top: auto;
        display: block; /* Para centralizar */
    }
     .ano-sexta span.cima {
        -webkit-text-stroke-width: 3px;
    }


    .container-sexta-1 {
        flex-direction: column; /* Empilha imagens e texto */
        margin-top: 20px; /* Reduz margem */
        gap: 30px;
    }

    .imagens-sexta {
        flex-direction: column; /* Imagens empilhadas */
        align-items: center; /* Centraliza as imagens */
        gap: 15px;
        padding-left: 0;
        margin-top: 0;
        order: 1; /* Imagens primeiro */
    }

    .imagens-sexta img {
        width: 90%; /* Ajusta largura */
        max-width: 320px; /* Limite */
        height: auto;
    }

    .texto-sexta {
        margin-right: 30px;
        text-align: center; /* Centraliza texto */
        order: 2; /* Texto depois */
    }

    .texto-sexta p {
        font-size: 1.4em; /* Reduz fonte */
    }

    .container-sexta-2 {
        padding: 20px 0; /* Ajusta padding */
        margin-top: 40px; /* Espaço entre os blocos */
    }

    .imagens-sexta-2 {
        margin: 0 auto 20px auto; /* Centraliza e adiciona margem inferior */
        justify-content: center;
    }

    .imagens-sexta-2 img {
        max-width: 80%; /* Ajusta logo */
        height: auto;
        padding: 8px;
    }

    .texto-sexta-2 {
        width: 95%;
        text-align: center; /* Centraliza texto */
        margin-top: 0;
        margin-right: 25px;
    }

    .texto-sexta-2 p {
        font-size: 1.1em; /* Reduz fonte */
    }
}

@media (max-width: 480px) {
    section.sexta {
        padding: 15px;
    }
    .ano-sexta {
        font-size: 30vw;
    }
     .ano-sexta span.cima {
        -webkit-text-stroke-width: 2px;
    }

    .imagens-sexta img {
        width: 95%;
        max-width: 280px;
    }
    .texto-sexta p {
        font-size: 1.2em;
    }
    .imagens-sexta-2 img {
        max-width: 70%;
    }
    .texto-sexta-2 p {
        font-size: 1em;
    }
}


/* Sétima Seção - 2003 */
@media (max-width: 768px) {
    section.setima {
        padding: 20px;
        margin-top: 10%;
    }

    .setima .ano {
        text-align: center; /* Centraliza o ano */
        display: block; /* Para ocupar a largura e centralizar */
        font-size: 25vw; /* Consistente */
        margin-bottom: 30px;
    }
    .setima .ano span { /* Para o caso de ter apenas um span */
        font-size: 25vw;
        font-family: 'inter', sans-serif;
        font-weight: 900;
        color: #669BBC; /* Cor de exemplo, ajuste se necessário */
    }


    .texto-setima {
        margin-top: 0;
        margin-right: 20px;
    }

    .texto-setima p {
        font-size: 1.4em;
        margin-bottom: 20px;
    }

    .texto-setima img {
        width: 180px; /* Reduz logo */
        height: 180px;
        padding: 15px;
        border-width: 4px;
    }

    .texto-setima-2 {
        padding: 30px 0;
        margin-top: 8%;
    }

    .texto-setima-2 p {
        font-size: 1.2em;
        text-align: center; /* Centraliza */
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .comp-setima {
        justify-content: center; /* Centraliza imagem */
        margin-top: 30px;
    }

    .comp-setima img {
        max-width: 90%; /* Ajusta imagem */
    }

    .hpp {
        margin-top: 8%;
        padding: 0;
    }

    .imagem-hpp {
        flex-direction: column; /* Empilha imagem e texto */
        align-items: center; /* Centraliza */
        text-align: center;
    }

    .imagem-hpp img {
        width: 70%; /* Ajusta imagem */
        max-width: 350px;
        margin-bottom: 20px;
    }

    .imagem-hpp p {
        font-size: 1.3em;
        margin-left: 0;
    }
    .imagem-hpp span {
        font-size: 2em;
    }


    .texto-hpp {
        margin-top: 8%;
        align-items: center;
    }

    .texto-hpp p {
        width: 95%;
        font-size: 1.2em;
        text-align: center;
    }
    .texto-hpp span {
        font-size: 1.7em;
    }

    .galeria-setima {
        margin-top: 10%;
        flex-direction: column; /* Empilha colunas da galeria */
        padding: 0;
        gap: 20px;
    }

    .coluna-esquerda img {
        width: 90%; /* Ajusta imagem */
        max-width: 400px;
        margin: 0 auto; /* Centraliza */
        border-radius: 80px 0 80px 0; /* Ajusta borda */
        border-width: 4px;
    }

    .coluna-direita {
        align-items: center; /* Centraliza imagens */
        gap: 15px;
    }

    .coluna-direita img {
        width: 90%; /* Ajusta imagens */
        max-width: 400px;
    }

    .galeria-final {
        flex-direction: column; /* Empilha */
        gap: 20px;
        padding: 30px 0;
        margin-top: 10%;
    }

    .imagem-esquerda img {
        width: 90%; /* Ajusta imagem */
        max-width: 450px;
        border-radius: 0 80px 0 80px;
    }

    .coluna-direita-final {
        flex-direction: row; /* Lado a lado se couber */
        justify-content: center;
        gap: 10px;
        width: 90%;
        max-width: 450px; /* Limite para as duas juntas */
        margin: 0 auto;
    }

    .coluna-direita-final img {
        width: calc(50% - 5px); /* Duas imagens */
        height: auto;
    }
}

@media (max-width: 480px) {
    .setima .ano, .setima .ano span {
        font-size: 30vw;
    }
    .texto-setima p {
        font-size: 1.2em;
    }
    .texto-setima img {
        width: 150px;
        height: 150px;
    }
    .texto-setima-2 p {
        font-size: 1.05em;
    }
    .comp-setima img {
        max-width: 95%;
    }
    .imagem-hpp img {
        width: 80%;
    }
    .imagem-hpp p {
        font-size: 1.1em;
    }
    .imagem-hpp span {
        font-size: 1.8em;
    }
    .texto-hpp p {
        font-size: 1.05em;
    }
    .texto-hpp span {
        font-size: 1.5em;
    }
    .coluna-esquerda img, .coluna-direita img, .imagem-esquerda img {
        width: 95%;
    }
    .coluna-direita-final {
        flex-direction: column; /* Empilha se muito pequeno */
        align-items: center;
        max-width: 300px;
    }
    .coluna-direita-final img {
        width: 100%;
    }
     .coluna-direita-final img:first-child {
        border-radius: 50px 0px 0px 0px;
    }

    .coluna-direita-final img:last-child {
        border-radius: 0px 0px 50px 0px;
    }
}


/* Oitava Seção - 2011 */
@media (max-width: 768px) {
    section.oitava {
        padding: 20px;
        margin-top: 10%;
    }
    section.oitava .ano {
        font-size: 25vw; /* Consistente */
        margin-bottom: 30px;
    }
    section.oitava .ano span { /* Para o caso de ter apenas um span */
        font-size: 25vw;
        font-family: 'inter', sans-serif;
        font-weight: 900;
        color: #669BBC;
    }


    .logo-oitava img {
        max-width: 70vw; /* Ajusta logo */
        margin-bottom: 30px;
    }

    .imagens-oitava {
        flex-direction: column; /* Empilha imagens */
        align-items: center; /* Centraliza */
        gap: 20px;
        margin-top: 20px;
    }

    .img-lateral, .img-central {
        width: 80%; /* Ajusta largura */
        max-width: 300px; /* Limite */
        height: auto;
        object-fit: cover;
        position: static; /* Remove posicionamento e 'top' */
        margin-bottom: 0; /* Remove margem extra da central */
    }
}

@media (max-width: 480px) {
    section.oitava .ano, section.oitava .ano span {
        font-size: 30vw;
    }
    .logo-oitava img {
        max-width: 80vw;
    }
    .img-lateral, .img-central {
        width: 90%;
        max-width: 280px;
    }
}


/* Nona Seção - 2021 */
@media (max-width: 768px) {
    section.nona {
        padding: 0 20px; /* Adiciona padding lateral */
        margin-top: 15%; /* Ajusta margem superior */
        overflow-x: hidden; /* Evita scroll horizontal pelo compressor */
    }

    .ano-nona {
        font-size: 25vw;
        justify-content: center; /* Centraliza ano */
        position: relative; /* Para o ano não sobrepor demais */
        margin-bottom: 20px;
    }
    .ano-nona span.cima, .ano-nona span.baixo {
        position: relative;
        left: auto; top: auto;
        display: block;
        text-align: center;
    }
     .ano-nona span.cima {
        -webkit-text-stroke-width: 3px;
    }


    .compressor-coair {
        width: 100%;
        height: auto;
        margin-top: -10%; /* Ajusta para sobrepor menos o ano */
    }

    .compressor-coair img {
        width: 100%; /* Imagem responsiva */
        height: auto;
        max-width: 500px; /* Limita o tamanho máximo */
        transform: translate(0, 0); /* Remove a translação original */
        display: block;
        margin: 0 auto 30px auto; /* Centraliza e adiciona margem */
        position: relative; /* Reset z-index context if needed */
        z-index: 5;
    }

    .texto-nona {
        font-size: 1.3em;
        margin-top: 20px; /* Espaço após o compressor */
    }

    .texto-nona p {
        width: 95%;
    }

    .logos-nona {
        gap: 1rem;
        margin-top: 30px;
        flex-wrap: wrap; /* Permite quebra de linha */
        justify-content: center;
    }

    .logos-nona img {
        width: 120px; /* Reduz logos */
    }
    .logos-nona img:last-child {
        width: 180px;
    }
    .logos-nona p {
        font-size: 2.5em;
    }

    .nona-secao-final {
        margin-top: 10%;
        flex-direction: column; /* Empilha tudo */
        gap: 30px;
    }

    .coluna-imagens {
        width: 100%;
    }

    .bloco-verde {
        padding: 20px; /* Reduz padding */
        border-radius: 80px 0 80px 0; /* Ajusta borda */
        width: 90%; /* Ajusta largura */
        max-width: 400px; /* Limite */
        margin: 0 auto; /* Centraliza */
    }

    .coluna-imagens.direita .bloco-verde {
        flex-direction: column; /* Empilha imagens no bloco da direita também */
        border-radius: 0 80px 0 80px; /* Ajusta borda */
    }

    .bloco-verde img {
        max-width: 180px; /* Reduz imagens dentro do bloco */
    }

    .coluna-nona { /* Container do texto central e bloco da direita */
        width: 100%;
        gap: 30px; /* Espaço entre texto e bloco */
    }

    .texto-central {
        max-width: 95%;
        font-size: 1.2em;
        text-align: center; /* Centraliza texto */
    }
}

@media (max-width: 480px) {
    section.nona {
        margin-top: 20%;
    }
    .ano-nona {
        font-size: 30vw;
    }
    .ano-nona span.cima {
        -webkit-text-stroke-width: 2px;
    }

    .compressor-coair img {
        max-width: 300px; /* Ainda menor */
        margin-bottom: 20px;
    }
    .texto-nona {
        font-size: 1.1em;
    }
    .logos-nona img {
        width: 100px;
    }
    .logos-nona img:last-child {
        width: 150px;
    }
    .logos-nona p {
        font-size: 2em;
    }
    .bloco-verde {
        padding: 15px;
        border-radius: 60px 0 60px 0;
        gap: 15px;
    }
    .coluna-imagens.direita .bloco-verde {
        border-radius: 0 60px 0 60px;
    }
    .bloco-verde img {
        max-width: 150px;
    }
    .texto-central {
        font-size: 1em;
    }
}


/* Décima Seção - 2025 */
@media (max-width: 768px) {
    section.decima {
        padding: 30px 20px; /* Ajusta padding */
        margin-top: 10%;
    }
    section.decima .ano {
        font-size: 25vw; /* Consistente */
        text-align: center;
        margin-bottom: 30px;
    }
    section.decima .ano span { /* Para o caso de ter apenas um span */
        font-size: 25vw;
        font-family: 'inter', sans-serif;
        font-weight: 900;
        color: #669BBC;
    }

    .texto-decima {
        width: 100%; /* Ocupa toda a largura */
        align-items: center;
    }

    .texto-decima p {
        width: 95%;
        font-size: 1.3em;
        text-align: center; /* Centraliza texto */
        margin-bottom: 30px;
    }

    .texto-decima img {
        width: 90%; /* Ajusta imagem */
        max-width: 450px; /* Limite */
        height: auto;
        border-radius: 15px; /* Adiciona borda */
    }

    .texto-final {
        margin-top: 8%;
    }

    .texto-final p {
        width: 95%;
        font-size: 1.3em;
        text-align: center; /* Centraliza */
    }
}

@media (max-width: 480px) {
    section.decima {
        padding: 20px 15px;
    }
     section.decima .ano, section.decima .ano span {
        font-size: 30vw;
    }
    .texto-decima p {
        font-size: 1.1em;
        margin-bottom: 20px;
    }
    .texto-decima img {
        width: 95%;
    }
    .texto-final p {
        font-size: 1.1em;
    }
}


/* Footer (Rodapé) */
@media (max-width: 768px) {
    .footer {
        padding: 30px 20px; /* Ajusta padding do footer */
    }

    .footer-content {
        /* Mantém a estrutura, mas os itens internos vão se ajustar */
    }

    .footer-top {
        flex-direction: column; /* Empilha logo e texto */
        align-items: center; /* Centraliza */
        text-align: center;
        gap: 20px; /* Espaço entre logo e texto */
    }

    .footer-logo img {
        max-width: 200px; /* Ajusta tamanho do logo */
    }

    .footer-text {
        font-size: 0.9em; /* Reduz fonte do texto */
        max-width: 90%; /* Limita largura */
    }

    .footer-bottom {
        flex-direction: column; /* Empilha navegação e contato */
        align-items: center; /* Centraliza */
        gap: 30px; /* Espaço entre nav e contato */
        margin-top: 30px; /* Espaço do topo */
    }

    .footer-nav {
        flex-direction: column; /* Empilha links de navegação */
        align-items: center; /* Centraliza */
        gap: 10px; /* Espaço entre links */
    }

    .footer-link {
        font-size: 1em; /* Ajusta fonte dos links */
    }

    .footer-contact {
        text-align: center; /* Centraliza texto do contato */
        font-size: 0.9em;
    }
    .footer-contact p {
        margin-bottom: 8px;
    }

    .footer-copyright {
        margin-top: 30px; /* Espaço do topo */
        font-size: 0.8em; /* Reduz fonte do copyright */
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 20px 15px;
    }
    .footer-logo img {
        max-width: 180px;
    }
    .footer-text {
        font-size: 0.85em;
        max-width: 100%;
    }
    .footer-link {
        font-size: 0.95em;
    }
    .footer-contact {
        font-size: 0.85em;
    }
    .footer-copyright {
        font-size: 0.75em;
    }
}

@media (max-width: 768px) {

    .cursor {
        display: none;
    }
}

@media (max-width: 920px) {

    .cursor {
        display: none;
    }
}