html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #202020;
    color: white;
}

.spacing-div{
    height: 15px;
}

h1, h2 {
    font-size: 1rem;
    font-weight: 700; /* ou 'bold' também funciona */
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

h3 {
    font-size: 2rem;
    font-weight: 300; /* Light */
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif
}

h4, h5, h6 {
    font-size: 2rem;
    font-weight: 300; /* Light */
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Source Sans Pro', sans-serif;
}

.contatos-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    overflow: hidden;
}

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

.contatos-button:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .contatos-button {
        bottom: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
    }
}

.navbar-main {
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    color: #202020;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 5px 0;
}

.navbar-img {
    height: 50px;
    padding-left: 40px;
}

.navbar-contato {
    padding-right: 100px;
}

.navbar-wpp-img {
    height: 20px;
    margin-right: 5px; 
}

.contato-linha {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    font-size: 0.8rem;
}


.contato-linha:last-child {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.navbar-container {
    display: flex;
    align-items: center;
}


.navbar-main > div:nth-child(2) { 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Media Queries para dispositivos móveis --- */

@media (max-width: 768px) {
    .navbar-main {
        display: flex; /* Garante que é um container flex */
        justify-content: space-between; /* ESSENCIAL: Mantém logo na esquerda e contatos na direita */
        align-items: center; /* Alinha verticalmente logo e bloco de contatos */
        padding: 5px 10px; /* Ajusta o padding geral para telas menores */
        height: auto; /* Altura automática para se ajustar ao conteúdo */
        flex-wrap: nowrap; /* Impede quebra de linha principal, mantendo logo e contatos na mesma linha */
    }

    .navbar-img {
        height: 40px; /* Reduz o tamanho do logo */
        /* Removido padding-left: 0; pois o justify-content já alinha */
        /* Removido margin-bottom, width, text-align para não interferir na linha */
    }

    .navbar-contato {
        font-size: 0.6rem; /* Reduz o tamanho da fonte dos contatos */
        padding-right: 0; /* Garante que não haja padding extra na direita */
        /* ESSENCIAL: Empurra o container de contatos para a direita */
        margin-left: auto;
        /* Removido text-align: center aqui, pois a centralização será pelo justify-content no pai flex */
        /* Removido margin-top, margin-bottom, width para não interferir no alinhamento da linha */
    }

    .navbar-wpp-img {
        height: 12px; /* Reduz ligeiramente o ícone do WhatsApp/e-mail */
        margin-right: 3px;
    }

    .contato-linha {
        font-size: 0.7rem; /* Garante que a fonte seja menor */
        /* ESSENCIAL: Centraliza o conteúdo de CADA LINHA de contato (ícone e texto) */
        justify-content: center;
        margin-bottom: 3px; /* Ajusta o espaçamento entre as linhas de contato */
    }

        .contato-linha:last-child {
            margin-bottom: 0;
        }

    /* Container das linhas de contato (o div:nth-child(2) original) */
    .navbar-main > div:nth-child(2) {
        display: flex; /* Garante que os itens internos (contato-linha) sejam flex */
        flex-direction: column; /* ESSENCIAL: Mantém as linhas de contato empilhadas */
        align-items: center; /* ESSENCIAL: Centraliza as LINHAS de contato horizontalmente */
        justify-content: center; /* Centraliza as LINHAS de contato verticalmente se houver espaço */
        /* Removido margin-top, margin-bottom, width */
    }
}

.carousel-item {
    height: 640px;
    z-index: 1;
    position: relative;
}

.carousel-item img {
    width: 80%; /* Ajuste o valor conforme necessário */
    height: auto; /* Mantém a proporção */
    margin: 0 auto; /* Centraliza horizontalmente */
    display: block;
    filter: blur(4px); /* ajuste o valor do borrão aqui */
}

.carousel-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(70, 55, 24, 0.4);
  z-index: 2;
  pointer-events: none;
}

.carousel-item h2,.carousel-item h3,.carousel-item a {
  position: absolute;
  z-index: 10;
  color: white;
  text-align: center;
  margin: 0.5rem 0;
}

.banner-1-titulo {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3.2rem;
    padding: 10px 20px;
    width: 760px;
    border: 3px solid white;
}

.banner-1-texto {
    position: absolute;
    top: 60%; /* ou outro valor, como 20% */
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* ajuste conforme necessário */
    font-size: 2rem;
    padding: 10px 20px;
    border-radius: 8px;
}

    /* Linha superior */
    .banner-1-texto::before {
        content: "";
        position: absolute;
        top: -15px; /* distância acima do texto */
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgb(194, 146, 56); /* dourado */
    }

    /* Linha inferior */
    .banner-1-texto::after {
        content: "";
        position: absolute;
        bottom: -15px; /* distância abaixo do texto */
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgb(194, 146, 56);
    }
.banner-1-button {
    display: inline-block;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(194, 146, 56); /* cor dourada */
    color: white;
    border: 3px solid rgb(194, 146, 56); /* mesma cor do fundo ou use white */
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

    .banner-1-button:hover {
        background-color: white;
        color: rgb(194, 146, 56);
        border-color: rgb(194, 146, 56);
    }

/* Aumenta a área clicável dos botões */
.carousel-control-prev,
.carousel-control-next {
    width: 80px; /* Largura do botão */
    height: 80px; /* Altura do botão */
    top: 50%;
    transform: translateY(-50%);
    bottom: auto; /* garante que não seja influenciado por posicionamentos padrões */
}

/* Aumenta o tamanho do ícone da seta */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 80% 80%; /* aumenta o ícone interno */
    width: 70px;
    height: 70px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto; /* garante que não seja influenciado por posicionamentos padrões */
}

.carousel-fade .carousel-item {
    transition: opacity 1.5s ease-in-out; /* Ajuste a duração aqui, por exemplo, 0.5s para mais rápido, 1.5s para mais lento */
}

.carousel-fade .carousel-item.active.carousel-item-start,
.carousel-fade .carousel-item.active.carousel-item-end {
    /* Esta regra geralmente lida com a imagem que está saindo */
    /* Garante que ela saia de forma limpa */
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Use a mesma duração da sua transição principal */
}

.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
    /* Esta regra lida com a imagem que está entrando */
    opacity: 1;
    transition: opacity 1.5s ease-in-out; /* Use a mesma duração da sua transição principal */
}

