/* Estilos Responsivos */
@media (max-width: 992px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
        gap: 20px; /* Espaçamento entre os serviços */
    }
}

@media (max-width: 768px) {
    .services-container {
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        padding: 0; /* Remove padding no mobile */
    }

    .icon {
        font-size: 50px; /* Tamanho do ícone ajustado */
        margin-bottom: 10px; /* Espaçamento abaixo do ícone */
    }

    .area-texto-servico {
        padding: 20px; /* Adiciona padding para melhor uso do espaço */
        width: 96%; /* Largura da div */
        padding-left: 2%; /* Padding lateral */
        padding-right: 2%; /* Padding lateral */
        box-sizing: border-box; /* Inclui padding na largura total */
        /* Removido text-align: justify */
    }

    .area-texto-servico h2 {
        font-size: 8vw; /* Aumentado para garantir destaque */
        margin-bottom: 10px; /* Espaçamento inferior */
        text-align: left; /* Alinhamento à esquerda */
    }

    .area-texto-servico h31 {
        font-size: 7vw; /* Tamanho ajustado para o h31 */
        margin-bottom: 10px; /* Espaçamento inferior */
        text-align: left; /* Alinhamento à esquerda */
    }

    .area-texto-servico h3 {
        font-size: 6vw; /* Tamanho de fonte ajustado para maior legibilidade */
        margin-bottom: 10px; /* Espaçamento inferior */
        text-align: left; /* Alinhamento à esquerda */
    }

    .area-texto-servico p {
        font-size: 5vw; /* Aumentado para facilitar a leitura */
        line-height: 1.5; /* Melhora a legibilidade do texto */
        margin-bottom: 15px; /* Espaçamento inferior */
        /* Removido text-align: justify */
    }

    .area-texto-servico ul {
        padding-left: 20px; /* Padding para a lista */
    }

    .area-texto-servico ul li {
        font-size: 5vw; /* Aumentado para garantir que os itens sejam legíveis */
        margin-bottom: 8px; /* Espaçamento inferior */
        /* Removido text-align: justify */
    }

    .area-texto-servico a.cta {
        padding: 12px 20px; /* Ajustado para facilitar o toque em botões */
        font-size: 5vw; /* Aumentado para que o texto do botão seja legível */
        background-color: #F48034; /* Cor de fundo do botão */
        color: #fff;
        border-radius: 5px; /* Bordas arredondadas */
        text-align: center; /* Centraliza o texto do botão */
        display: inline-block; /* Para respeitar o padding */
        transition: background-color 0.3s; /* Transição suave na cor de fundo */
        width: 96%; /* Largura do botão */
        padding-left: 2%; /* Padding lateral */
        padding-right: 2%; /* Padding lateral */
        box-sizing: border-box; /* Inclui padding na largura total */
    }

    .area-texto-servico a.cta:hover {
        background-color: #d76b29; /* Cor do botão ao passar o mouse */
    }

    .produto {
        flex: 1 1 100%; /* Uma coluna em telas pequenas */
        padding: 15px; /* Adiciona padding interno */
        margin-bottom: 15px; /* Espaçamento entre os produtos */
        border-radius: 8px; /* Bordas arredondadas para os produtos */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para destaque */
        transition: transform 0.3s, box-shadow 0.3s; /* Transição suave */
        width: 96%; /* Largura do produto */
        padding-left: 2%; /* Padding lateral */
        padding-right: 2%; /* Padding lateral */
        box-sizing: border-box; /* Inclui padding na largura total */
        font-size: 1rem;
        font-weight: 300;
    }

    .produto:hover {
        transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra mais pronunciada ao passar o mouse */
    }
}

@media (max-width: 480px) {
    .banner-servicos {
        width: 100%; /* Garantindo que o banner ocupe a largura total */
        height: auto; /* Mantém a proporção no mobile */
        margin-top: 10vh; /* Espaçamento superior */
    }

    .area-texto-servico {
        width: 96%; /* Largura da div */
        padding: 2%; /* Padding lateral */
        margin: 0 auto; /* Centraliza a div */
        box-sizing: border-box; /* Inclui padding na largura total */
        /* Removido text-align: justify */
        background-color: #; /* Verifique a cor */
        border-radius: 8px; /* Bordas arredondadas */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    }

    .area-texto-servico h2 {
        font-size: 7vw; /* Ajusta o tamanho do título para melhor legibilidade */
        margin-bottom: 10px; /* Espaçamento inferior */
        text-align: left; /* Alinhamento à esquerda */
        color: #fff;
    }

    .area-texto-servico h31 {
        font-size: 6vw; /* Tamanho ajustado para o h31 */
        margin-bottom: 10px; /* Espaçamento inferior */
        text-align: left; /* Alinhamento à esquerda */
        color: #fff;
    }

    .area-texto-servico h3 {
        font-size: 5.5vw; /* Tamanho de fonte ajustado */
        margin-bottom: 10px; /* Espaçamento inferior */
        text-align: left; /* Alinhamento à esquerda */
        color: #fff;
    }

    .area-texto-servico p {
        font-size: 4.5vw; /* Aumentado para facilitar a leitura */
        line-height: 1.6; /* Melhora a legibilidade do texto */
        margin-bottom: 15px; /* Espaçamento inferior */
        color: #fff;
    }

    .area-texto-servico ul {
        padding-left: 20px; /* Padding para a lista */
        margin-bottom: 15px; /* Espaçamento inferior */
    }

    .area-texto-servico ul li {
        font-size: 4.5vw; /* Aumentado para garantir legibilidade */
        margin-bottom: 8px; /* Espaçamento inferior */
        /* Removido text-align: justify */
        color: #fff;
    }

    .area-texto-servico a.cta {
        padding: 12px 15px; /* Ajustado para facilitar o toque em botões */
        font-size: 4.5vw; /* Aumentado para que o texto do botão seja legível */
        background-color: #F48034; /* Cor de fundo do botão */
        color: #fff;
        border-radius: 5px; /* Bordas arredondadas */
        text-align: center; /* Centraliza o texto do botão */
        display: inline-block; /* Para respeitar o padding */
        transition: background-color 0.3s; /* Transição suave na cor de fundo */
        width: 96%; /* Largura do botão */
        margin: 0 auto; /* Centraliza o botão */
        box-sizing: border-box; /* Inclui padding na largura total */
    }

    .area-texto-servico a.cta:hover {
        background-color: #d76b29; /* Cor do botão ao passar o mouse */
    }
}