@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}

:root {
    --verde: #4b653a;
    --white: #fff;
    --dark: #1e1c2a;
    --texto: #F5E6C8;
    --verde-claro: #61814a;
    --verde-escuro: #2a3809;
    --branco: #fff;
    --texto-secundario: #f0f0f0;
}

body {
    color: var(--dark);
    background: #FAFAF0 ;
    overflow-x: hidden;
}


#tituloportfolio{
    
    font-size: 30px;
}

.timeline-container .event-content {
    font-size: 18px;
    margin: 20px;
    margin-top: 0;
    padding-top: 0;
}

  .timeline-container .event-content {
        font-size: 14px;
    }



    .timeline-container .event img {
    width: 150px;
    height: 180px;
    border-radius: 10px;
    object-fit: cover;
    transition: transform 0.3s;
    filter: grayscale(100%);
}



.gallery{
  width: 100%; /* ou defina uma largura fixa, ex.: 1200px */
    overflow: hidden;
    position: relative; /* opcional para efeitos */

}


.cards {
    display: flex;
    animation: scroll 100s linear infinite; /* Alterado para 15s para uma animação mais lenta */
    list-style-type: none;
}

.cards img {
    min-width: 300px;
    height: auto;
    margin-right: 100px;
    filter: grayscale(100%);
    transition: transform 0.3s, filter 0.3s;
}

.cards img:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}














#br{
    display: none;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 40px;
    
    width: 100%;
    background: var(--verde-escuro) ;
    transition: all 0.5s;
   /* position: fixed;*/
    z-index: 9999;
    
}

.navigation:hover{
    opacity: 95%;
}

.navigation .logo {
    color: var(--verde);
    font-size: 1.7rem;
    font-weight: 600;
}

.logo span {
    color: var(--dark);
}

.navigation ul {
    display: flex;
    align-items: center;
    gap: 5rem;
    
}

.navigation ul li a {
    color: var(--white);
    font-size: 17px;
    font-weight: 500;
    transition: all 0.5s;
    border-radius: 50px 100rem 50px;
    padding: 10px;
}

.navigation ul li a:hover {
    background-color: #283311d0;
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.747);
    
}

.navigation i {
    cursor: pointer;
    font-size: 1.5rem;
}

.menu {
    cursor: pointer;
    display: none;
}

.menu .bar {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--dark);
    margin: 5px auto;
    transition: all 0.3s;
}

.menu .bar:nth-child(1),
.menu .bar:nth-child(3) {
    background: var(--verde);
}

.home {
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    position: relative;
}

.home-text {
    max-width: 60rem;
}



.home-text .text-h4 {
    margin-left: 5px;
    font-size: 1.7rem;
    color: var(--white);
    margin-bottom: 1rem;
    font-family: "Sen", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.home-text .text-h1 {
    text-align: left;
    margin-left: 0px;
    font-size: 6rem;
    line-height: 5rem;
    color: var(--texto);
    font-family: "Sen", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.home-text p {
    margin-bottom: 4rem;
}



.home-btn:hover {
    background: #023a12;
}

#main {
    background-image: url(img/home-fundo.png);
    width: 100%;
    height: 90vh; /* Ajusta a altura para metade da altura da tela, mas você pode modificar conforme necessário */
    background-size: cover;
    background-position: center top; /* Ajusta a posição da imagem para mostrar mais do topo e dar margem na parte inferior */
    background-repeat: no-repeat;
    position: relative;
    padding-bottom: 50px; /* Adiciona uma margem para a próxima seção */
    
}



/* Seção Sobre */
.sobre {
    
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 10px;
     width: 100%; /* ou defina uma largura fixa, ex.: 1200px */
    overflow: hidden;
    position: relative; /* opcional para efeitos */
}

.sobre-container {
    /*display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 850px;
    width: 800px;
    
}

.sobre-titulo{
    margin-top: 1.5rem;
    margin-bottom: 4rem;
    color: var(--verde-escuro);
    font-size: 70px;
}

.sobre-bloco {
    background-color: var(--verde-claro);
    border-radius: 10rem;
    display: flex;
    align-items: center;
    gap: 10%;
    max-width: 90%;
    margin-bottom: 5rem;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
}

#sobre-bloco-par{
    margin-right: -130%;
}

.sobre-bloco img {
    width: 200px;
    height: auto;
    border-radius: 10px;
    filter: grayscale(50%);
}

.sobre-texto-conteudo,
.sobre-texto-conteudoreverse {
    flex: 1;
    padding: 1%;
    color: white;
    font-size: 16px;
    position: relative;
    
    
    /* Configuração da imagem de fundo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}




.sobre-texto-conteudo {
    text-align: left;
    padding-right: 15%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}

.sobre-texto-conteudoreverse {
    text-align: right;
    padding-left: 15%;
}




/* Animação de transição das imagens */
@keyframes slide {
    0% {
        transform: translateY(0);
    }
    33% {
        transform: translateY(-5%);
    }
    66% {
        transform: translateY(5%);
    }
    100% {
        transform: translateY(0);
    }
}

@media (max-width: 828px) {
    
    .sobre-container {
        flex-direction: column;
        text-align: center;
    }

    .sobre-imagens {
        margin-bottom: 20px;
        display: none;
    }

    .imagem-slide img {
        width: 80%;
        margin-bottom: 10px;
    }
    .home-text {
        max-width: 90%; /* Maior largura no mobile */
    }
    
}

@media (max-width:1300px) {

 

#sobre-bloco-par{
    margin-right: -100%;
}

}

@media (max-width:1150px) {

#sobre-bloco-par{
    margin-right: -70%;
}

}