@media (max-width: 768px) {
    .carousel-item {
        height: auto; /* Altura automática em dispositivos móveis */
        padding: 20px 0;
    }

        .carousel-item img {
            width: 100%; /* Imagem ocupa toda a largura */
            height: auto;
        }

    .banner-1-titulo {
        font-size: 1.2rem; /* Reduz o tamanho do título */
        width: 90%; /* Reduz a largura do container */
        padding: 10px;
        top: 25%; /* Ajusta a posição no mobile */
    }

    .banner-1-texto {
        font-size: 0.8rem; /* Reduz o tamanho do texto */
        width: 90%;
        padding: 10px;
        top: 55%;
    }

    .banner-1-button {
        font-size: 1.4rem; /* Tamanho menor para botão */
        padding: 10px 15px;
        top: 75%;
        left: 50%; /* Centraliza o botão */
        transform: translateX(-50%); /* Corrige a centralização */
    }
}

@media (max-width: 480px) { /* Opcional: Para smartphones muito pequenos */
    .carousel-item {
        height: 200px; /* Reduz ainda mais a altura em telas menores */
    }
}

.full-width-div {
    background-color: #cccccc;
    color: black;
    font-size: 3rem;
    width: 100%;
    border-bottom-right-radius: 125px;
    border-top-left-radius: 125px;
    display: flex;
    align-items: center;
    padding: 40px;
    padding-left: 200px;
    padding-right: 150px;
    box-sizing: border-box;
    overflow: hidden;
    flex-wrap: nowrap; /* impede que imagem vá pra cima em telas maiores */
    gap: 40px;
}

