.navbar-dark .navbar-nav .nav-link {
    color: #0e335c; /* Cambia el color del texto de los enlaces */
    font-weight: bold; /* Hace que el texto sea grueso */
    font-size: 1.1rem; /* Aumenta el tamaño de la fuente */
    position: relative; /* Necesario para posicionar el borde */
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: rgb(27, 56, 121); /* Cambia el color al pasar el mouse sobre los enlaces */
}

/* Cambiar el color del enlace activo */
.navbar-dark .navbar-nav .nav-link.active {
    color: #cd252c; /* Cambia el color del texto de los enlaces activos a gris claro */
}


/* Agregar borde inferior a los enlaces */
.navbar-dark .navbar-nav .nav-link::after {
    content: ''; /* Necesario para mostrar el borde */
    position: absolute; /* Posicionamiento absoluto */
    left: 0;
    right: 0;
    bottom: 0; /* Colocar el borde en la parte inferior */
    height: 2px; /* Grosor del borde */
    background-color: #cd252c; /* Color del borde */
    transform: scaleX(0); /* Inicialmente oculto */
    transition: transform 0.3s ease; /* Transición suave */
}

.navbar-dark .navbar-nav .nav-link:hover::after {
    transform: scaleX(1); /* Mostrar el borde al pasar el mouse */
}

.btn-success {
    background-color: #28a745; /* Estilo para el botón de inscripción */
    border: 1px solid #28a745; /* Borde del mismo color que el fondo */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    display: flex; /* Centrar el icono */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.btn-danger {
    background-color: #dc3545; /* Estilo para el botón de inscripción */
    border: 1px solid #dc3545; /* Borde del mismo color que el fondo */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    display: flex; /* Centrar el icono */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

/* Estilos para los iconos */
.btn i {
    font-size: 32px; /* Aumentar el tamaño del icono */
    color: white; /* Color del icono (ajusta según sea necesario) */
}

/* Estilo personalizado para el icono del botón de navegación */
.navbar-toggler {
    border: 4px solid #0e335c !important; /* Cambia el color del contorno a rojo */
}
.navbar-toggler:focus {
    outline: none; /* Elimina el contorno del botón al hacer clic */
}

.navbar-toggler-icon {
    background-color: #0e335c; /* Cambia el color del icono a rojo */
    border-color: #0e335c;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    background-color: red; /* Asegúrate de que las barras del icono también sean rojas */
}


/* Estilos generales del carrusel */
.carousel-caption {
    position: absolute;
    top: 50%;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.2); /* Fondo azul semitransparente */
    padding: 20px;
    border-radius: 10px;
    color: white;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 80%; /* Para limitar el ancho del caption */
  }
  
  /* Muestra el texto con animación suave cuando está activo */
  .carousel-item.active .carousel-caption {
    opacity: 1;
    transform: scale(1); /* Elimina la transformación de la posición horizontal */
  }
  
  /* Animación de entrada */
  .animated-text {
    color: white;
  }
  
  /* Alineación específica para el segundo ítem (izquierda) */
  .caption-left {
    left: 10%;
    right: auto;
    top: 50%;
    transform: translateY(-50%); /* Mantén solo la transformación vertical */
    text-align: left;
  }
  
  /* Alineación específica para el tercer ítem (derecha) */
  .caption-right {
    right: 10%;
    left: auto;
    top: 50%;
    transform: translateY(-50%); /* Mantén solo la transformación vertical */
    text-align: right;
  }

  /* Asegurar que el contenedor del carrusel se ajuste */
.carousel {
    width: 100%;
    max-width: 100%; /* Aseguramos que el carrusel ocupe todo el ancho disponible */
}

/* Asegurar que las imágenes sean completamente responsivas */
.carousel-item img {
    width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 580px) {
    .carousel-caption {
        font-size: 1.4rem; /* Reducimos el tamaño del texto en pantallas pequeñas */
        padding: 10px; /* Ajuste de padding para mejor visibilidad en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .carousel-caption {
        font-size: 1.2rem; /* Tamaño aún más pequeño para dispositivos móviles */
    }
}

@media (max-width: 400px) {
    .carousel-caption {
        font-size: 1rem; /* Último ajuste de tamaño para pantallas muy pequeñas */
    }
    
    /* Ajustamos el padding del carrusel para pantallas pequeñas */
    .carousel-item img {
        width: 100%;
        height: auto;
    }
}