@media (max-width:1030px) {

#sobre-bloco-par{
    margin-right: -40%;
}

   #tituloportfolio{
    
    font-size:1rem;
}

.timeline-container .event-content {
    font-size: 18px;
    margin: 20px;
    margin-top: 10px;
    padding-top: 100;
}

  .timeline-container .event-content {
        font-size: 14px;
    }

}




@media (max-width:922px) {
   .timeline-container .event img {
        width: 100px;
        height: 180px;
    }


    .execucaodeobras-p1{
        margin-left: 30%;
        margin-right: 30%;
    }

 .cards img {
    width: 100%;
    aspect-ratio: 1 / 1; /* mantém formato quadrado */
    object-fit: cover;
}
    #sobre-bloco-par{
    margin-right: -10%;
}

    @keyframes slide {
        0% {
            transform: translateY(0);
        }
        33% {
            transform: translateY(-3%);
        }
        66% {
            transform: translateY(2%);
        }
        100% {
            transform: translateY(0);
        }
    }

    #main {
        background-image: url(img/home-fundo.png);
        width: 100%;
        height: 400px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        z-index:  1;;
    }

 
  

    .menu {
        display: block;
    }

    .menu.ativo .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu.ativo .bar:nth-child(2) {
        opacity: 0;
    }

    .menu.ativo .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
.navigation {
    
   position: fixed;
    
}


    .nav-menu {
        position: fixed;
        right: -100%;
        top: 70px;
        width: 100%;
        height: 100%;
        flex-direction: column;
        background: var(--verde-escuro);
        transition: 0.3s ease-in-out;
        z-index: 9999;
        opacity: 95%;
    }

    .nav-menu.ativo {
        right: 0;
    }

    .nav-item {
        margin: 16px 0;
    }

    /* Centralizando o texto dentro da imagem no mobile */
    .home {
        padding: 0;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        height: 100%;
        position: relative;
    }

    #fundotexto{
        margin-top: 5rem;
    }

   .home-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 420px;
    height: auto;
    /* Não colocar text-align: left aqui, pois centralizaria o bloco e alinhava o texto ao mesmo tempo */
}

.home .text-h4 {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 1rem;
    text-align: left; /* Alinha este elemento à esquerda dentro de .home-text */
    padding-left: 20px; /* Adiciona um recuo interno, se desejar */
}