/* Imagem do lado esquerdo */
.image-container {
    position: relative;
    width: 300px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Garante que a imagem preencha o container */
.background-tractor-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
}

/* Conteúdo de texto à direita */
.text-content {
    flex: 1;
    padding-right: 20px;
    font-size: 1.2rem; /* reduzido para leitura confortável */
    color: #202020;
}

.text-content {
    padding-left: 50px; /* espaço da esquerda para afastar da imagem */
}

    /* Título principal */
    .text-content h2 {
        font-size: 3rem;
        margin-bottom: 20px;
        color: #202020;
        position: relative; /* necessário para o posicionamento do ::after */
        padding-bottom: 10px; /* espaço entre o texto e a linha */
    }

        /* Linha dourada abaixo do h2 */
        .text-content h2::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: rgb(194, 146, 56); /* dourado */
        }

    /* Subtítulos com bolinha de tópico */
    .text-content h3 {
        font-size: 1.2rem;
        margin-top: 20px;
        margin-bottom: 3px;
        color: #64553F;
        text-align: left; /* alinha à esquerda */
        position: relative;
        font-weight: 600
    }

    /* Parágrafos */
    .text-content p {
        font-size: 1rem;
        line-height: 1.6;
        color: #202020;
        margin-bottom: 30px;
    }

    /* Texto em negrito dourado */
    .text-content strong {
        color: rgb(194, 146, 56); /* dourado */
    }

.btn-wrapper {
    text-align: center; /* Centraliza o conteúdo dentro dessa div */
}

/* Botão */
.btn-orcamento {
    display: inline-block; /* Para funcionar com text-align: center */
    background-color: rgb(194, 146, 56);
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 30px; /* Espaço em relação ao conteúdo anterior */
}

    .btn-orcamento:hover {
        background-color: #a37418;
    }

/* Media Queries para Responsividade (Opcional, mas recomendado) */
@media (max-width: 768px) { /* Este breakpoint cobre a maioria dos tablets e smartphones */
    .full-width-div {
        height: auto; /* A altura da div agora é automática para se adaptar ao conteúdo */
        flex-direction: column-reverse;
        padding: 20px; /* Reduz o padding para telas menores */
        border-bottom-right-radius: 50px; /* Reduz o arredondamento das bordas */
        border-top-left-radius: 50px;
        text-align: center; /* Centraliza o texto em modo coluna */
        font-size: 1.5rem; /* Ajusta o tamanho de fonte base para mobile */
    }

    .image-container {
        width: 100%; /* Ocupa a largura total em telas menores */
        flex: none; /* Desativa o flexbox sizing */
        height: 300px; /* Altura fixa para o contêiner da imagem em mobile */
        margin-left: 0; /* Remove a margem esquerda */
        margin-bottom: 30px; /* Adiciona espaço abaixo da imagem empilhada */
        padding-top: 20px; /* Adiciona um pouco de padding no topo se necessário */
    }

    .background-tractor-image {
        /* As propriedades de largura, altura e object-fit já são responsivas aqui */
        height: 85%; /* Ajusta a altura da imagem do trator para ocupar mais espaço no contêiner */
    }

    .overlay-image-wrapper {
        width: 30%; /* Reduz o tamanho da logo de sobreposição */
        max-width: 120px; /* Limite máximo menor para a logo */
        max-height: 120px;
        bottom: 5%; /* Ajusta a posição da logo de sobreposição */
        right: 5%;
    }

    .text-content {
        width: 100%; /* Ocupa a largura total em telas menores */
        padding-left: 0; /* Remove o padding esquerdo */
        padding-top: 20px; /* Adiciona padding no topo do texto */
        height: auto; /* A altura do container de texto se ajusta */
    }

        .text-content h2 {
            font-size: 1.8em; /* Reduz o tamanho do título para mobile */
            margin-bottom: 15px;
        }

        .text-content p {
            font-size: 1rem; /* Reduz o tamanho do parágrafo para mobile */
            line-height: 1.5;
            margin-bottom: 10px;
        }
}

