/* Estilos base para los enlaces */
    .navbar .nav-link {
        position: relative;
        text-decoration: none;
        color: #000; /* Color del texto */
        transition: all 0.5s ease; /* Animación suave */
    }

    /* Efecto de borde inferior para el enlace activo */
    .navbar .nav-link.active {
        border-bottom: 3px solid rgb(0, 0, 0); /* Borde inferior negro */
    }

    /* Animación al pasar el mouse (opcional) */
    .navbar .nav-link:hover {
        border-bottom: 3px solid rgba(0, 0, 0, 0.5); /* Borde inferior más tenue al pasar el mouse */
    }

  /* Estilos personalizados para el slider */

  /* Contenedor principal */
  .gallery-container {
    position: relative;
    overflow: hidden;
  }

  /* Ajustes adicionales para las miniaturas */
  .thumbnail-container {
    width: 100%;
    height: 250px; /* Altura fija para miniaturas */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .thumbnail-img {
    width: auto;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .thumbnail-container:hover {
    transform: translateY(-5px);
  }

  .thumbnail-container:hover .thumbnail-img {
    transform: scale(1.05);
  }

  /* Indicadores rectangulares */
  .rect-indicator {
    width: 30px;
    height: 5px;
    border: none;
    background-color: #000000;
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .rect-indicator.active {
    opacity: 1;
    width: 40px;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 15px;
    background-size: 50%;
  }

  @media (max-width: 768px) {
    .thumbnail-container {
      height: 150px;
    }

    .col-md-4 {
      margin-bottom: 15px;
    }
  }