.services-grid-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 30px;
  position: relative;
}

.service-box {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
}

.central-image {
  grid-column: 2;
  grid-row: 2;
  z-index: 10;
}

.color-white
{
    background-color: white !important;
}

.section_contacto {
			position: relative;
			overflow: hidden;
			min-height: 100vh;
		}

		.map-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			overflow: hidden;
		}

		.map-background iframe {
			width: 100%;
			height: 100%;
			border: 0;
		
			pointer-events: none; /* Esto evita que el usuario interactúe con el mapa */
		}

		.content-overlay {
			position: relative;
			z-index: 2;
			background-color: rgba(255, 255, 255, 0.85); /* Fondo blanco semitransparente */
			padding: 2rem;
	
		}


        .custom-btn {
    background-color: #0d6efd;  /* Color azul */
    color: white;               /* Texto blanco */
    border-radius: 0;           /* Sin bordes redondeados (rectangular) */
    padding: 12px 30px;         /* Espaciado interno */
    text-transform: uppercase;  /* Texto en mayúsculas */
    font-weight: 600;           /* Negrita para el texto */
    border: none;               /* Eliminar borde */
    transition: all 0.3s ease;  /* Animación suave para el hover */
  }

  /* Estilo para cuando el usuario pasa el mouse por encima */
  .custom-btn:hover {
    background-color: #0b5ed7; /* Color ligeramente más oscuro para el hover */
    text-decoration: none;      /* Elimina el subrayado si existe */
  }