.home .text-h1 {
    font-size: 3rem;
    line-height: 2.5rem;
    color: var(--texto);
    text-align: left; /* Alinha este elemento à esquerda dentro de .home-text */
    padding-left: 20px; /* Adiciona o mesmo recuo interno */
}
   

    .home p {
        font-size: 1rem;
        color: var(--white);
    }

    .home-img {
        width: 100%;
    }

    .home-btn {
        margin-left: 0; /* Ajuste conforme necessário */
    }
}

    @media (max-width:800px) {
        .sobre-bloco {
            margin-top: 50px;
    background-color: var(--verde-claro);
    border-radius: 10rem;
    display: flex;
    align-items: center;
    gap: 1%;
    max-width: 90%;
    margin-bottom: 5rem;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin-right: 10%;
    
}

 .execucaodeobras-p1{
        margin-left: 40%;
        margin-right: 40%;
    }
    .execucaodeobras-p2{
        margin-left: 40%;
        margin-right: 40%;
    }

#sobre-bloco-par{
     margin-right: 10%;
}

 @media (max-width:700px) {
        .sobre-bloco {
    
    margin-right: 20%;
    
}

#sobre-bloco-par{
     margin-right: 20%;
}


}
 @media (max-width:600px) {
        .sobre-bloco {
    
    margin-right: 30%;
    
}

.execucaodeobras-p1{
        margin-left: 50%;
        margin-right: 50%;
    }
    .execucaodeobras-p2{
        margin-left: 50%;
        margin-right: 50%;
    }

#sobre-bloco-par{
     margin-right: 30%;
}


}

 @media (max-width:500px) {
        .sobre-bloco {
    
    margin-right: 45%;
    
}

.sobre-bloco{
     margin-right: 54%;
}


#sobre-bloco-par{
     margin-right: 53%;
}


}





}

#img-logo {
    width: 14rem;
    margin: 0;
    padding: 0;
};



:root {
  --rose:#904c4c;
}

/* Estilo da seção Execução de Obras */
.execucaodeobras {
    background: var(--verde);

    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    margin-top: -3rem;
   
}

.div-execucaodeobras {
    color: var(--branco);
    max-width: 800px;
    width: 90%;
    width: 100%; /* ou defina uma largura fixa, ex.: 1200px */
    overflow: hidden;
    position: relative; /* opcional para efeitos */
}

.execucaodeobras-h2 h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.execucaodeobras-p1 p,
.execucaodeobras-p2 p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: 400;
    margin-left: -10rem;
    margin-right: -10rem;

}

.execucaodeobras-p2 p {
    font-weight: 600; /* Maior ênfase na segunda linha */
}



/* Responsividade */
@media (max-width: 768px) {
    .execucaodeobras {
        height: auto;
        padding: 20px;
    }

    .execucaodeobras-h2 h2 {
        font-size: 2rem;
    }

    .execucaodeobras-p1 p,
    .execucaodeobras-p2 p {
        font-size: 1rem;
    }

    .logo-obras img {
        width: 60px;
    }
}


:root {
    --verde-claro: #61814a;
    --verde-escuro: #2a3809;
    --branco: #fff;
    --texto-claro: #f0f0f0;
}

/* Estilo do Portfólio */
.portfolio {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: -10px; 
}

/* Slider de imagens no fundo */
.portfolio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    animation: slider 40s infinite linear;
}

/* Animação do background */
@keyframes slider {
    0%   { background-image: url('img/imgobra1.png'); }
    20%  { background-image: url('img/imgobra2.png'); }
    40%  { background-image: url('img/imgobra3.png'); }
    60%  { background-image: url('img/imgobra4.png'); }
    80%  { background-image: url('img/imgobra5.png'); }
    100% { background-image: url('img/imgobra6.png'); }
}

/* Camada de escurecimento para melhor legibilidade do texto */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(48, 59, 32, 0.6), rgba(0, 0, 0, 0.8));
    
}

/* Conteúdo dentro do Portfólio */
.portfolio-content {
    position: relative;
   
    max-width: 800px;
    padding: 20px;
    color: var(--branco);
    text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

.portfolio-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

.portfolio-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

/* Responsividade */
@media (max-width: 768px) {
    .portfolio {
        height: 400px;
    }

    .portfolio-content h2 {
        font-size: 2rem;
    }

    .portfolio-content p {
        font-size: 1rem;
    }
    .sobre-texto-conteudo{ 
        font-size: 15px;
        margin-left: 4rem;
    }
    .sobre-texto-conteudoreverse{
        margin-right: 4rem;
    }
    
}



/* Estilizando o container da seção de contato */
.contato {
    
    background-color: #2a3809;
    color: white;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* Criando o layout dividido */
.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 95%;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Lado esquerdo: Mapa */
.contato-mapa {
    flex: 1;
    min-width: 300px;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px;
}



/* Lado direito: Informações de contato */
.contato-info {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.contato-info h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.contato-info p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Lista de contatos */
.contato-info ul {
    list-style: none;
    padding: 0;
}

.contato-info li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

/* Ícones */
.contato-info img {
    width: 24px;
    height: 24px;
}

.contato-info a {
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

.contato-info a:hover {
    color:#d5d3d3;
}

/* Responsividade */
@media (max-width: 980px) {
    
    .container {
        flex-direction: column;
        width: 90%;
    }

    .contato-mapa {
        height: 25px;
        border-radius: 50px;
        margin: 0 auto; /* Centraliza horizontalmente */
    }

    .contato-info {
        text-align: center;
    }

    .contato-info ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #ul-contato{
        margin-right: 26%;
    }
}

#ul-contato{
    margin-left: 26%;
}

#icons{
    font-size: 25px;
}
#icons-maps{
    font-size: 30px;
}


