.custom-navbar {
    background-color: transparent !important;
    box-shadow: none !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size:larger;
}

.navbar-nav .nav-item {
    margin: 0 25px;
}

.nav-link-custom {
    color: black !important;
    font-weight: 500;
    transition: color 0.3s ease;
}


    .nav-link-custom:hover {
        color: #0a9ad2 !important; /* o el color que prefieras */
    }


.ms-custom {
    margin-left: 4rem;
}

@media (max-width: 991px) {
    .ms-custom {
        margin-left: 0;
    }
}

.custom-navbar {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 1rem 0;
    transition: all 0.4s ease-in-out;
}

    .custom-navbar.scrolled {
        background-color: rgba(0, 0, 128, 0.3);
        
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(25px);
        padding: 0.3rem 1rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        border-radius: 1rem;
        margin: 0.5rem auto;
        width: calc(100% - 2rem);
        transition: all 0.4s ease-in-out;
    }

/* Color base (cuando no hay scroll) */
.nav-link-custom {
  
    transition: color 0.3s ease-in-out;
}

/* Cambia color cuando el navbar tiene clase .scrolled */
.custom-navbar.scrolled .nav-link-custom {
    color: #be4208 !important; /* blanco brillante */
}

    /* También cambia el color de los íconos (Font Awesome) */
    .custom-navbar.scrolled .nav-link-custom i {
        color: #be4208;
    }

.ms-custom-4cols {
    margin-left: 12%; 
}


/*sección para la primer card de index*/
.card-hover {
    transition: transform 0.3s ease;
}

    .card-hover:hover {
        transform: scale(1.01);
    }

.img-hover img {
    transition: transform 0.5s ease;
}

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

.fade-slide {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.card-hover:hover .fade-slide {
    opacity: 1;
    transform: translateY(0);
}