/* Responsive CSS para a página de serviços */

/* Estilos base para as imagens de serviço */
.service-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Media queries para dispositivos móveis */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important; /* Força uma coluna em telas menores */
    }
    
    .service-image img {
        height: 180px; /* Altura ligeiramente menor em telas menores */
    }
}

/* Para telas muito pequenas */
@media (max-width: 480px) {
    .service-image img {
        height: 160px; /* Altura ainda menor em telas muito pequenas */
    }
}

/* Garantir que as imagens preencham o espaço disponível */
.service-image {
    overflow: hidden; /* Impede que a imagem vaze para fora do container */
    border-radius: 8px;
}

/* Efeito de zoom suave ao passar o mouse */
.service-card:hover .service-image img {
    transform: scale(1.05);
}