/* Correções responsivas gerais para o site 10afionotavel */

/* Regras para todos os tamanhos de tela */
* {
    box-sizing: border-box !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin-left: 0 !important;
}
.container {
    width: 100% !important;
    max-width: 980px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tablets e dispositivos menores */
@media screen and (max-width: 768px) {
    h1, h2, h3 {
        text-align: center !important;
    }
    
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    
    /* Ajustes para o menu responsivo */
    .menu {
        width: 100% !important;
    }
    
    /* Ajustes para os cards e grids */
    .servicos-grid, 
    .client-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .servico-card, 
    .client-card {
        padding: 20px !important;
    }
    
    /* Ajustes para o footer */
    .footer-content {
        flex-direction: column !important;
    }
    
    .footer-section {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* Smartphones */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px !important;
    }
    
    h1 {
        font-size: 1.8em !important;
    }
    
    h2 {
        font-size: 1.3em !important;
    }
    
    h3 {
        font-size: 1.2em !important;
    }
    
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Reduzir padding em elementos para economizar espaço */
    .servico-card, 
    .client-card,
    .info-contacto, 
    .formulario-contacto {
        padding: 15px !important;
    }
    
    /* Ajustar botões para telas pequenas */
    .btn-primario, 
    .btn-secundario, 
    .btn-enviar {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1em !important;
    }
    
    /* Ajustar logo para telas pequenas */
    .logo img {
        width: 200px !important;
    }
}