/* Correções para celular */
@media (max-width: 768px) {
    
    .contato-mapa {
       display: none;
    }
   
    .nav-menu {
        position: fixed;
        right: -100%;
        top: 70px;
        width: 100%;
        height: 100%;
        flex-direction: column;
        background: var(--verde-escuro);
        transition: 0.3s ease-in-out;
        padding: 10px;  /* Ajuste o padding para reduzir o espaço interno */
        z-index: 99999;
    }
    .navigation{
        padding: -18px -20px;
    }
   
}
/* preciso formatar o site inteiro a partir do seguinte padrão - 496 */

@media (max-width: 496px) {
     .sobre-texto-conteudo{
        margin: 10px; 
        font-size: 13px;
        margin-left: 4rem;
    }
    .sobre-texto-conteudoreverse{
          margin: 10px; 
        font-size: 13px;
        margin-right: 4rem;
    }
    
    #body{
       margin-right: -48%;
       width: 100%;
    }
    #text-h1-1{
        margin-top: 3rem;
    }

    .cont-m{
        display: none;
    }
    #icons{
        font-size: 3rem;
    }
    #icons-maps{
        font-size: 3rem;
    }

    .hidden {
        display: none;
    }
    #read-more-btn{
        display: block;
    }
    #br{
        display: block;
    }



}
@media (max-width: 344px) {

    
    #body{
       margin-right: -48%;
    }
  
}
@media (max-width: 242px) {
    #body{
       margin-right: -60%;
    }
  
}
@media (max-width: 228px) {
    #body{
       margin-right: -70%;
    }
  
}


.footer {
    background-color: #050505;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer-links ul li {
    display: inline-block;
    margin-right: 20px;
}

.footer-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.footer-links ul li a:hover {
    color: #ff6347; /* Cor para o hover */
}

.footer-copy p {
    font-size: 14px;
}




/* Botão flutuante do WhatsApp */
#chat-box {
    color: white;
    border-radius: 50%;
    padding: 15px;
    font-size: 2.5rem;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-align: center;
    z-index: 9999; /* Garantir que o botão fique na frente */
  }
  
  #chat-box:hover {
    background-color: #1ebe5d;
  }
  
  /* Animação do ícone do WhatsApp */
  @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
  }
  
  #chat-box.animate {
    animation: shake 0.5s infinite;
  }
  
  /* Notificação do WhatsApp */
  #notification-badge {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    animation: pulse 1.5s infinite alternate;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.3); }
  }
  
  /* Caixa do chat */
  #chat-container {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 20px;
    background-color: #f0f0f0;
    border-radius: 15px;
    width: 320px;
    max-width: 100%;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 999;
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
  }
  
  /* Cabeçalho do chat */
  #chat-header {
    font-size: 16px;
    font-weight: bold;
    color: #4b4f56;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
  }
  
  /* Corpo do chat */
  #chat-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 250px;
    padding: 10px;
  }
  
  /* Mensagens do chat */
  .chat-message {
    display: inline-block;
    padding: 8px 12px;
    max-width: 75%;
    border-radius: 10px;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Mensagem do bot */
  .chat-message.bot {
    background-color: #ffffff;
    align-self: flex-start;
  }
  
  /* Mensagem do usuário */
  .chat-message.user {
    background-color: #dcf8c6;
    align-self: flex-end;
  }
  
  /* Botões de opção */
  .option-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: none;
    border-radius: 5px;
    background-color: #25d366;
    color: white;
    font-size: 14px;
    cursor: pointer;
  }
  
  .option-btn:hover {
    background-color: #1ebe5d;
  }
  
  /* Rodapé do chat */
  #chat-footer-observation, #chat-footer-name {
    display: flex;
    gap: 5px;
    padding: 10px;
    border-top: 1px solid #ddd;
  }
  
  /* Campos de input */
  #chat-observation, #chat-name {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-size: 14px;
    outline: none;
  }
  
  /* Botão de enviar */
  #send-observation, #send-name {
    background-color: #25D366;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
  }
  
  #send-observation:hover, #send-name:hover {
    background-color: #1ebe5d;
  }
  









  /* Estilos específicos para a linha do tempo */
