.service-container {
  display: flex;
  align-items: flex-start;
  background-image: url('images/FONDOCATALOGO.png');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center top;
	}
	
	.service-list {
		  flex-grow: 1;
		  align-items: left;
	}
	
	.service {
		  display: flex;
		  align-items: left;
		  border: 1px solid #ff6600;
		  border-radius: 3px;
		  padding: 10px;
		  width: 350px;
		  height: 60px;
		  margin: 10px 0;
		  background-color: #f5f5f5;
		  cursor: pointer;
		  transition: background-color 0.3s; /* Transición para cambiar el color de fondo */
	}
	
	.service:hover, .service.selected {
		  background-color: #209fff; /* Fondo azul para hover y seleccionado */
		  color: #000000; /* Texto blanco para hover y seleccionado */
	}
	
		.service img {
		  width: 32px;
		  height: 32px;
		  margin-right: 10px;
		}
	
		.service-description img {
		  width: 32px;
		  height: 32px;
		  margin-right: 10px;
		}
		.service-description {
		  display: none;
		  border: 1px solid #200b94;
		  border-radius: 5px;
		  padding: 10px;
		  width: 100%;
		  background-color: #fff;
	}
	.service-title {
		display: flex; /* Usa flexbox para controlar la disposición */
		align-items: left; /* Centra verticalmente los elementos */
	}
	
	.service-title img {
		max-width: 100px; /* Ajusta el ancho máximo de la imagen */
		margin-right: 10px; /* Ajusta la separación entre la imagen y el título */
	}
	
	.close-button {
		  display: block;
		  text-align: right;
		  margin-right: 10px;
		  cursor: pointer;
		  color: #000; /* Color de texto negro */
		  transition: color 0.3s; /* Transición para cambiar el color de texto */
	}
	
	.close-button:hover {
		  color: #ff0000; /* Color de texto rojo en hover */
	}
	.service-container {
		display: flex;
  align-items: flex-start;
  background-image: url('images/FONDOCATALOGO.png');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center center;
}
	
@media screen and (max-width: 767px) {
  /* Cambios específicos para dispositivos móviles */
  .service-container {
    display: block; /* Cambia la dirección a bloque para dispositivos móviles */
    padding: 10px; /** Modifica el espacio alrededor del contenedor */
  }

  .service {
    cursor: pointer; /* Añadir puntero en dispositivos móviles */
  }
 
  .service-description {
    display: block; /* Mostrar descripciones debajo de los botones en dispositivos móviles */
    background-position: center center; /*

  
  /* Agrega otros cambios específicos para dispositivos móviles aquí */
}
}