.no-scroll {
    overflow: hidden; /* Evita que la página se desplace */
    height: 100%; /* Asegúrate de que ocupe todo el alto */
}

/* General Styles */
@font-face {
    font-family: 'Century Gothic';
    src: local('Century Gothic'), local('CenturyGothic'), url('https://example.com/path-to-century-gothic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Reem Kufi', 'Century Gothic', Arial, sans-serif;
    background-color: #ffffff;
    color: #11263b;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position:relative;
}

header {
    background-color: #11263b;
    height: 65px;
    z-index: 1001;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px); /* Se mueve 20px hacia arriba */
        opacity: 0; /* Comienza transparente */
    }
    to {
        transform: translateY(0); /* Regresa a su posición original */
        opacity: 1; /* Se vuelve completamente opaco */
    }
}

.navbarx {
    animation: slideDown 0.5s ease forwards; /* Aplica la animación */
}


.fondo-image {
    background: url('../images/Fondo2.jpeg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh; /* Asegura que cubra toda la pantalla */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1; /* Asegura que este div esté en el fondo */
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%); /* Comienza fuera de la pantalla a la derecha */
        opacity: 0; /* Inicia invisible */
    }
    to {
        transform: translateX(0); /* Termina en su posición original */
        opacity: 1; /* Visible */
    }
}

.hero-image {
    background: url('../images/Portada_linkedin.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 28vh; /* Tamaño ajustado según tus necesidades */
    position: absolute; /* Asegura que esté sobre .fondo-image */
    top: 55%; /* Centra verticalmente */
    transform: translate(-50%, -50%); /* Ajusta el centro del elemento */
    z-index: 2; /* Asegura que este div esté sobre .fondo-image */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hero-image.animated {
    animation: slideIn 1s ease-out forwards;
    opacity: 1;
}

body.scrolled .fondo-image {
    opacity: 0; /* Ajusta el nivel de desvanecido */
}

main {
    padding-top: 2rem;
}

h1, h2 {
    color: #224478;
}

footer {
    /*position: fixed; 
    width: 100%;
    bottom: 0;*/
    background-color: #11263b;
    color: #ffffff;
    text-align: center;
    padding: 0.5rem 0;

    z-index: 1001;
}

.navbar-brand img {
    max-height: 80px; /* Ajusta la altura máxima según sea necesario */
    width: auto; /* Asegura que la proporción de la imagen se mantenga */
}

.bg-custom {
    background-color: #11263b; /* Elige el color que prefieras */
    color: #ffffff; /* Color del texto, ajusta según sea necesario */
}

.overlay {
    position: fixed; /* Fija el elemento sobre toda la página */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.004); /* Fondo semi-transparente (negro con 50% de opacidad) */
    z-index: 1000; /* Asegura que esté por encima de todo el contenido */
}

.carousel-item img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    margin: 0 auto;
}

.carousel-caption {
    background-color: #d3bc5f;
    padding: 10px;
    border-radius: 10px;
    margin-top: 20px;
}

.carousel-caption h5 {
    font-size: 1.25rem;
    margin: 0;
}
.carousel-caption p {
    font-size: 0.85rem; /* Tamaño más pequeño para el párrafo */
    margin: 0; /* Quitar márgenes para evitar desbordamientos */
}

.carousel-inner {
    background-color: #11263b; /* Color de fondo del carrusel */
    padding: 20px 0;
    text-align: center; /* Asegura que el contenido esté centrado */
}

#licenciadosCarousel {
    width: 100vw; /* Hace que el carrusel ocupe todo el ancho de la ventana */
    left: 50%; /* Centra el carrusel horizontalmente */
    transform: translateX(-50%); /* Corrige el centrado */
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.col-6 {
    padding-right: 0;
    padding-left: 0;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.card {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo de la tarjeta */
    
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 300px;
    max-width: 100%;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-5px); /* Efecto de levantamiento al pasar el mouse */
}

h3{
    background-color: #11263b;
    color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 10px;
}

.titulo-drop {
    font-size: larger;
}
.topico-drop {
    font-size: medium;
}