/* Estilos específicos para la página de Tub Refinishing */

.tub-refinishing-page .container {
    /* Estilos específicos si son necesarios */
}

.tub-refinishing-page h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

/* Estilos genéricos para imagen y descripción (puedes moverlos a main.css si los usas en todas las páginas de servicio) */
.service-image-container {
    width: 80%; /* Reduce el contenedor de la imagen al 80% */
    margin: 0 auto 30px auto; /* Centra el contenedor y añade margen inferior */
    display: block; /* Asegura que se comporte como bloque */
}

.service-image-container img {
    display: block; /* Para que los márgenes y bordes funcionen correctamente */
    width: 100%; /* La imagen ocupa el 100% de su contenedor */
    height: auto; /* Mantiene la proporción */
    border: 1px solid #cccccc; /* Borde gris claro */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15); /* Sombra suave */
    border-radius: 4px; /* Bordes ligeramente redondeados (opcional) */
}

.service-description {
    max-width: 800px; /* Limita el ancho del texto para mejor legibilidad */
    margin: 0 auto; /* Centra el bloque de descripción */
    color: #555;
    line-height: 1.7;
}

.service-description h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #444;
    font-size: 1.5em;
}

.service-description ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 10px;
}

.service-description li {
    margin-bottom: 8px;
}

/* Responsive (ajusta según necesites) */
@media (max-width: 767.98px) {
    .service-image-container {
        width: 95%; /* Más ancho en pantallas pequeñas */
    }
    .service-description {
        padding: 0 15px; /* Añade padding lateral en móviles */
    }
}