/* Estilos personalizados para la galería deslizable */
.carousel {
    margin: 20px auto; /* Margen superior e inferior */
}

/* Estilo para los botones de navegación */
.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo de los controles */
    border: none; /* Sin borde */
    position: absolute;
    top: 50%; /* Coloca los botones en el centro vertical */
    transform: translateY(-50%); /* Alinea los botones verticalmente */
    width: 40px; /* Ancho de los botones */
    height: 40px; /* Alto de los botones */
    border-radius: 50%; /* Hace que los botones sean redondos */
}

/* Estilo para los iconos de los botones de navegación */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* Elimina la flecha por defecto */
    color: black; /* Color de las flechas */
    font-size: 24px; /* Tamaño de la flecha */
    line-height: 40px; /* Centra la flecha verticalmente */
}

/* Estilo al pasar el mouse sobre los botones de navegación */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Cambia el color al pasar el mouse */
}

/* Espaciado entre las imágenes y los botones de navegación */
.carousel-item {
    padding: 20px; /* Agrega espacio alrededor de las imágenes */
}

.carousel-image {
    width: 800px; /* El ancho que desees para las imágenes */
    height: 600px; /* La altura que desees para las imágenes */
    object-fit: contain; /* Esto mantendrá la proporción de la imagen y rellenará el espacio designado */
}
  

/* Estilo para el carrusel de servicios */
#serviceCarousel {
    margin-top: 20px; /* Espacio superior */
    border: 2px solid #ccc; /* Borde alrededor del carrusel */
    padding: 20px; /* Espacio interior */
    background-color: #f5f5f5; /* Fondo del carrusel */
    max-width: 800px; /* Ancho máximo del carrusel */
    margin-left: auto;
    margin-right: auto;
    width: 480px; /* Altura del carrusel, ajusta según tus necesidades */
    height: 300px;
  }
  
  /* Estilo para cada elemento de servicio */
  .carousel-inner .carousel-item ul.list-group {
    padding: 10px; /* Espacio interior de la lista */
    background-color: #FFD700; /* Fondo de cada servicio */
    border: 1px solid #ddd; /* Borde alrededor de cada servicio */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    margin: 14; /* Margen cero para ajuste completo */
    width: 400px; /* Ajuste al 100% del ancho del carrusel */
  }
  
  /* Estilo para los controles de navegación del carrusel */
  .carousel-control-prev, .carousel-control-next {
    color: #333; /* Color de la flecha de navegación */
  }
  
  .carousel-control-prev:hover, .carousel-control-next:hover {
    color: #000; /* Color de la flecha de navegación al pasar el mouse */
  }
  
  /* Estilo para el indicador de servicio actual (punto activo) */
  .carousel-indicators li {
    background-color: #333; /* Color del punto de navegación activo */
  }
  
  /* Estilo para los puntos de navegación inactivos */
  .carousel-indicators li:not(.active) {
    background-color: #ccc; /* Color de puntos inactivos */
  }