.separador-servicos {
    font-size: 2.8rem;
    font-weight: bold;
    color: #cccccc; /* Cor original do seu texto */

    background-color: #cccccc; /* Fundo da div é preto */
    padding: 20px 0; /* Adicione padding vertical para que o texto não fique colado nas bordas. Ajuste conforme necessário. */
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho */

    position: relative; /* ESSENCIAL para posicionar o pseudo-elemento */
    overflow: hidden; /* ESSENCIAL para esconder o que transborda do pseudo-elemento */
    height: 100px;
}

    /* Pseudo-elemento para criar o arredondamento branco no canto superior esquerdo */
    .separador-servicos::after {
        content: ''; /* Conteúdo vazio */
        position: absolute; /* Posição absoluta em relação ao .servicos-titulo-container */
        /* Ocupa 100% da div */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #202020; /* A cor do "recorte" branco */
        /* Aplicando o arredondamento SOMENTE no canto superior esquerdo */
        border-top-left-radius: 125px; /* Raio de arredondamento. Ajuste este valor se 125px for muito */
        /* Garante que o pseudo-elemento fique atrás do conteúdo */
        z-index: 1;
    }

.servicos-titulo-container h2 {
    position: relative;
    display: inline-block; /* Faz o elemento ter apenas a largura do texto */
    font-size: 2.75rem;
    font-weight: bold;
    color: #cccccc;
    text-align: left;
    padding: 20px 25px; /* espaço interno com margem lateral */
    margin-left: 75px; /* opcional, se quiser mais espaço da margem do site */
}

   /* Linha inferior dourada */
    .servicos-titulo-container h2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgb(194, 146, 56);
    }



    /* Garante que o texto (span) fique acima do pseudo-elemento */
    .servicos-titulo-container span {
        display: inline-block; /* ou block, se quiser ocupar a linha toda */
        position: relative;
        margin-left: 0; /* remover o deslocamento manual */
        z-index: 2;
    }

@media (max-width: 768px) { /* Para tablets e smartphones */
    .servicos-titulo-container {
        font-size: 2rem; /* Reduz o tamanho da fonte para telas menores. */
        padding: 15px 0; /* Ajusta o padding vertical. */
        /* width: 100%; - Já definido no estilo base, não precisa repetir aqui. */
    }

        .servicos-titulo-container::after {
            border-top-left-radius: 50px; /* Reduz o raio de arredondamento para mobile. */
        }

        .servicos-titulo-container span {
            margin-left: 20px; /* Reduz a margem esquerda para smartphones, ajuste conforme necessário. */
            /* text-align: left; - Já definido no estilo base, mas pode ser ajustado para 'center' se preferir em mobile. */
        }
}

@media (max-width: 480px) { /* Para smartphones menores */
    .servicos-titulo-container {
        font-size: 1.8rem; /* Reduz ainda mais o tamanho da fonte. */
        padding: 10px 0;
    }

        .servicos-titulo-container::after {
            border-top-left-radius: 50px; /* Reduz o raio de arredondamento para telas muito pequenas. */
        }

        .servicos-titulo-container span {
            margin-left: 15px; /* Ajusta a margem esquerda para telas muito pequenas. */
        }
}

.servicos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Espaçamento entre os serviços */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    /* Garante que o conteúdo dentro da div servicos-wrapper fique acima do pseudo-elemento ::after */
    position: relative; /* Já deve ter no seu CSS, mas reforçando */
    overflow: hidden; /* Já deve ter no seu CSS, mas reforçando */
    z-index: 0; /* z-index default ou menor que o dos filhos se eles tiverem um z-index > 0 */
}



