/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
div {
    color: black;
}

/* Importar Font Awesome para los íconos (Si no lo tienes en el Layout) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Tipografía y Colores Base */
:root {
    --c5i-primary: #004d99; /* Azul oscuro similar al footer */
    --c5i-info: #00c0f0; /* Azul claro de los íconos de servicios */
}

.text-primary {
    color: var(--c5i-primary) !important;
}

.text-info {
    color: var(--c5i-info) !important;
}

/* ======================================= */
/* 1. HERO SECTION */
/* ======================================= */

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
        max-width: 90%;
    }
    
}

@media (max-width: 576px) {
    .hero-section-c5i {
        height: auto;
        padding: 3rem 1rem;
    }

    .icons-container {
        margin-right: 7em;
        /* margin-left: -116em; */
        top: 18em !important;
        display: flex;
        margin-top: 8em;
        justify-content: center;
        gap: 1em !important;
        padding: 0 5%;
        margin-left: -58em !important;
    }

    .icon-item a {
        margin-left: 22.3em;
    }
    .circle-img {
        width: 5em !important; /* ajusta tamaño del icono en móvil */
        /*margin-left: -26em;*/
    }

    h1.display-4 {
        font-size: 2rem; /* reduce tamaño del título */
    }

    p.lead {
        font-size: 1rem;
    }
}

.hero-section-c5i {
    position: relative;
    width: 100%;
    /* Ajusta la altura para que se vea bien, usando vh o px */
    height: 50vh;
    /* Configuración de la imagen de fondo */
    background: url('../Images/image2.jpeg') no-repeat center center;
    background-size: cover;
    /* Overlay semi-transparente para mejorar la legibilidad */
    z-index: 1; /* Asegura que el contenido esté por encima */
    top: -19px;
}

    .hero-section-c5i::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background-color: rgba(0, 0, 0, 0.1);*/ /* Capa oscura (40%) */
        background-color: rgb(29 44 123 / 46%); 
        z-index: -1; /* Mantiene el overlay debajo del texto */
    }

/* ======================================= */
/* 2. BARRA DE NAVEGACIÓN (Ajuste) */
/* ======================================= */

.custom-navbar-c5i {
    top: 0; /* Lo mantiene arriba */
    z-index: 1030; /* Alto z-index para que esté por encima del hero */
}
.footer-c5 {
    /*margin-left: -19em;
    width: 148%;*/
    background: #2648b4;
}
.circle-hover:hover {
    transform: scale(1.1);
}

.circle-img {
    width: 10em;
}
/* ======================================= */
/* 3. ESTILOS DE TARJETAS (Misión, Servicios, Noticias) */
/* ======================================= */
/* Tarjetas de Misión/Visión/Valores */
.card-info-c5i {
    /*border: 1px solid #eee;*/
    border-top: 5px solid #2196F3;
    transition: all 0.3s ease;
}

.icon-fa-c5i {
    margin-right: auto;
    width: 14%;
    margin-left: auto;
}


    .card-info-c5i:hover {
        border-color: var(--c5i-primary);
        box-shadow: 0 5px 15px rgba(0, 77, 153, 0.1); /* Sombra suave */
    }

/* Tarjetas de Servicios (con ícono a la izquierda) */
.card-service-c5i {
    border-left: 5px solid var(--c5i-info);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .card-service-c5i:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }

/* Tarjetas de Noticias */
.card-news-c5i .card-img-top {
    height: 200px;
    object-fit: cover;
}

/* ======================================= */
/* 4. FOOTER (Pie de página) */
/* ======================================= */

.footer-c5i {
    background-color: var(--c5i-primary); /* Azul oscuro */
    color: white;
}

    .footer-c5i a {
        color: #ccc;
    }

        .footer-c5i a:hover {
            color: white;
            text-decoration: none;
        }


.display-4 {
    font-weight:500 !important;
}




