/* --- Sección Servicios (Con efecto Parallax) --- */
.services-section {
  /* CAMBIOS CLAVE PARA EL PARALLAX */
  background: url("../img/Cristal03.png") no-repeat center center/cover; /* Reemplaza con una imagen adecuada */
  background-attachment: fixed; /* Esto es lo que crea el efecto parallax */

  /* Mantener estas propiedades existentes */
  padding: 60px 5%;
  text-align: center;
  color: var(
    --color-text-light
  ); /* Asegura que el texto sea legible sobre el nuevo fondo */

  /* Asegúrate de que la sección tenga suficiente altura para que se note el efecto */
  min-height: 500px; /* Ajusta según sea necesario */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* Necesario para el overlay */
  overflow: hidden; /* Asegura que no haya scrollbars internas si el contenido es demasiado grande */
}

.services-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    32,
    80,
    160,
    0.5
  ); /* Overlay azul semi-transparente (ajusta la opacidad si es necesario) */
  z-index: 1; /* Asegura que el overlay esté encima de la imagen de fondo */
}

/* Asegura que el contenido (h2, p, tarjetas) esté por encima del overlay */
.services-section h2,
.services-section p,
.service-cards-container,
.services-section .talk-with-us-btn {
  position: relative;
  z-index: 2; /* Mayor que el z-index del overlay */
}