/* Estilos gerais para TODOS os blocos de serviço (Desktop, padrão) */
.servico-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 0 0 0;
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    background-color: #202020;
    border: 3px solid #cccccc;
    text-align: center;
    color: #cccccc;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    height: 275px; /* ou outra altura fixa ou mínima que queira */
}


/* Estilos para as IMAGENS de serviço */
.servico-item-img {
    height: 70px; /* Altura fixa para as imagens */
    width: auto; /* Mantém a proporção */
    margin-bottom: 10px;
    /* Adicione 'display: block;' se precisar remover espaço extra */
    display: block;
}

.servico-item-saiba {
    display: inline-block;
    font-size: 0.9em;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    margin: 5px auto 10px auto; /* espaço inferior para separar do texto */
    text-align: center;
    transition: all 0.3s ease;
    cursor: default;
}

/* Estilos para o TEXTO de serviço */
.servico-item-txt {
    background-color: #cccccc;
    color: black;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    padding: 12px;
    font-family: 'Source Sans Pro', sans-serif;
    width: 100%;
    margin-top: auto; /* empurra para baixo */
    margin-bottom: 0;
    box-sizing: border-box;
    flex-grow: 1; /* faz crescer verticalmente */
    display: flex; /* para centralizar texto */
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}


.servico-item-descricao {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    width: 90%;
    z-index: 3;
}

.servico-item:hover .servico-item-descricao {
    opacity: 1;
}
.servico-item:hover .servico-item-txt {
    opacity: 0.45;
}
.servico-item:hover .servico-item-img {
    opacity: 0.35;
}


/* Media Queries para Responsividade em Smartphones e Tablets */
@media (max-width: 992px) { /* Breakpoint para tablets e desktops menores */
    .servicos-wrapper

{
    margin-left: 50px; /* Reduz margens laterais para tablets */
    margin-right: 50px;
    gap: 20px; /* Reduz o espaçamento entre os cards */
    padding: 15px;
}

.servico-item {
    /* Em tablets, 2 itens por linha, mas com largura um pouco mais flexível */
    flex: 0 0 calc(50% - 10px); /* 10px é metade do gap de 20px */
    max-width: calc(50% - 10px);
    padding: 10px;
}

.servico-item-img {
    height: 60px; /* Reduz o tamanho da imagem */
}

.servico-item-txt {
    font-size: 1.5em; /* Reduz o tamanho do texto do serviço */
}
    }

}

@media (max-width: 768px) { /* Breakpoint principal para smartphones */
    .servicos-wrapper {
        margin-left: 20px; /* Reduz ainda mais as margens laterais para smartphones */
        margin-right: 20px;
        gap: 15px; /* Reduz o espaçamento */
        padding: 10px;
    }

    .servico-item {
        /* Em smartphones, 1 item por linha, ocupando quase toda a largura */
        flex: 0 0 90%; /* Ocupa 90% da largura do wrapper */
        max-width: 90%;
        margin-left: auto; /* Centraliza o item individualmente */
        margin-right: auto;
        padding: 15px;
    }

    .servico-item-img {
        height: 50px; /* Ajusta o tamanho da imagem para smartphones */
    }

    .servico-item-txt {
        font-size: 1.2em; /* Tamanho de fonte para smartphones */
    }
}

@media (max-width: 480px) { /* Breakpoint para smartphones menores */
    .servicos-wrapper {
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }

    .servico-item {
        flex: 0 0 95%; /* Um pouco mais de largura para o item */
        max-width: 95%;
        padding: 10px;
    }

    .servico-item-txt {
        font-size: 1.1em; /* Tamanho da fonte para smartphones muito pequenos */
    }
}

/* Se você precisar de estilos específicos para cada serviço (cor diferente, etc.),
   adicione-os aqui usando as classes individuais como .servico-1, .servico-2, etc. */