/*new code*/
/* --- Estilos Generales y Reset Básico --- */
:root {
    --color-primary: #007bff; /* Azul base */
    --color-text-dark: #333;
    --color-text-light: #fff;
    --color-bg-light: #f9f9f9;
    /* Colores de los íconos */
    --color-red: #e44d5c;
    --color-yellow: #f8c930;
    --color-pink: #d25a8e;
    --color-green: #7dc44d;
    --color-blue: #0084c8;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif; /* Reemplazar con la fuente real (ej: Open Sans) */
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: #fff;
    /*background: url("/Images/background3.png") no-repeat;
    background-size: cover;
    background-position: center;*/
} 

a {
    text-decoration: none;
    color: inherit;
}

/* --- Encabezado y Navegación --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.logo-container img {
    height: 50px; /* Ajustar según el tamaño real del logo */
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav li {
    margin-left: 20px;
}

.main-nav a {
    padding: 5px 10px;
    transition: color 0.3s;
}

    .main-nav a:hover {
        color: var(--color-primary);
    }

/* --- Sección Hero (Principal) --- */
.hero-section {
    position: relative;
    text-align: center;
    padding: 100px 5%;
    /* Simulación del fondo: Reemplazar 'url' con la imagen real */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('background-image.jpg') no-repeat center center/cover;
    color: var(--color-text-light);
    height: 450px; /* Altura aproximada */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.subtitle {
    font-size: 0.9em;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding: 5px 15px;
    background-color: rgba(255, 255, 255, 0.2); /* Fondo semi-transparente para el subtítulo */
    display: inline-block;
    border-radius: 20px;
}

.hero-content h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

.hero-content .description {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.hero-buttons .btn {
    padding: 10px 30px;
    border-radius: 5px;
    margin: 0 10px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.primary-btn {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: var(--color-text-light);
}

.secondary-btn {
    background-color: transparent;
    border: 2px solid var(--color-text-light);
    color: var(--color-text-light);
}

/* --- Efecto de Hover para Botones --- */
.hero-buttons .btn:hover {
    transform: translateY(-3px); /* Ligeramente hacia arriba */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* Efecto de sombra */
    opacity: 0.9;
}

/* --- Sección de Íconos Circulares (Bolitas de Colores) --- */
.icon-section {
    margin-top: -80px; /* Superponer sobre la sección hero */
    padding-bottom: 50px;
}

.icons-container {
    /*    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 5%;*/
    margin-right: 7em;
    margin-left: -113em;
    top: 18em !important;
    display: flex;
    margin-top: 27em;
    justify-content: center;
    gap: 12em;
    padding: 0 5%;
}

.py-5 {
    padding-top: 6rem !important;
}

    .icon-item {
    text-align: center;
    display: block;
    width: 150px; /* Ajustar el tamaño del contenedor del ícono */
}

    .icon-item a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .icon-item .circle {
        width: 152px;
        height: 152px;
        border-radius: 50%;
        color: var(--color-text-light);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4em;
        font-weight: bold;
        margin-bottom: 10px;
        transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transiciones para el hover */
        
    }

/* Colores de los círculos (Bolitas) */
.circle.red {
    background-color: var(--color-red);
}

.circle.yellow {
    background-color: var(--color-yellow);
    font-size: 2.5em; /* Ajuste para el texto más largo */
}

.circle.pink {
    background-color: var(--color-pink);
}

.circle.green {
    background-color: var(--color-green);
}

.circle.blue {
    background-color: var(--color-blue);
}

.icon-item .label {
    font-size: 0.8em;
    font-weight: bold;
    color: var(--color-text-dark);
    text-transform: uppercase;
}

/* --- Efecto de Hover para Íconos Circulares (Bolitas) --- */
.icon-item a:hover .circle {
    transform: scale(1.1); /* Agrandar la bolita */
    /* Resalte: una sombra más grande y del color del círculo */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px var(--color-red); /* Sombra genérica, se ajustará por data-color si usáramos JavaScript */
}

/* Ajustes de sombra de hover más específicos por color (ejemplo para el rojo) */
.icon-item[data-color="red"]:hover .circle {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 25px var(--color-red);
}

.icon-item[data-color="yellow"]:hover .circle {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 25px var(--color-yellow);
}

.icon-item[data-color="pink"]:hover .circle {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 25px var(--color-pink);
}

.icon-item[data-color="green"]:hover .circle {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 25px var(--color-green);
}

.icon-item[data-color="blue"]:hover .circle {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 25px var(--color-blue);
}


/* --- Sección de Información y Cards --- */
.info-section {
    text-align: center;
    padding: 40px 5%;
    background-color: var(--color-bg-light);
}

    .info-section h2 {
        font-size: 2em;
        color: var(--color-primary);
        margin-bottom: 20px;
    }

.c5i-definition {
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 1.1em;
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.info-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px 20px;
    width: 30%;
    max-width: 350px;
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transiciones para el hover */
    text-align: left;
    min-height: 250px; /* Asegurar altura mínima similar */
}

.card-icon-container {
    background-color: #eef; /* Color de fondo del ícono */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.info-card h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: var(--color-primary);
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 5px;
}

/* Borde y color de texto para resaltar cada card como en la imagen */
.info-card.mission {
    border-top: 5px solid #00aaff;
}
/* Ejemplo de color de borde */
.info-card.vision {
    border-top: 5px solid #00e9ff;
}

.info-card.values {
    border-top: 5px solid #a050ff;
}

/* --- Efecto de Hover para Tarjetas (Cards) --- */
.info-card:hover {
    transform: translateY(-5px); /* Ligeramente hacia arriba */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Efecto de elevación/sombra */
    border-color: transparent; /* Opcional: ocultar el borde inferior al elevarse */
}

#introVideoContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#introVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    text-align: center;
}

.close-modal {
    font-size: 30px;
    cursor: pointer;
    float: right;
}

#colorOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9990;
    background: transparent;
    display: none;
    transition: background 0.4s ease-in-out;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Para que siempre quede encima */
    background: url("/Images/fondoc.png") no-repeat;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(6px); /* Opcional, efecto moderno */
}

body {
    padding-top: 90px; /* Ajusta según la altura de tu header */
}

.white {
    height: 100vh;
    &:before

{
    z-index: 1000;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60vh;
    background-image: linear-gradient(-180deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%)
}

&:after {
    z-index: 1000;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20vh;
    background-image: linear-gradient(0deg, #EBEBEB 0%, rgba(235,235,235,0.00) 100%)
}

}

.squares {
    height: 100%;
    display: flex;
    justify-content: space-around;
    overflow: hidden
}

.square {
    animation: squares 9.5s linear infinite;
    align-self: flex-end;
    width: 1em;
    height: 1em;
    transform: translateY(100%);
    background: #ebebeb;
    &:nth-child(2)

{
    height: 1.5em;
    width: 3em;
    animation-delay: 1s;
    animation-duration: 17s;
    -webkit-filter: blur(5px)
}

&:nth-child(3) {
    height: 2em;
    width: 1em;
    animation-delay: 1.5s;
    animation-duration: 8s;
    -webkit-filter: blur()
}

&:nth-child(4) {
    height: 1em;
    width: 1.5em;
    animation-delay: 0.5s;
    -webkit-filter: blur(3px);
    animation-duration: 13s
}

&:nth-child(5) {
    height: 1.25em;
    width: 2em;
    animation-delay: 4s;
    -webkit-filter: blur(2px);
    animation-duration: 11s
}

&:nth-child(6) {
    height: 2.5em;
    width: 2em;
    animation-delay: 2s;
    -webkit-filter: blur(1px);
    animation-duration: 9s
}

&:nth-child(7) {
    height: 5em;
    width: 2em;
    -webkit-filter: blur(2.5px);
    animation-duration: 12s
}

&:nth-child(8) {
    height: 1em;
    width: 3em;
    animation-delay: 5s;
    -webkit-filter: blur(6px);
    animation-duration: 18s
}

&:nth-child(9) {
    height: 1.5em;
    width: 2em;
    -webkit-filter: blur(0.5px);
    animation-duration: 9s
}

&:nth-child(9) {
    height: 3em;
    width: 2.4em;
    animation-delay: 6s;
    -webkit-filter: blur(0.5px);
    animation-duration: 12s
}

}

@keyframes squares {
    from {
        transform: translateY(100%) rotate(-50deg)
    }

    to {
        transform: translateY(calc(-100vh + -100%)) rotate(20deg)
    }
}