body {
    font-family: Arial, sans-serif;
}

header {
    background-color: #1E90FF;
}


/* Sticky Menu MEnu----------------------------------------------- */
.sticky-top {
    position: sticky !important; /* Asegura que sticky no sea sobrescrito */
    top: 0; /* Fija el menú en la parte superior */
    z-index: 1030; /* Asegúrate de que esté por encima del contenido */
}

#menu {
    box-shadow: 0 4px 2px -2px gray; /* Mejora la visibilidad */
    background-color: #fff; /* Asegúrate de que el fondo sea sólido */
    z-index: 1030; /* Por encima del contenido principal */
}

.container {
    overflow: visible !important;
}

/* Efecto de zoom para los botones */
.zoom-button {
    transition: transform 0.3s ease-in-out;
}

.zoom-button:hover {
    transform: scale(1.1); /* Aumenta el tamaño del botón al 110% cuando se pasa el mouse */
}

/* Efecto de subrayado verde en enlace activo */
.nav-link.active {
    border-bottom: 3px solid #1E90FF; /* Verde */
}

/* Efecto hover en los enlaces */
.nav-link:hover {
    border-bottom: 3px solid #1E90FF;
    transition: border-bottom 0.3s ease;
}

/* Color del texto en navbar cuando está scrolleado */
.navbar.scrolled .nav-link {
    color: #1E90FF;
}

/* Colores del submenú */
.dropdown-menu {
    background-color: #f1f4f7;
}
.dropdown-item:hover {
    background-color: #1E90FF;
    color: #fff;
}

/* Ocultar subrayado de dropdown item */
.dropdown-item {
    border-bottom: none;
}

/* Iconos en el menú */
.navbar-nav i {
    margin-right: 8px;
}

/* --------------------------BANNER---------------------------------------*/
/* Estilo para los botones de control (anterior y siguiente) con color personalizado */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    background-color: rgb(215, 240, 219); /* Cambia este valor al color que prefieras */
    border-radius: 50%; /* Opcional: redondear los bordes del botón */
    width: 50px; /* Ajusta el tamaño del icono */
    height: 50px; /* Ajusta el tamaño del icono */
}

.carousel-control-prev, 
.carousel-control-next {
    z-index: 10; /* Asegúrate de que los botones estén por encima del contenido */
    opacity: 1; /* Asegura que los botones sean completamente visibles */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgb(30, 144, 255); /* Haz que los iconos cambien de color al pasar el mouse */
}

.carousel-control-prev, 
.carousel-control-next {
    top: 50%; /* Centra verticalmente los botones */
    transform: translateY(-50%);
}

/* Indicadores inactivos (los que no están seleccionados) */
.carousel-indicators [data-bs-target] {
    background-color: skyblue; /* Color verde para los indicadores inactivos */
}

/* Indicador activo (el que está seleccionado actualmente) */
.carousel-indicators .active {
    background-color: darkblue; /* Un tono más oscuro de verde para el indicador activo */
    border-color: rgb(244, 248, 245); /* Opcional: bordes blancos alrededor del indicador activo */
}

/* ---------------------------------------------------------------*/
h2 {
    font: 40pt 'montserrat';
    margin: 30px;
    color: white;
    text-shadow: 2px 2px 9px #1E90FF  ;
    font-weight: bolder;
}
.p1{
    font: 20pt 'montserrat';
    margin: 30px;
    color: white;
    text-shadow: 3px 2px 6px #1E90FF  ;
    font-weight: bolder;
    /*text-shadow: 2px 2px 4px rgb(5, 78, 44);
    font-size: 15pt;
    margin-bottom: 20px;*/
}

.caja:hover {
    background-color: skyblue;
    color: rgb(134, 214, 151);

    transition: 2s ease;
}


.card {
    margin-bottom: 20px;
    box-shadow: 0 0 10px black;
}

footer {
    background-color: #1E90FF ;
}

/* icono de deplazar hacia arriba */
#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: none; /* Oculto inicialmente */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s, transform 0.3s;
}

#scrollToTop:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}