.transicao-servicos-projetos {
    width: 80%;
    height: 2px;
    background-color: #ffffff; /* dourado */
    margin: 60px auto; /* espaçamento e centralização */
}


.projetos-container {
    text-align: center;
    margin-top: 50px;

    background-color: #333; /* Fundo da div é preto */
    color: white; /* Cor do texto dentro da div */

    padding: 40px 20px; /* Padding interno para o conteúdo */
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho */
    position: relative; /* ESSENCIAL para posicionar o pseudo-elemento */
    overflow: hidden; /* ESSENCIAL para esconder o que transborda do pseudo-elemento */
    /* Não colocamos border-radius aqui, ele será no pseudo-elemento */
}

    .projetos-container::after {
        content: ''; /* Conteúdo vazio para pseudo-elemento */
        position: absolute; /* Posição absoluta em relação ao .projetos-container */
        /* Posição no canto superior esquerdo e inferior direito */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Ocupa 100% da div */

        background-color: #202020; /* A cor do "recorte" */
        /* Aplicando os arredondamentos. Note a ordem:
       top-left | top-right | bottom-right | bottom-left
       Para o superior esquerdo e inferior direito brancos: */
        /*border-top-left-radius: 125px;*/
        border-bottom-right-radius: 125px;
        /* z-index negativo para que ele fique por trás do conteúdo da div */
        z-index: 1; /* Valor menor que o z-index do conteúdo se necessário */
    }

    .projetos-titulo {
        position: relative;
        color: #cccccc;
        font-size: 2.8rem;
        text-align: center;
        margin-bottom: 100px;
        display: inline-block;
        padding: 10px 20px;
    }
        .projetos-titulo::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: rgb(194, 146, 56);
        }
    .projetos-container h2,
    .projetos-container .projetos-imagens {
        position: relative; /* Necessário para que eles fiquem acima do ::after */
        z-index: 2; /* Um z-index maior que o do ::after */
    }

.projeto-blocow{
    background-color: white;
    margin-bottom: 100px;
}

.projetos-imagens {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.projeto-botao {
    text-decoration: none;
    display: block; /* Para o link ocupar o espaço do card */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adiciona transição para sombra também */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra inicial */
    border-radius: 8px; /* Borda arredondada no link/card */
    overflow: hidden; /* Garante que o conteúdo não vaze da borda arredondada */
    width: 350px; /* Largura do card, ajuste conforme necessário */
    height: 300px;
}

    .projeto-botao:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra mais forte no hover */
    }

.projeto-descricao {
    font-size: 2.1em; /* Tamanho da fonte menor para a descrição */
    color: white; /* Cor mais suave para a descrição */
    margin-top: 0; /* Remove margem superior padrão do parágrafo */
    line-height: 1.4; /* Espaçamento entre as linhas para melhor leitura */
}

.projeto-descricaow {
    font-size: 2.1em; /* Tamanho da fonte menor para a descrição */
    color: black; /* Cor mais suave para a descrição */
    margin-top: 0; /* Remove margem superior padrão do parágrafo */
    line-height: 1.4; /* Espaçamento entre as linhas para melhor leitura */
}
/* Removemos o .projeto-item antigo e vamos focar no .projeto-botao como o card visual */
/* O .projeto-item interno ainda existe, mas apenas como um wrapper para posicionamento */
.projeto-item {
    position: relative; /* Pai para posicionamento absoluto do texto */
    width: 100%; /* Ocupa 100% da largura do .projeto-botao */
    height: 275px; /* Altura do card, ajuste aqui */
    display: flex; /* Mantém flexbox para centralizar conteúdo interno */
    flex-direction: column; /* Conteúdo em coluna */
    justify-content: center; /* Centraliza verticalmente o texto (se não for absoluto) */
    align-items: center; /* Centraliza horizontalmente o texto (se não for absoluto) */
}


    .projeto-item img {
        width: 100%; /* Imagem preenche 100% da largura do .projeto-item */
        height: 100%; /* Imagem preenche 100% da altura do .projeto-item */
        object-fit: cover; /* Garante que a imagem preencha sem distorcer */
        display: block; /* Remove possíveis espaços extras abaixo da imagem */
        filter: brightness(0.8); /* Escurece um pouco a imagem para o texto se destacar */
        transition: filter 0.3s ease; /* Transição suave para o efeito de escurecimento */
    }