.timeline-container {
    background-image: url('/img/background-timeline2.png');
    background-size: cover; /* ajusta o tamanho da imagem */
    background-position: center; /* centraliza a imagem */
    background-repeat: no-repeat;
    color: white;
    min-height: 100vh;
    padding: 50px 50px;
    position: relative;
    width: 80%;
    margin: 0%;
    width: 100%;
}

/* Estilos de evento */
.timeline-container .event {
    position: relative;
    width: 50%;
    height: 200px;
    margin: 50px 0;
    padding: 10px;
    background: var(--verde);
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    display: flex;
    align-items: center;
    gap: 20px;
}




.timeline-container .event:hover img {
    transform: scale(1.1);
    filter: none;
}



.timeline-container .event-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #388e3c;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
}

.timeline-container .event:nth-child(even) {
    left: 50%;
    transform: translateX(-50%) translateY(50px);
}

.timeline-container .event.visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-container .event.visible .event-marker {
    transform: translateX(-50%) translateY(0);
}

/* Estilo do círculo de ano */
.timeline-container .year-circle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100px;
    height: 100px;
    background-color: #388e3c;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.3s ease-out;
}

/* Estilos para telas menores */
@media (max-width: 768px) {
    .timeline-container .event:nth-child(even) {
        left: 0;
        transform: translateX(0px) translateY(0px);
    }

    .timeline-container .event {
        flex-direction: column;
        text-align: center;
        max-width: 600px;
        margin: 50px auto;
        width: 90%;
    }

    .timeline-container .event img {
        width: 200px;
        height: 60px;
    }

    .timeline-container .event-marker {
        left: 50%;
        top: -10px;
        transform: translateX(-50%);
    }

    .timeline-container .year-circle {
        width: 60px;
        height: 60px;
        font-size: 16px;
    }
}
@media (max-width: 689px){
    .timeline-container .event img {
        display: none;
    }
}


@media (max-width: 480px) {

    .sobre-bloco img {
    display: none;
}

    #tituloportfolio{
    
    font-size: 1rem;
}

.timeline-container .event-content {
    font-size: 18px;
    margin: 20px;
    margin-top: 0;
    padding-top: 0;
}

  .timeline-container .event-content {
        font-size: 12px;
    }

    .timeline-container .event img {
        width: 100px;
        height: 30px;
    }
    
    .timeline-container .event {
        padding: 10px;
    }

    .timeline-container .event img {
        width: 80px;
        height: 80px;
    }

  

    .timeline-container .year-circle {
        width: 50px;
        height: 50px;
        font-size: 14px;
    }
}

@media (max-width: 1219px){


#contatoemail{
    word-break: break-word;
}

}







.logo-gallery {
    margin-top: 20px;
    margin-bottom: 5rem;
}

.cards {
    display: flex;
    animation: scroll 100s linear infinite; /* Alterado para 15s para uma animação mais lenta */
    list-style-type: none;
}

.cards img {
    min-width: 200px;
    height: auto;
    margin-right: 100px;
    filter: grayscale(0%);
    transition: transform 0.3s, filter 0.3s;
}

.cards img:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

#h1cliente{
    
    text-align: center;
    
}





.logo-fixa {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 70px;
    height: 70px;
    background-color: #2a3809;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}

.logo-fixa img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* Quando rolar para a segunda seção, a logo aparece */
body.show-logo .logo-fixa {
    opacity: 1;
    visibility: visible;
}


@media (max-width:922px){
    .cards {
    
    animation: scroll 30s linear infinite; /* Alterado para 15s para uma animação mais lenta */
    
}

}