.projeto-botao:hover .projeto-item img {
    filter: brightness(0.6); /* Escurece mais no hover para realçar o texto */
}

.projeto-titulo {
    text-align: center;
    font-size: 1.2em;
    color: #fff;
    padding: 20px 15px; 
    border-radius: 5px;
    margin-top: 10px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.projeto-titulow {
    text-align: center;
    font-size: 1.2em;
    color: black;
    padding: 20px 15px;
    border-radius: 5px;
    margin-top: 10px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.saiba-mais-label {
    position: absolute;
    top: 50%;
    left: 28%;
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    border: 3px solid white;
}

@media (max-width: 992px) { /* Para tablets e desktops menores */
    .projetos-container {
        padding: 30px 15px; /* Reduz padding */
        margin-top: 30px; /* Reduz margens */
        margin-bottom: 30px;
    }

        .projetos-container::after {
            border-bottom-right-radius: 50px;
        }

        .projetos-container h2 {
            font-size: 2.2rem; /* Reduz o tamanho do título */
            margin-bottom: 20px;
        }

    .projetos-imagens {
        gap: 15px; /* Reduz o espaçamento entre cards */
    }

    .projeto-botao {
        width: calc(50% - 10px); /* Dois cards por linha, ajustado para o novo gap */
        height: 250px; /* Ajusta a altura dos cards */
    }

    .projeto-titulo {
        font-size: 1.3em; /* Reduz o tamanho do título do projeto */
        padding: 6px 12px;
        bottom: 10px; /* Ajusta a posição do título */
    }

    .projeto-descricao {
        font-size: 0.9em; /* Reduz o tamanho da descrição */
        bottom: 5px; /* Ajusta a posição da descrição */
    }
}

@media (max-width: 768px) { /* Para smartphones (um card por linha) */
    .projetos-container {
        padding: 20px 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .projetos-container::after {
            border-bottom-right-radius: 50px;
        }

        .projetos-container h2 {
            font-size: 1.8rem;
            margin-bottom: 15px;
        }

    .projetos-imagens {
        flex-direction: column; /* Empilha os cards verticalmente */
        align-items: center; /* Centraliza os cards empilhados */
        gap: 20px; /* Espaçamento entre os cards empilhados */
    }

    .projeto-botao {
        width: 90%; /* Ocupa a maior parte da largura da tela */
        max-width: 380px; /* Garante que não fique muito largo em telas maiores de celular */
        height: 280px; /* Ajusta a altura para mobile */
        margin: 0 auto; /* Centraliza o card individualmente */
    }

    .projeto-titulo {
        font-size: 1.2em;
        padding: 8px 15px;
        bottom: 15px;
    }
}

@media (max-width: 480px) { /* Para smartphones muito pequenos */
    .projetos-container {
        padding: 15px 5px;
    }

        .projetos-container::after {
            border-bottom-right-radius: 50px;
        }

        .projetos-container h2 {
            font-size: 1.5rem;
        }

    .projeto-botao {
        height: 250px;
    }

    .projeto-titulo {
        font-size: 1.1em;
        padding: 5px 10px;
        bottom: 10px;
    }

    .projeto-descricao {
        font-size: 0.8em;
    }
}

.atendimento-container {
    position: relative;
    display: flex; /* Usa Flexbox para colocar imagem e conteúdo lado a lado */
    align-items: center; /* Centraliza verticalmente a imagem e o conteúdo */
    gap: 30px; /* Espaço entre a imagem e o conteúdo */
    padding: 40px; /* Espaçamento interno no contêiner */
    background-color: #333; /* Cor de fundo para a seção, ajuste se precisar */
    color: #cccccc; /* Cor padrão para o texto dentro deste container */
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas menores */
    justify-content: center; /* Centraliza os itens quando eles quebram a linha */
    z-index: 2;
    border-top-left-radius: 125px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.atendimento-container::after {
    content: ''; /* Conteúdo vazio */
    position: relative; /* Posição absoluta em relação ao .servicos-titulo-container */
    /* Ocupa 100% da div */
    width: 100%;
    height: 100%;
    background-color: #202020; /* A cor do "recorte" branco */
    /* Aplicando o arredondamento SOMENTE no canto superior esquerdo */
    border-top-left-radius: 125px; /* Raio de arredondamento. Ajuste este valor se 125px for muito */
    /* Garante que o pseudo-elemento fique atrás do conteúdo */
    z-index: 1;
}

.atendimento-imagem {
    flex-shrink: 0; /* Impede que a imagem encolha */
    max-width: 40%; /* Largura máxima da imagem em telas maiores */
    /* Você pode definir uma largura fixa aqui se preferir: width: 300px; */
}

    .atendimento-imagem img {
        max-width: 100%; /* Garante que a imagem seja responsiva */
        height: auto; /* Mantém a proporção da imagem */
        border-radius: 8px; /* Cantos arredondados para a imagem */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
    }

.atendimento-conteudo {
    flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
    max-width: 50%; /* Largura máxima do conteúdo em telas maiores */
    text-align: left; /* Alinha o texto à esquerda por padrão */
}

.atendimento-box {
    background-color: #cccccc;
    border-radius: 16px;
    text-align: center;
    padding: 0; /* zera padding externo, pois o conteúdo tem padding próprio */
    box-sizing: border-box;
    overflow: hidden; /* para o border-radius funcionar perfeitamente */
}


.atendimento-titulo {
    font-size: 2.2rem;
    color: #202020;
    margin: 0;
    padding: 1.4rem;
    text-align: center;
    background-color: #cccccc;
    width: 100%; /* ocupa toda a largura da box */
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* sombra leve embaixo */
    border-radius: 12px 12px 0 0; /* apenas o topo arredondado */
}

.atendimento-descricao {
    font-size: 1.4rem;
    color: #202020;
    margin: 0;
    padding: 25px 20px 10px 20px;
    text-align: center;
    line-height: 1.6;
}

.atendimento-cidades {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.2rem;
    color: #333333;
}

.btn-orcamento {
    display: inline-block;
    margin: 30px auto 0 auto;
    background-color: rgb(194, 146, 56); /* dourado */
    color: white;
    border: 3px solid rgb(194, 146, 56); /* igual ao fundo */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hover */
.btn-orcamento:hover {
    background-color: white;
    color: rgb(194, 146, 56);
    border-color: rgb(194, 146, 56);
    transform: translateY(-2px);
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .atendimento-titulo {
        font-size: 2.2rem;
    }

    .atendimento-descricao {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .atendimento-container {
        flex-direction: column; /* Empilha a imagem e o conteúdo em telas menores */
        text-align: center; /* Centraliza o texto quando empilhado */
        padding: 30px 20px;
    }

    .atendimento-imagem,
    .atendimento-conteudo {
        max-width: 100%; /* Ocupa toda a largura disponível */
    }

        .atendimento-imagem img {
            width: 80%; /* Ajuste a largura da imagem para telas menores */
            margin: 0 auto; /* Centraliza a imagem */
        }

    .atendimento-titulo {
        font-size: 2rem;
    }

    .atendimento-descricao {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .atendimento-titulo {
        font-size: 1.8rem;
    }

    .atendimento-descricao {
        font-size: 1.2rem;
    }

    .btn-orcamento {
        padding: 12px 25px;
        font-size: 1rem;
    }
}