/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat SemiBold", sans-serif;
    color: #444444;
}

a {
    color: #006fdd;
    text-decoration: none;
}

a:hover {
    color: #006fdd;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat SemiBold", sans-serif;
}

/*Main section*/
.main {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: auto;
    justify-content: center;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
    padding: 40px 0;
    overflow: hidden;
}

.section-header {
    text-align: center;
}

.section-header h2 {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0;
    color: #006fdd;
    text-transform: uppercase;
}

.section-header h3 {
    margin: 10px 0 0 0;
    padding: 0;
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: #012970;
}

@media (max-width: 768px) {
    .section-header p {
        font-size: 28px;
        line-height: 32px;
    }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
    padding: 15px 0;
    margin-top: 120px;
    margin-left: 15px;
    color: #fff;
    margin-bottom: 10px !important;
}

.tittle {
    background: #f0f0f0;
    padding: 20px 0 20px 0;
}

.tittlecolor {
    color: #012970;
}

.breadInicio {
    color: #006fdd;
}

.breadMenu {
    color: #006fdd;
}

.breadSeccion {
    color: black;
}

@media (max-width: 992px) {
    .breadcrumbs {
        /*margin-top: 57px;*/
        /*margin-left: 15%;*/
    }
}

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 500;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0 10px 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumbs ol a {
    transition: 0.3s;
}

.breadcrumbs ol a:hover {
    text-decoration: underline;
}

.breadcrumbs ol li + li {
    padding-left: 10px;
}

.breadcrumbs ol li + li::before {
    display: inline-block;
    padding-right: 10px;
    color: #012970;
    content: "/";
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 10;
    background: #006fdd;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: #012970;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0ms !important;
    }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
    transition: all 0.5s;
    z-index: 997;
    padding: 20px 0;
    display: flex;
}

.header.header-scrolled {
    background: #fff;
    padding: 15px 0;
    box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}

.header .logo {
    line-height: 0;
}

.header .logo img {
    max-height: 70px;
    margin-right: 6px;
    margin-left: 4px;
}

.header .logo span {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #012970;
    font-family: "Montserrat SemiBold", sans-serif;
    margin-top: 3px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
    padding: 0;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    flex-wrap: nowrap;
}

.navbar li {
    position: relative;
}

.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 30px;
    font-family: "Montserrat SemiBold", sans-serif;
    font-size: 16px;
    color: black;
    white-space: nowrap;
    transition: padding 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}

.navbar a i,
.navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
    color: #006fdd;
}

.navbar .getstarted,
.navbar .getstarted:focus {
    background: #006fdd;
    padding: 8px 20px;
    margin-left: 30px;
    border-radius: 4px;
    color: #fff;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
    color: #fff;
    background: #006fdd;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}

.navbar .dropdown ul li {
    min-width: 200px;
}

.navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: #006fdd;
}

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .megamenu {
    position: static;
}

.navbar .megamenu ul {
    margin-top: 5px;
    right: 0;
    padding: 10px;
    display: flex;
}

.navbar .megamenu ul li {
    flex: 1;
}

.navbar .megamenu ul li a,
.navbar .megamenu ul li:hover > a {
    color: #013289;
}

.navbar .megamenu ul li a:hover,
.navbar .megamenu ul li .active,
.navbar .megamenu ul li .active:hover {
    color: #006fdd;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover > ul {
        left: -100%;
    }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
    color: #012970;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
    color: #fff;
}


/* Responsive navbar adjustments */
@media (max-width: 1600px) {
    .navbar a,
    .navbar a:focus {
        padding: 10px 0 10px 20px;
        font-size: 15px;
    }
}

@media (max-width: 1500px) {
    .navbar a,
    .navbar a:focus {
        padding: 10px 0 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 1214px) {
    .navbar a,
    .navbar a:focus {
        padding: 10px 0 10px 10px;
        font-size: 13px;
    }

}

/* Only switch to mobile menu at smaller breakpoint */
@media (max-width: 1058px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(1, 22, 61, 0.9);
    transition: 0.3s;
}

.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
}

.navbar-mobile ul {
    display: block;
    position: absolute;
    top: 55px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 10px 0;
    border-radius: 10px;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #012970;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
    color: #006fdd;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
    margin: 15px;
}

.navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
    min-width: 200px;
}

.navbar-mobile .dropdown ul a {
    padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
    font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
    color: #006fdd;
}

.navbar-mobile .dropdown > .dropdown-active {
    display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    width: 100%;
    height: 100vh;
    /*--background: url(../img/hero-bg.png) top center no-repeat;--*/
    background-size: cover;
}

.hero h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    color: black;
}

.hero h2 {
    color: #444444;
    margin: 15px 0 0 0;
    font-size: 26px;
}

.hero .btn-get-started {
    margin-top: 30px;
    line-height: 0;
    padding: 15px 40px;
    border-radius: 4px;
    transition: 0.5s;
    color: #fff;
    background: #006fdd;
    box-shadow: 0 5px 30px rgba(65, 84, 241, 0.4);
}

.hero .btn-get-started span {
    font-family: "Montserrat SemiBold", sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
}

.hero .btn-get-started i {
    margin-left: 5px;
    font-size: 18px;
    transition: 0.3s;
}

.hero .btn-get-started:hover i {
    transform: translateX(5px);
}

.hero .hero-img {
    text-align: right;
}

@media (min-width: 1024px) {
    .hero {
        background-attachment: fixed;
    }
}

@media (max-width: 991px) {
    .hero {
        height: auto;
        padding: 120px 0 60px 0;
    }

    .hero .hero-img {
        text-align: center;
        margin-top: 80px;
    }

    .hero .hero-img img {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .btn-get-started i {
        font-size: 12px !important;
    }
    .hero {
        text-align: center;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero h2 {
        font-size: 24px;
    }

    .hero .hero-img img {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.showcase-section {
    padding: 10px 0;
    background-color: #f9faff;
    position: relative;
    overflow: hidden;
}

.showcase-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    z-index: 1;
}

.showcase-container {
    position: relative;
    z-index: 2;
}

/* Encabezado de sección */
.showcase-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
}


.showcase-title {
    font-size: 32px;
    font-weight: 700;
    color: #012970;
    margin: 0 30px;
    text-align: center;
    position: relative;
}

/* Grid de tarjetas */
.showcase-grid {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(2, 1fr);
}

/* Tarjeta de exhibición */
.showcase-card {
    position: relative;
    width: 60%;
}

.card-wrapper {
    position: relative;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.showcase-card:hover .card-wrapper {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

/* Círculo decorativo */
.decorative-circle {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 111, 221, 0.08) 0%, rgba(0, 111, 221, 0.02) 100%);
    top: -90px;
    right: -90px;
    z-index: 1;
    transition: all 0.5s ease;
}

.showcase-card:hover .decorative-circle {
    transform: scale(1.1) rotate(10deg);
}

/* Contenido principal */
.card-main {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between; /* Empuja contenido y botón a los extremos */
}

/* Imagen de la tarjeta */
.card-image {
    position: relative;
    padding: 20px 20px 0;
}

.image-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    border-radius: 12px;
    flex-shrink: 0;
}

.image-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.showcase-card:hover .image-frame img {
    transform: scale(1.05);
}



/* Detalles de la tarjeta */
.card-details {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio automático entre .card-meta, .card-text, etc. */
    padding: 30px;
}

.card-action-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 60px; /* Altura fija para alinear botones */
}
/* Meta información */
.card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;

}

.meta-tag {
    display: inline-block;
    background-color: #f0f5ff;
    color: #006fdd;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, #006fdd, transparent);
}

/* Texto de la tarjeta */

#autoridades-section .card-text {
    min-height: auto; /* Ajusta según sea necesario */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    padding: 0 15px; /* Asegura consistencia si el padding no está aquí ya */
    box-sizing: border-box;
    text-align: center;
}
#documents-section .card-text {
    min-height: auto; /* Ajusta según sea necesario */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    padding: 0 15px; /* Asegura consistencia si el padding no está aquí ya */
    box-sizing: border-box;
    text-align: left;
}
.card-category,
.card-heading {
    height: auto; /* Altura fija para cada línea */
    line-height: 1.4;
    margin-bottom: 10px;
    overflow: hidden;
}
@media (max-width: 1199px) {
    .card-category,
    .card-heading {
        font-size: 16px;
    }

    .card-details {
        padding: 25px;
    }
}
/* === Ajuste en móviles verticales (iPhone-like) === */
@media (max-width: 576px) {
    .showcase-card {
        min-height: 500px; /* Menos alto que antes */
    }

    .card-wrapper {
        height: auto;
        min-height: 445px;
    }

    .decorative-circle {
        width: 120px;
        height: 120px;
        top: -60px;
        right: -60px;
    }

    .card-image {
        padding: 15px;
    }

    .image-frame {
        padding-top: 66.66%; /* Más cuadrado que 16:9 */
    }

    .card-details {
        padding: 20px;
    }

    .card-category,
    .card-heading {
        font-size: 14px;
    }

    .meta-tag {
        font-size: 10px;
        padding: 4px 10px;
    }

    .card-actions .btn-get-started {
        padding: 12px 30px !important;
        font-size: 14px;
    }
}
.card-category {
    font-size: 14px;
    font-weight: 600;
    color: #006fdd;
    margin-bottom: 10px;
}

.card-heading {
    font-size: 22px;
    font-weight: 700;
    color: #012970;
    margin: 0;
    line-height: 1.3;
}

/* Botón de acción con pulso */
.card-actions {
    padding: 0 30px 20px;
    display: flex;
}
.card-action-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 10px; /* Altura fija para alinear botones */
}
#about .btn-get-started {
    margin-top: 20px;
    line-height: 0;
    padding: 10px 30px;
    border-radius: 20px;
    text-shadow: none;
    transition: all 0.5s ease;
    color: #fff;
    background-color: #006fdd;
    border: 2px solid #006fdd;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 14px !important;
    letter-spacing: 1px;
    text-decoration: none;
}

#about .btn-get-started i.arrow-icon {
    margin-left: 5px;
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* Hover solo para esta sección */
#about .btn-get-started:hover {
    background-color: transparent;
    color: #006fdd;
    border-color: #006fdd;
}
#about .btn-get-started:hover .arrow-icon {
    transform: translateX(5px);
}
@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    70% {
        transform: scale(1.3);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.button-text {
    margin-left: 15px;
    font-weight: 600;
    color: #012970;
    transition: all 0.3s ease;
}

.pulse-button:hover .button-circle {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 111, 221, 0.4);
}

.pulse-button:hover .button-text {
    color: #006fdd;
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 1200px){
    .showcase-card {
        width: 80%;
    }
}
@media (max-width: 991px) {
    .showcase-card {
        width: 100%;
    }

    .showcase-title {
        font-size: 32px;
    }

    .showcase-grid {
        gap: 30px;
    }

    .card-details {
        padding: 25px;
    }
    .card-actions{
       padding: 0 25px 20px
    }

    .card-heading {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .showcase-section {
        padding: 70px 0;
    }

    .showcase-title {
        font-size: 28px;
        margin: 0 20px;
    }

    .header-line {
        width: 60px;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .decorative-circle {
        width: 150px;
        height: 150px;
        top: -75px;
        right: -75px;
    }
}

@media (max-width: 576px) {
    .showcase-section {
        padding: 60px 0;
    }

    .showcase-title {
        font-size: 24px;
        margin: 0 15px;
    }

    .header-line {
        width: 40px;
    }

    .card-details {
        padding: 20px;
        gap: 15px;
    }

    .card-category {
        font-size: 12px;
    }

    .card-heading {
        font-size: 18px;
    }

    .button-circle {
        width: 45px;
        height: 45px;
    }

    .button-text {
        font-size: 14px;
    }

    .meta-tag {
        font-size: 10px;
        padding: 5px 12px;
    }
}
/*--------------------------------------------------------------
# Values
--------------------------------------------------------------*/
.values .box {
    padding: 30px;
    box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
    text-align: center;
    transition: 0.3s;
    height: 100%;
}

.values .box img {
    padding: 30px 50px;
    transition: 0.5s;
    transform: scale(1.1);
}

.values .box h3 {
    font-size: 24px;
    color: #012970;
    font-weight: 700;
    margin-bottom: 18px;
}

.values .box:hover {
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.values .box:hover img {
    transform: scale(1);
}

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
    padding: 70px 0 60px;
}

.counts .count-box {
    display: flex;
    align-items: center;
    padding: 30px;
    width: 100%;
    background: #fff;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.counts .count-box i {
    font-size: 42px;
    line-height: 0;
    margin-right: 20px;
    color: #006fdd;
}

.counts .count-box span {
    font-size: 36px;
    display: block;
    font-weight: 600;
    color: #0b198f;
}

.counts .count-box p {
    padding: 0;
    margin: 0;
    font-family: "Montserrat SemiBold", sans-serif;
    font-size: 14px;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .feature-box {
    padding: 24px 20px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
    transition: 0.3s;
    height: 100%;
}

.features .feature-box h3 {
    font-size: 18px;
    color: #012970;
    font-weight: 700;
    margin: 0;
}

.features .feature-box i {
    line-height: 0;
    background: #ecf3ff;
    padding: 4px;
    margin-right: 10px;
    font-size: 24px;
    border-radius: 3px;
    transition: 0.3s;
}

.features .feature-box:hover i {
    background: #006fdd;
    color: #fff;
}

.features .feture-tabs {
    margin-top: 120px;
}

.features .feture-tabs h3 {
    color: #012970;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .features .feture-tabs h3 {
        font-size: 28px;
    }
}

.features .feture-tabs .nav-pills {
    border-bottom: 1px solid #eee;
}

.features .feture-tabs .nav-link {
    background: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    color: #012970;
    padding: 12px 0;
    margin-right: 25px;
    margin-bottom: -2px;
    border-radius: 0;
}

.features .feture-tabs .nav-link.active {
    color: #006fdd;
    border-bottom: 3px solid #006fdd;
}

.features .feture-tabs .tab-content h4 {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
    color: #012970;
}

.features .feture-tabs .tab-content i {
    font-size: 24px;
    line-height: 0;
    margin-right: 8px;
    color: #006fdd;
}

.features .feature-icons {
    margin-top: 60px;
}

.features .feature-icons h3 {
    color: #012970;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .features .feature-icons h3 {
        font-size: 28px;
    }
}

.features .feature-icons .content .icon-box {
    display: flex;
}

.features .feature-icons .content .icon-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #012970;
}

.features .feature-icons .content .icon-box i {
    font-size: 44px;
    line-height: 44px;
    color: #0245bc;
    margin-right: 15px;
}

.features .feature-icons .content .icon-box p {
    font-size: 15px;
    color: #848484;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .service-box {
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
    height: 100%;
    padding: 60px 30px;
    text-align: center;
    transition: 0.3s;
    border-radius: 5px;
}

.services .service-box .icon {
    font-size: 36px;
    padding: 40px 20px;
    border-radius: 4px;
    position: relative;
    margin-bottom: 25px;
    display: inline-block;
    line-height: 0;
    transition: 0.3s;
}

.services .service-box h3 {
    color: #444444;
    font-weight: 700;
}

.services .service-box .read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    padding: 8px 20px;
}

.services .service-box .read-more i {
    line-height: 0;
    margin-left: 5px;
    font-size: 18px;
}

.services .service-box.blue {
    border-bottom: 3px solid #2db6fa;
}

.services .service-box.blue .icon {
    color: #2db6fa;
    background: #dbf3fe;
}

.services .service-box.blue .read-more {
    color: #2db6fa;
}

.services .service-box.blue:hover {
    background: #2db6fa;
}

.services .service-box.orange {
    border-bottom: 3px solid #f68c09;
}

.services .service-box.orange .icon {
    color: #f68c09;
    background: #fde3c4;
}

.services .service-box.orange .read-more {
    color: #f68c09;
}

.services .service-box.orange:hover {
    background: #f68c09;
}

.services .service-box.green {
    border-bottom: 3px solid #08da4e;
}

.services .service-box.green .icon {
    color: #08da4e;
    background: #cffddf;
}

.services .service-box.green .read-more {
    color: #08da4e;
}

.services .service-box.green:hover {
    background: #08da4e;
}

.services .service-box.red {
    border-bottom: 3px solid #e9222c;
}

.services .service-box.red .icon {
    color: #e9222c;
    background: #fef7f8;
}

.services .service-box.red .read-more {
    color: #e9222c;
}

.services .service-box.red:hover {
    background: #e9222c;
}

.services .service-box.purple {
    border-bottom: 3px solid #b50edf;
}

.services .service-box.purple .icon {
    color: #b50edf;
    background: #f8e4fd;
}

.services .service-box.purple .read-more {
    color: #b50edf;
}

.services .service-box.purple:hover {
    background: #b50edf;
}

.services .service-box.pink {
    border-bottom: 3px solid #f51f9c;
}

.services .service-box.pink .icon {
    color: #f51f9c;
    background: #feecf7;
}

.services .service-box.pink .read-more {
    color: #f51f9c;
}

.services .service-box.pink:hover {
    background: #f51f9c;
}

.services .service-box:hover h3,
.services .service-box:hover p,
.services .service-box:hover .read-more {
    color: #fff;
}

.services .service-box:hover .icon {
    background: #fff;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
    padding: 40px 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
    border-radius: 4px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.3s;

}

.pricing .box:hover {
    transform: scale(1.1);
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.pricing h3 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
}

.pricing .price {
    font-size: 36px;
    color: #444444;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
}

.pricing .price sup {
    font-size: 20px;
    top: -15px;
    left: -3px;
}

.pricing .price span {
    color: #bababa;
    font-size: 16px;
    font-weight: 300;
}

.pricing img {
    padding: 30px 40px;
}

.pricing ul {
    padding: 0;
    list-style: none;
    color: #444444;
    text-align: center;
    line-height: 1.6;
    font-size: 1rem; /* 16px */
    flex-grow: 1; /* Empuja el contenido hacia arriba */
    margin-bottom: 20px;
}


.pricing ul li {
    padding-bottom: 10px;
    text-align: center;
}

.pricing.admision ul li {
    text-align: center;

}


.pricing ul .na {
    color: #ccc;
    text-decoration: line-through;
}

.pricing .btn-buy {
    display: inline-block;
    padding: 8px 40px 10px 40px;
    border-radius: 50px;
    color: #006fdd;
    font-size: 16px;
    font-family: "Montserrat SemiBold", sans-serif;
    font-weight: 600;
    transition: 0.3s;
    border: 1px solid #006fdd;
    margin-bottom: 0;
    margin-top: auto;
}

.pricing .btn-buy:hover {
    background: #006fdd;
    color: #fff;
}

.pricing .featured {
    width: 200px;
    position: absolute;
    top: 18px;
    right: -68px;
    transform: rotate(45deg);
    z-index: 1;
    font-size: 14px;
    padding: 1px 0 3px 0;
    background: #006fdd;
    color: #fff;
}

.button-container {
    position: absolute; /* Posiciona el contenedor en la parte inferior */
    bottom: 20px; /* Espacio desde el borde inferior */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Ajusta el centrado */
    display: flex;
    gap: 10px; /* Espacio entre los botones */
}

.course-title {
    padding: 40px 20px;
    max-width: 1000px; /* Define un ancho máximo para el contenedor */
    margin: 0 auto; /* Centra horizontalmente el contenedor */
}

.course-title h3 {
    font-weight: bold;
    color: #012970;
    font-size: 2.5rem; /* Tamaño de fuente ajustado */
    text-align: center; /* Asegura que el texto esté centrado */
}

@media (min-width: 768px) {
    #pricing .box {
        height: 100%;
    }
}


/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .accordion-collapse {
    border: 0;
}

.faq .accordion-button {
    padding: 15px 15px 20px 0;
    font-weight: 600;
    border: 0;
    font-size: 18px;
    color: #444444;
    text-align: left;
}

.faq .accordion-button:focus {
    box-shadow: none;
}

.faq .accordion-button:not(.collapsed) {
    background: none;
    color: #006fdd;
    border-bottom: 0;
}

.faq .accordion-body {
    padding: 0 0 25px 0;
    border: 0;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
    padding: 0;
    margin: 0 auto 25px auto;
    list-style: none;
    text-align: center;
    background: white;
    border-radius: 50px;
    padding: 2px 15px;
}

.portfolio #portfolio-flters li {
    cursor: pointer;
    display: inline-block;
    padding: 8px 20px 10px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #444444;
    margin: 0 4px 8px 4px;
    transition: 0.3s;
    border-radius: 50px;
    border: 1px solid #fff;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
    color: #006fdd;
    border-color: #006fdd;
}

.portfolio #portfolio-flters li:last-child {
    margin-right: 0;
}

.portfolio .portfolio-wrap {
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: rgba(255, 255, 255, 0.75);
}

.portfolio .portfolio-wrap::before {
    content: "";
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    transition: all ease-in-out 0.3s;
    z-index: 2;
    opacity: 0;
}

.portfolio .portfolio-wrap img {
    transition: 1s;
}

.portfolio .portfolio-wrap .portfolio-info {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio .portfolio-wrap .portfolio-info::before {
    display: block;
    content: "";
    width: 48px;
    height: 48px;
    position: absolute;
    top: 35px;
    left: 35px;
    border-top: 3px solid rgba(1, 41, 112, 0.2);
    border-left: 3px solid rgba(1, 41, 112, 0.2);
    transition: all 0.5s ease 0s;
    z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
    display: block;
    content: "";
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 35px;
    right: 35px;
    border-bottom: 3px solid rgba(1, 41, 112, 0.2);
    border-right: 3px solid rgba(1, 41, 112, 0.2);
    transition: all 0.5s ease 0s;
    z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
    font-size: 20px;
    color: #012970;
    font-weight: 700;
}

.portfolio .portfolio-wrap .portfolio-info p {
    color: #012970;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
    text-align: center;
    z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
    color: #fff;
    background: #006fdd;
    margin: 10px 2px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a i {
    font-size: 24px;
    line-height: 0;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
    background: #006fdd;
}

.portfolio .portfolio-wrap:hover img {
    transform: scale(1.1);
}

.portfolio .portfolio-wrap:hover::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
    opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
    top: 15px;
    left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
    bottom: 15px;
    right: 15px;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
    padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
    width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #006fdd;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #006fdd;
}

.portfolio-details .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
    margin-top: 10px;
}

.portfolio-details .portfolio-description {
    padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
    padding: 0;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonial-item {
    box-sizing: content-box;
    padding: 30px;
    margin: 40px 30px;
    box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
    background: #fff;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: 0.3s;
}

.testimonials .testimonial-item .stars {
    margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px;
}

.testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50%;
    border: 4px solid #fff;
    margin: 0 auto;
}

.testimonials .testimonial-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #111;
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 0 auto 15px auto;
}

@media (max-width: 760px) {
    .testimonials .testimonial-item {
        margin: 30px 0;
    }
}

.testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #006fdd;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #006fdd;
}

.testimonials .swiper-slide {
    opacity: 0.3;
}

@media (max-width: 1199px) {
    .testimonials .swiper-slide-active {
        opacity: 1;
    }

    .testimonials .swiper-pagination {
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    .testimonials .swiper-slide-next {
        opacity: 1;
        transform: scale(1.12);
    }
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
    background: #fff;
    padding: 60px 0;
}

.team .member {
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra visible */
    transition: 0.3s;
}

.team .member .member-img {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.team .member .member-img:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: url(../img/team-shape.svg) no-repeat center bottom;
    background-size: contain;
    z-index: 1;
    transform: translate3d(0, 2px, 0);
}

.team .member .social {
    position: absolute;
    right: -100%;
    top: 30px;
    opacity: 0;
    border-radius: 4px;
    transition: 0.5s;
    background: rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.team .member .social a {
    transition: color 0.3s;
    color: rgba(1, 41, 112, 0.5);
    margin: 15px 12px;
    display: block;
    line-height: 0;
    text-align: center;
}

.team .member .social a:hover {
    color: rgba(1, 41, 112, 0.8);
}

.team .member .social i {
    font-size: 18px;
}


.team .member .member-info h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 20px;
    color: #012970;
}

.team .member .member-info span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #aaaaaa;
}

.team .member .member-info p {
    font-style: italic;
    font-size: 14px;
    padding-top: 15px;
    line-height: 26px;
    color: #5e5e5e;

}

.team .member:hover {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(1, 41, 112, 0.1);
}

.team .member:hover .social {
    right: 8px;
    opacity: 1;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients .clients-slider .swiper-slide img {
    opacity: 0.5;
    transition: 0.3s;
}

.clients .clients-slider .swiper-slide img:hover {
    opacity: 1;
}

.clients .clients-slider .swiper-pagination {
    margin-top: 55px;
    position: relative;
}

.clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #006fdd;
}

.clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #006fdd;
}

/*--------------------------------------------------------------
# Recent Blog Posts
--------------------------------------------------------------*/
.post-box {
    box-shadow: 0 0 30px rgba(1, 41, 112, 0.08);
    transition: 0.3s;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.post-box .post-img {
    overflow: hidden;
    position: relative;
}

.post-box .post-img img {
    transition: transform 0.5s ease; /* Solo el zoom */
}
.resultIcon{
  padding: 5px 12px;
}

.card-header {
    background-color: #0a6ebd;
}
.btn-detail {
    transition: background-color 0.2s ease-in, color 0.2s ease-in;
    color: #006fdd;
}

.btn-detail:hover {
    background-color: #006fdd;
    color: white !important;
}


.post-box .post-date {
    font-size: 16px;
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
    display: block;
    margin-bottom: 10px;
}

.post-box .post-title {
    font-size: 24px;
    color: #012970;
    font-weight: 700;
    margin-bottom: 5px;
    position: relative;
    transition: 0.3s;
}

.recent-blog-posts .nav-tabs {
    margin: 0 auto 25px auto;
    list-style: none;
    text-align: center;
    background: white;
    border-radius: 50px;
    padding: 2px 15px;
    border: none;
    display: flex;
    justify-content: center;
}

.recent-blog-posts .nav-tabs .nav-item {
    margin: 0 4px;
}

.recent-blog-posts .nav-tabs .nav-link {
    cursor: pointer;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #444444;
    border-radius: 50px;
    border: 1px solid #fff;
    transition: 0.3s;
}

.recent-blog-posts .nav-tabs .nav-link:hover,
.recent-blog-posts .nav-tabs .nav-link.active {
    color: #006fdd;
    border-color: #006fdd;
    background-color: transparent;
}


/*RESPONSIVE TITLE*/
@media (max-width: 500px) {
    .post-box .post-title {
        font-size: 18px;
    }

    .post-box .post-date {
        font-size: 14px;
    }
}

.post-box:hover .post-title {
    color: #006fdd;
}

.post-box:hover .post-img img {
    transform: scale(1.1); /* Zoom suave */
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    color: #444444;
    background: #fafbff;
    padding: 30px;
    height: 100%;
}

.contact .info-box i {
    font-size: 38px;
    line-height: 0;
    color: #006fdd;
}

.contact .info-box h3 {
    font-size: 20px;
    color: #012970;
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.contact .php-email-form {
    background: #fafbff;
    padding: 30px;
    height: 100%;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: #006fdd;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email] {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
    background: #006fdd;
    border: 0;
    padding: 10px 30px;
    color: #fff;
    transition: background-color 0.4s ease, transform 0.3s ease;
    border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
    background: #fff; /* Darker blue for hover */
    transform: translateY(-2px); /* Optional: slight lift effect */
    color: #006fdd;
    border-radius: 4px;
    border: 2px solid #006fdd;

}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
    padding: 40px 0 20px 0;
}

.blog .entry {
    padding: 30px;
    margin-bottom: 60px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .entry .entry-img {
    max-height: 440px;
    margin: -30px -30px 20px -30px;
    overflow: hidden;
}

.blog .entry .entry-title {
    font-size: 28px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 20px 0;
}

.blog .entry .entry-title a {
    color: #012970;
    transition: 0.3s;
}

.blog .entry .entry-title a:hover {
    color: #006fdd;
}

.blog .entry .entry-meta {
    margin-bottom: 15px;
    color: #006fdd;
}

.blog .entry .entry-meta ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    padding: 0;
    margin: 0;
}

.blog .entry .entry-meta ul li + li {
    padding-left: 20px;
}

.blog .entry .entry-meta i {
    font-size: 16px;
    margin-right: 8px;
    line-height: 0;
}

.blog .entry .entry-meta a {
    color: #777777;
    font-size: 14px;
    display: inline-block;
    line-height: 1;
}

.blog .entry .entry-content p {
    line-height: 24px;
}

.blog .entry .entry-content .read-more {
    -moz-text-align-last: right;
    text-align-last: right;
}

.blog .entry .entry-content .read-more a {
    display: inline-block;
    background: #006fdd;
    color: #fff;
    padding: 6px 20px;
    transition: 0.3s;
    font-size: 14px;
    border-radius: 4px;
}

.blog .entry .entry-content .read-more a:hover {
    background: #006fdd;
}

.blog .entry .entry-content h3 {
    font-size: 22px;
    margin-top: 30px;
    font-weight: bold;
}

.blog .entry .entry-content blockquote {
    overflow: hidden;
    background-color: #fafafa;
    padding: 60px;
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.blog .entry .entry-content blockquote p {
    color: #444444;
    line-height: 1.6;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
}

.blog .entry .entry-content blockquote::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #012970;
    margin-top: 20px;
    margin-bottom: 20px;
}

.blog .entry .entry-footer {
    padding-top: 10px;
    border-top: 1px solid #e6e6e6;
}

.blog .entry .entry-footer i {
    color: #006fdd;
    display: inline;
}

.blog .entry .entry-footer a {
    color: #013289;
    transition: 0.3s;
}

.blog .entry .entry-footer a:hover {
    color: #006fdd;
}

.blog .entry .entry-footer .cats {
    list-style: none;
    display: inline;
    padding: 0 20px 0 0;
    font-size: 14px;
}

.blog .entry .entry-footer .cats li {
    display: inline-block;
}

.blog .entry .entry-footer .tags {
    list-style: none;
    display: inline;
    padding: 0;
    font-size: 14px;
}

.blog .entry .entry-footer .tags li {
    display: inline-block;
}

.blog .entry .entry-footer .tags li + li::before {
    padding-right: 6px;
    color: #6c757d;
    content: ",";
}

.blog .entry .entry-footer .share {
    font-size: 16px;
}

.blog .entry .entry-footer .share i {
    padding-left: 5px;
}

.blog .entry-single {
    margin-bottom: 30px;
}

.blog .blog-author {
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .blog-author img {
    width: 120px;
    margin-right: 20px;
}

.blog .blog-author h4 {
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 0px;
    padding: 0;
    color: #012970;
}

.blog .blog-author .social-links {
    margin: 0 10px 10px 0;
}

.blog .blog-author .social-links a {
    color: rgba(1, 41, 112, 0.5);
    margin-right: 5px;
}

.blog .blog-author p {
    font-style: italic;
    color: #b7b7b7;
}

.blog .blog-comments {
    margin-bottom: 30px;
}

.blog .blog-comments .comments-count {
    font-weight: bold;
}

.blog .blog-comments .comment {
    margin-top: 30px;
    position: relative;
}

.blog .blog-comments .comment .comment-img {
    margin-right: 14px;
}

.blog .blog-comments .comment .comment-img img {
    width: 60px;
}

.blog .blog-comments .comment h5 {
    font-size: 16px;
    margin-bottom: 2px;
}

.blog .blog-comments .comment h5 a {
    font-weight: bold;
    color: #444444;
    transition: 0.3s;
}

.blog .blog-comments .comment h5 a:hover {
    color: #006fdd;
}

.blog .blog-comments .comment h5 .reply {
    padding-left: 10px;
    color: #012970;
}

.blog .blog-comments .comment h5 .reply i {
    font-size: 20px;
}

.blog .blog-comments .comment time {
    display: block;
    font-size: 14px;
    color: #013ca3;
    margin-bottom: 5px;
}

.blog .blog-comments .comment.comment-reply {
    padding-left: 40px;
}

.blog .blog-comments .reply-form {
    margin-top: 30px;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .blog-comments .reply-form h4 {
    font-weight: bold;
    font-size: 22px;
}

.blog .blog-comments .reply-form p {
    font-size: 14px;
}

.blog .blog-comments .reply-form input {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
}

.blog .blog-comments .reply-form input:focus {
    box-shadow: none;
    border-color: #a0aaf8;
}

.blog .blog-comments .reply-form textarea {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
}

.blog .blog-comments .reply-form textarea:focus {
    box-shadow: none;
    border-color: #a0aaf8;
}

.blog .blog-comments .reply-form .form-group {
    margin-bottom: 25px;
}

.blog .blog-comments .reply-form .btn-primary {
    border-radius: 4px;
    padding: 10px 20px;
    border: 0;
    background-color: #012970;
}

.blog .blog-comments .reply-form .btn-primary:hover {
    background-color: #013289;
}

.blog .blog-pagination {
    color: #006fdd;
}

.blog .blog-pagination ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

.blog .blog-pagination li {
    margin: 0 5px;
    transition: 0.3s;
}

.blog .blog-pagination li a {
    color: #012970;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
    background: #006fdd;
}

.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
    color: #fff;
}

.blog .sidebar {
    padding: 30px;
    margin: 0 0 60px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .sidebar .sidebar-title {
    font-size: 20px;
    font-weight: 700;
    padding: 0 0 0 0;
    margin: 0 0 15px 0;
    color: #012970;
    position: relative;
}

.blog .sidebar .sidebar-item {
    margin-bottom: 30px;
}

.blog .sidebar .search-form form {
    background: #fff;
    border: 1px solid #ddd;
    padding: 3px 10px;
    position: relative;
}

.blog .sidebar .search-form form input[type=text] {
    border: 0;
    padding: 4px;
    border-radius: 4px;
    width: calc(100% - 40px);
}

.blog .sidebar .search-form form button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 15px;
    margin: -1px;
    background: #006fdd;
    color: #fff;
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
    line-height: 0;
}

.blog .sidebar .search-form form button i {
    line-height: 0;
}

.blog .sidebar .search-form form button:hover {
    background: #006fdd;
}

.blog .sidebar .categories ul {
    list-style: none;
    padding: 0;
}

.blog .sidebar .categories ul li + li {
    padding-top: 10px;
}

.blog .sidebar .categories ul a {
    color: #012970;
    transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
    color: #006fdd;
}

.blog .sidebar .categories ul a span {
    padding-left: 5px;
    color: #aaaaaa;
    font-size: 14px;
}

.blog .sidebar .recent-posts .post-item + .post-item {
    margin-top: 15px;
}

.blog .sidebar .recent-posts img {
    width: 80px;
    float: left;
}

.blog .sidebar .recent-posts h4 {
    font-size: 15px;
    margin-left: 95px;
    font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
    color: #012970;
    transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
    color: #006fdd;
}

.blog .sidebar .recent-posts time {
    display: block;
    margin-left: 95px;
    font-style: italic;
    font-size: 14px;
    color: #aaaaaa;
}

.blog .sidebar .tags {
    margin-bottom: -10px;
}

.blog .sidebar .tags ul {
    list-style: none;
    padding: 0;
}

.blog .sidebar .tags ul li {
    display: inline-block;
}

.blog .sidebar .tags ul a {
    color: #006fdd;
    font-size: 14px;
    padding: 6px 14px;
    margin: 0 6px 8px 0;
    border: 1px solid #d7e6ff;
    display: inline-block;
    transition: 0.3s;
}

.blog .sidebar .tags ul a:hover {
    color: #fff;
    border: 1px solid #006fdd;
    background: #006fdd;
}

.blog .sidebar .tags ul a span {
    padding-left: 5px;
    color: #a5c5fe;
    font-size: 14px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    background: #f6f9ff;
    padding: 0 0 30px 0;
    font-size: 14px;
}

.footer .footer-newsletter {
    padding: 50px 0;
    background: #f6f9ff;
    border-top: 1px solid #e1ecff;
}

.footer .footer-newsletter h4 {
    font-size: 24px;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    color: #012970;
}

.footer .footer-newsletter form {
    margin-top: 20px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 4px;
    border: 1px solid #e1ecff;
}

.footer .footer-newsletter form input[type=email] {
    border: 0;
    padding: 8px;
    width: calc(100% - 140px);
}

.footer .footer-newsletter form input[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 30px;
    margin: 3px;
    background: #006fdd;
    color: #fff;
    transition: 0.3s;
    border-radius: 4px;
}

.footer .footer-newsletter form input[type=submit]:hover {
    background: #006fdd;
}

.footer .footer-top {
    background: white no-repeat right top;
    background-size: contain;
    border-top: 1px solid #e1ecff;
    border-bottom: 1px solid #e1ecff;
    padding: 60px 0 30px 0;
}

@media (max-width: 992px) {
    .footer .footer-top {
        background-position: center bottom;
    }
}

.footer .footer-top .footer-info {
    margin-bottom: 30px;
}

.footer .footer-top .footer-info .logo {
    line-height: 0;
    margin-bottom: 15px;
}

.footer .footer-top .footer-info .logo img {
    max-height: 40px;
    margin-right: 6px;
}

.footer .footer-top .footer-info .logo span {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #012970;
    font-family: "Montserrat SemiBold", sans-serif;
    margin-top: 3px;
}

.footer .footer-top .footer-info p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    font-family: "Montserrat SemiBold", sans-serif;
}

.footer .footer-top .social-links a {
    font-size: 20px;
    display: inline-block;
    color: rgba(1, 41, 112, 0.5);
    line-height: 0;
    margin-right: 10px;
    transition: 0.3s;
}

.footer .footer-top .social-links a:hover {
    color: #012970;
}

.footer .footer-top h4 {
    font-size: 16px;
    font-weight: bold;
    color: #012970;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 12px;
}

.footer .footer-top .footer-links {
    margin-bottom: 30px;
}

.footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: #d0d4fc;
    font-size: 12px;
    line-height: 0;
}

.footer .footer-top .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.footer .footer-top .footer-links ul li:first-child {
    padding-top: 0;
}

.footer .footer-top .footer-links ul a {
    color: #013289;
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
}

.footer .footer-top .footer-links ul a:hover {
    color: #006fdd;
}

.footer .footer-top .footer-contact p {
    line-height: 26px;
}

.footer .copyright {
    padding-top: 30px;
    color: #012970;
}

.copyright a {
    border: 1px solid #006fdd;
    color: #006fdd;
}

.custom-popover {
    --bs-body-color: #006fdd;
}

.footer .credits {
    padding-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #012970;
}


.position-relative {
    position: relative;
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;

    text-align: center;
    background-color: transparent;
    padding: 20px;
    border-radius: 10px;

}

#usabout {
    position: relative;
    text-align: center;
}

.overlay-content h2,
.overlay-content h3 {
    color: white;
    text-shadow: -18px 11px 18px rgba(0, 0, 0, 0.7);
}


@media (min-width: 992px) {
    #btndiplomas {
        text-align: center !important;
    }
}

/* Carrusel */

#carousel-section {
    padding-top: 80px;
    padding-bottom: 0 !important;
    width: 100%;
    height: 765px;
}

.carousel {
    position: relative;
    max-width: 100%;
    height: 100%;
    margin: 10px auto;
}

.imgGradient {
    opacity: 0.45;
}

.carousel-image {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.btnNext i {
    color: rgba(180, 180, 180, 0.71);
}

.btnPrevius i {
    color: rgba(180, 180, 180, 0.71);
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.carousel-image {
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.div-carrusel-left {
    margin-right: 120px;
    margin-left: 0;
    background: rgba(44, 44, 44, 0.468);
    border-radius: 20px;
    right: 0;
    padding: 20px 50px 20px 50px;
    width: 600px;
}

.carousel-image.active {
    opacity: 1;
}

.div-carrusel-right {
    margin-left: 120px;
    background: rgba(44, 44, 44, 0.468);
    border-radius: 20px;
    padding: 20px 50px 20px 50px;
    width: 600px;
}

@media (max-width: 900px) {
    .carousel-image {
        justify-content: center;
    }

    .div-carrusel-right {
        width: 60%;
        margin: auto;
    }

    .div-carrusel-left {
        width: 80%;
        margin: 0;
        right: auto !important;
    }

    .btn-get-started {
        margin-top: 20px;
        line-height: 0;
        padding: 15px 40px;
        border-radius: 20px;
        text-shadow: none;
        transition: 0.5s;
        color: #fff;
        background: #006fdd;
        border: 2px solid #006fdd;
    }
}

@media (max-width: 620px) {
    #carousel-section {
        height: 665px;
    }

     .btn-get-started {
        margin-top: 10px !important;
        padding: 10px 20px !important;
    }

    .div-carrusel-right {
        padding: 20px 20px 20px 20px;
        width: 80%;
    }

    .div-carrusel-left {
        padding: 20px 20px 20px 20px;
    }

     .btn-get-started span {
        font-weight: 600;
        font-size: 12px !important;
    }

    .div-carrusel-right h1 {
        font-size: 22px !important;
    }

    .div-carrusel-left h1 {
        font-size: 22px !important;
    }

    .div-carrusel-right h4 {
        font-size: 18px !important;
    }
    .div-carrusel-left h4 {
        font-size: 18px !important;
    }

    .div-carrusel-right p {
        font-size: 14px !important;
    }

    .div-carrusel-left p {
        font-size: 14px !important;
    }
}

@media (max-width: 450px) {
    .btn-get-started {
        padding: 8px 16px !important;
    }

    .btn-get-started span {
        font-weight: 600;
        font-size: 10px !important;
    }

    .btnTwin {
        justify-content: center;
        flex-direction: column;
    }

    .btnTwin a {
        margin: 0 !important;
    }
}

@media (max-width: 360px) {
    .div-carrusel-right h1 {
        font-size: 20px !important;
    }
    .div-carrusel-left h1 {
        font-size: 20px !important;
    }

    .div-carrusel-right h4 {
        font-size: 16px !important;
    }
    .div-carrusel-left h4 {
        font-size: 16px !important;
    }

    .div-carrusel-right p {
        font-size: 12px !important;
    }
    .div-carrusel-left p {
        font-size: 12px !important;
    }

}

.btn-get-started {
    margin-top: 20px;
    line-height: 0;
    padding: 15px 40px;
    border-radius: 20px;
    text-shadow: none;
    transition: 0.5s;
    color: #fff;
    background: #006fdd;
    border: 2px solid #006fdd;
}

.btn-get-started span {
    font-family: "Montserrat SemiBold", sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
}

.btn-get-started i {
    margin-left: 5px;
    font-size: 18px;
    transition: 0.3s;
}

#btnCarouselResult {
    background: transparent;
}

#btnCarouselResult:hover {
    background: #006fdd;
}

.btn-get-started:hover .arrow-icon {
    transform: translateX(5px);
}

.btn-get-started:hover .info-icon {
    transform: translateY(-2px) !important;

}

.btn-get-started:hover {
    background: #00000000;
    color: white;
}

#container-titulo {
    padding: 20px 0 20px 18px;
}

@media (max-width: 1200px) {
    #container-titulo {
        padding: 20px 0 20px 27px;
    }
}

#container-titulo h1 {
    margin-bottom: 0 !important;
}

.containerText {
    margin: auto;
    width: 65%;
    text-align: justify;
}

@media (max-width: 992px) {
    .container-titulo {
        margin-left: 15%; /*responsive del titulo*/
    }

    .containerText {
        margin: auto;
        width: 90%;
        text-align: justify;
    }
}

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/

/* Encabezado de la tabla */
.table__header {
    width: 93%;
    height: 10%;
    padding: .8rem 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Grupo de entrada para la búsqueda */
.table__header .input-group {
    width: 35%;
    height: 50px;
    background-color: #fff5;
    padding: 0 .8rem;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    transition: .2s;
    box-shadow: 0 .1rem .4rem #0002;
}

@media (max-width: 665px) {
    .table__header .input-group {
        width: 60% !important;
        height: 35px;
    }

    .table__header .input-group i {
        font-size: .9rem !important;
    }

    .table__header .input-group input {
        min-width: 50px;
    }

    .table__header .input-group:hover {
        width: 65% !important;
        background-color: #fff8;
        box-shadow: 0 .1rem .4rem #0002;
    }
}

@media (max-width: 900px) {
    .table__header .input-group {
        width: 70%;
    }
}

.table__header .input-group:hover {
    width: 45%;
    background-color: #fff8;
    box-shadow: 0 .1rem .4rem #0002;
}

/* Estilo del input de búsqueda */
.table__header .input-group input {
    width: 100%;
    padding: 0 .5rem 0 2.5rem;
    background-color: transparent;
    border: none;
    outline: none;
}

.table__header .input-group i {
    position: absolute;
    font-size: 1.2rem;
    left: 25px;
    color: #395fa0
}

/* Cuerpo de la tabla con desplazamiento */
.table__body {
    padding: 0;
    max-height: 357px;
    height: 357px;
    width: 88%;
    margin: .8rem auto;
    overflow: auto;
}

/* Estilo de la barra de desplazamiento */
.table__body::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

.table__body::-webkit-scrollbar-thumb {
    border-radius: .5rem;
    background-color: #0004;
    visibility: hidden;
}

.table__body:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

/* Configuración de la tabla */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 1rem;
    text-align: center;
    min-width: 10rem;
}

td i {
    font-size: 24px; /* Tamaño del ícono */
    font-weight: bold; /* Grosor del ícono */
    margin: 0 7px;
}

/* Encabezado de la tabla */
thead th {
    position: sticky;
    top: 0;
    cursor: pointer;
    text-transform: capitalize;
    background: white;
}

/* Alternar color de fondo en filas impares */
tbody tr:nth-child(even) {
    background-color: #0000000b;
}

/* Transiciones en filas */
tbody tr {
    --delay: .1s;
    transition: .5s ease-in-out var(--delay), background-color 0s;
}

tbody tr.hide {
    opacity: 0;
}

tbody tr:hover {
    background-color: #fff6 !important;
}

/* Transiciones en celdas */
tbody tr td, tbody tr td p {
    transition: .2s ease-in-out;
}

tbody tr.hide td, tbody tr.hide td p {
    padding: 0;
    font-size: 0;
    line-height: 0;
    transition: .2s ease-in-out .5s;
}

tbody tr.hide {
    width: 0;
    height: 0;
    transition: .2s ease-in-out .5s;
}


/* Adaptación para pantallas más pequeñas */
@media (max-width: 1000px) {
    td:not(:first-of-type) {
        min-width: 12.1rem;
    }
}

/* Flecha de ordenamiento en el encabezado */
thead th span.icon-arrow {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1.4px solid transparent;
    text-align: center;
    font-size: 1rem;
    transition: .2s ease-in-out;
}

thead th:hover span.icon-arrow {
    border: 1.4px solid #006fdd;
}

thead th:hover {
    color: #006fdd;
}

thead th.active span.icon-arrow {
    background-color: #006fdd;
    color: #fff;
}

thead th.asc span.icon-arrow {
    transform: rotate(180deg);
}

thead th.active, tbody td.active {
    color: #006fdd;
}

.container {
    /*margin-left: 95px;*/
}

.containerlogoFCytIdentidad-img {
    display: block;
    max-width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containerlogoFCytIdentidad-img.show {
    opacity: 1;
    transform: translateY(0);
}

.containerconstrucymodu-img {
    display: block;
    max-width: 1100px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containerconstrucymodu-img.show {
    opacity: 1;
    transform: translateY(0);
}

.containersecurityredutc-img {
    display: block;
    max-width: 1100px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containersecurityredutc-img.show {
    opacity: 1;
    transform: translateY(0);
}

.containercolorimetria-img {
    display: block;
    max-width: 1100px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containercolorimetria-img.show {
    opacity: 1;
    transform: translateY(0);
}

.containerapliccorrect-img {
    display: block;
    max-width: 1100px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containerapliccorrect-img.show {
    opacity: 1;
    transform: translateY(0);
}

.containertipografia-img {
    display: block;
    max-width: 1100px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containertipografia-img.show {
    opacity: 1;
    transform: translateY(0);
}

.containerrestric-img {
    display: block;
    max-width: 1100px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containerrestric-img.show {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.containerTitleIdent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0px;
    text-align: center;
    background-size: cover;
    padding: 15px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.containerTitleIdent.show {
    opacity: 1;
    height: auto;
}

.containerlogoinst {
    text-align: center;
}

.containerTextAnim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containerTextAnim.show {
    opacity: 1;
    transform: translateY(0);
}

.containerTextAnim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containerTextAnim.show {
    opacity: 1;
    transform: translateY(0);
}

.containerisologoinst-img {
    display: block;
    max-width: 600px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containerisologoinst-img.show {
    opacity: 1;
    transform: translateY(0);
}

/*Responsive-pagdeidentidad*/
@media (max-width: 992px) {
    .containerlogoFCytIdentidad-img,
    .containerisologoinst-img,
    .containersecurityredutc-img,
    .containercolorimetria-img,
    .containerapliccorrect-img,
    .containertipografia-img,
    .containerrestric-img,
    .containerconstrucymodu-img {
        width: 100%;
        height: auto;
    }

    .containersecurityredutc-img {
        max-width: 550px;
    }

    .containercolorimetria-img {
        max-width: 550px;
    }

    .containerapliccorrect-img {
        max-width: 350px;
    }

    .containertipografia-img,
    .containerrestric-img,
    containerlogoFCytIdentidad-img,
    .containerconstrucymodu-img {
        max-width: 450px;
    }
}


/*------Convenios------ */
.agreements {
    border-radius: 8px;
    padding: 30px 30px;
    box-shadow: 2px 2px 4px 1px darkgray;
    margin-bottom: 25px;
    align-items: center;
    transition: transform 0.5s ease-in-out, opacity 1s ease-in-out !important;
}

.agreements:hover {
    background: #f7f7f7;
    transform: scale(1.03) !important;
}

.agreements a:hover {
    text-decoration: underline;
}

.agreementsImg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 50px;
    margin-right: 10px;
}

.agreementsTittle {
    font-size: 14px;
}

.agreementsText {
    font-size: 13px;
    line-height: 1.8;
}

.containerAgreements {
    margin: auto;
    width: 66%;
    text-align: justify;
}

.btnVerAgreements {
    display: none;
}

.containerSlider {
    margin: auto;
    width: 68%;
}

@media (max-width: 1024px) {
    .containerAgreements {
        margin: auto;
        width: 80%;
    }

    .agreementsImg {
        width: 120px;
        height: 100%;
        margin-right: 10px;
    }

    .agreements {
        align-items: center;
    }

    .containerSlider {
        margin: auto;
        width: 80%;
    }
}

@media (max-width: 769px) {
    .containerAgreements {
        margin: auto;
        width: 85%;
        text-align: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px 20px;
    }

    .aVerAgreements {
        display: none;
    }

    .btnVerAgreements {
        display: block;
        width: 100%;
        background: #006fdd;
    }

    .btnVerAgreements a {
        color: white;
    }

    .btnVerAgreements:hover {
        background: #006ee1;
    }

    .agreements {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding: 20px 20px;
    }

    .agreementsTittle {
        font-size: 11px;
    }

    .agreementsText {
        font-size: 11px;
        line-height: 1.8;
    }

    .agreementsImg {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 150px;
        margin: 0;
    }

    .agreementsImg img {
        height: 120px;
        width: 100%;
        object-fit: contain;
    }

    .containerSlider {
        margin: auto;
        width: 85%;
    }
}

@media (max-width: 500px) {
    .containerAgreements {
        margin: auto;
        width: 80%;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .agreementsTittle {
        text-align: center;
        font-size: 12px;
    }

    .agreementsText {
        font-size: 11px;
        line-height: 1.8;
    }

    .containerSlider {
        margin: auto;
        width: 80%;
    }

}


/*Consejo Directivo*/

#Titulo-Consejo {
    text-align: center;
    font-size: 2rem; /* Tamaño adecuado para un subtítulo */
    font-weight: 600; /* Negrita moderada para resaltar */
    letter-spacing: 1px; /* Espaciado entre letras para dar elegancia */
    color: #012970; /* Color neutro para mantener la legibilidad */
    margin-bottom: 20px; /* Espacio debajo del título */
}

#container-consejo {
    margin: 0;
}

.centered-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.team .member .member-info p.consejo-contenido {
    font-size: 0.7em; /* Reducimos el tamaño del texto */
    font-style: normal; /* Mantenemos el estilo normal (sin cursiva) */
    margin: 5px 0; /* Ajustamos el margen para que no ocupe demasiado espacio vertical */
    line-height: 1.2; /* Reducimos el interlineado para que sea más compacto */
    color: whitesmoke; /* Opcional: Cambiamos el color para que sea menos intrusivo */
    word-break: break-word; /* Aseguramos que el correo no se desborde si es muy largo */
}

@media (max-width: 768px) {
    .team .member .member-info h4 {
        font-size: 20px;
    }

    .member-info span {
        font-size: 16px;
    }

    .member-info p {
        font-size: 14px;
    }

    .member-img {
        width: 90%;
        margin: 0 auto;
    }

    .member {
        width: 100%;
        margin: 5px auto;
        min-width: 200px;
    }
}

@media (max-width: 576px) {
    .team .member .member-info h4 {
        font-size: 18px;
    }

    .member-info span {
        font-size: 14px;
    }

    .member-info p {
        font-size: 12px;
    }

    .member-img {
        width: 80%;
        margin: 0 auto;
    }

    .member {
        width: 100%;
        margin: 5px auto;
        min-width: 150px;
        padding: 10px;
    }
}

@media (max-width: 400px) {
    .team .member .member-info h4 {
        font-size: 16px;
    }

    .member-info span {
        font-size: 12px;
    }

    .member-info p {
        font-size: 10px;
    }

    .member-img {
        width: 70%;
        margin: 0 auto;
    }

    .member {
        width: 100%;
        margin: 5px auto;
        min-width: 100px;
        padding: 5px;

    }

    .social a {
        font-size: 12px;
        margin: 0 5px;
    }

    .team .member .member-info p {
        font-style: italic;
        font-size: 8px;

        padding-top: 7px;
        line-height: 12px;
    }

    .team .member .member-info span {
        font-size: 10px;

    }

    .custom-testimonial-items {
        margin-left: 0 !important;
        margin-right: 0 !important
    }
}

.custom-testimonial {
    padding: 0 !important;
}

.mision {
    background: #006fdd;
    color: #fff;
    border-radius: 40px 40px 40px 0;
    padding: 30px
}

.vision {
    background: #006fdd;
    color: #fff;
    border-radius: 40px 0 40px 40px;
    padding: 30px
}

.valores {
    background: #006fdd;
    color: #fff;
    border-radius: 40px 40px 40px 0;
    padding: 30px
}

.custom-testimonial-items p {
    font-style: normal !important;
    padding: 20px;
}

.custom-testimonial-items {
    padding: 0 !important;
    border-radius: 40px 40px 0 0 !important;
}

.custom-testimonial-items li {
    margin-bottom: 10px;
}

.custom-testimonial-items p {
    text-align: justify;
    hyphenate-limit-chars: 5;
    hyphens: auto;
}

.valores-custom {
    padding: 7px 7px 7px 30px !important;
}

@media (max-width: 700px) {
    .valores-custom {
        padding: 15px 15px 15px 15px !important;
    }

    .habilidades-custom {
        padding: 2px 2px 2px 2px !important;
        font-size: 14px;
    }

    #habilidades-item {
        text-align: center !important;
    }

    .colhabilidades {
        display: flex;
        flex-direction: column;
    }
}

.centertitle {
    text-align: center;
}

/* Pasantias */
.Pasantiacontainer {
    margin: 0;
}

#pricingPasantia {
    overflow: visible;
}

.ulPasantia {
    margin: 0 !important;
}

/* ================= TRANSPARENCIA LEY ================= */

.transparencyContainer {
    display: flex;
    position: relative;
    width: 100%;
    height: 80px;
    border: 1px solid darkgray;
    padding: 20px 10px;
    align-items: center;
    margin-top: 12px;
    font-weight: bold;
    box-shadow: 2px 2px 2px 1px rgba(205, 205, 205, 0.8);
    font-size: 18px;
    border-radius: 10px;
    overflow: hidden;
}

.transparencyContainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #006fdd;
    transform: scaleX(0);
    transform-origin: left;
    border-radius: inherit;
    transition: transform 0.4s ease;
}

.transparencyContainer.active {
    background: #006fdd;
    color: white;
}

.transparencyContainer.active .transparencyTitle {
    transform: translateX(15px);
}

.transparencyContainer:hover::before {
    transform: scaleX(1);
}

.transparencyContainer:hover .transparencyTitle {
    transform: translateX(15px);
}

.transparencyContainer:hover .transparencyTitle {
    color: white;
}

.transparencyTitle {
    transition: transform 0.5s ease, color 0.8s ease;
}

.listTransparency {
    margin: 0 !important;
}

.listTransparency li {
    font-size: 18px;
    transition: transform 0.2s ease-in-out;
    transform-origin: top left;
}

.listTransparency li:hover {
    transform: scale(1.05);
}

/*===== Direccion Telefonos y Dependencias ======== */
.containerTelDep {
    margin: auto;
    width: 70%;
    text-align: center;
}

.direccionTelTitle {
    color: white;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: transform 0.3s ease;
    white-space: normal; /* Permite que el texto se rompa */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Límite máximo de líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.direccionTelContainer {
    min-height: 80px; /* Permite crecer si el contenido lo requiere */
    height: auto; /* Ahora será dinámico */
    width: 100%;
    border: none;
    padding: 15px;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #006fdd 0%, #0052a3 100%);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 111, 221, 0.2);
    display: flex;
    align-items: center; /* Mantiene el texto centrado verticalmente */
    justify-content: flex-start;
}


.direccionTelContainer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
    transform: skewX(-15deg) translateX(10px);
}

.direcTelBody {
    padding: 15px 20px;
    border: 1px solid #e6e6e6;
    border-top: none;
    border-radius: 0 0 12px 12px;
    height: 100%;
    background-color: #ffffff;
    transition: all 0.3s ease;
    line-height: 1.6;
}

.direcTelBody p {
    margin: 0;
    color: #333;
}

.direcTelBody p strong {
    color: #006fdd;
    font-weight: 600;
}

.containerDireccionTel {
    display: flex;
    flex-direction: column;
    width: 60%;
    margin: auto;
    padding: 20px 0;
}

.columnDirection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.direcCard {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.direcCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 111, 221, 0.15);
}

.direcCard:hover .direccionTelTitle {
    transform: translateX(5px);
}

/* Responsive styles */
@media (max-width: 1100px) {
    .containerDireccionTel {
        width: 80%;
        margin: auto;
    }
}

@media (max-width: 850px) {
    .columnDirection {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .direcCard {
        max-width: 100%;
    }
}

@media (max-width: 630px) {
    .transparencyContainer .transparencyTitle {
        font-size: 12px !important;
    }

    .listTransparency {
        font-size: 12px !important;
    }

    #containerTransparency {
        width: 90%;
    }

    .containerDireccionTel {
        width: 90%;
    }
}

@media (max-width: 500px) {
    .direccionTelContainer {
        font-size: 16px;
        height: auto;
        min-height: 70px;
    }

    .funName {
        font-size: 16px !important;
    }

    .transparencyContainer:hover .transparencyTitle {
        transform: translateX(5px);
    }

    .transparencyContainer.active .transparencyTitle {
        transform: translateX(5px);
    }

    .transparencyContainer {
        padding: 20px 20px;
    }

    .direcCard:hover {
        transform: none;
    }
}



/* ========== Tabla de Transparencia ========== */
.table__bodyTransparencia {
    padding: 0;
    max-height: 500px;
    width: 75%;
    margin: .8rem auto;
    overflow: auto;
}

.table__body th {
    text-align: center;
}

.transparencyTableYear {
    color: #006fdd;
}


/*--------------------------------------------------------------
# Calendar
--------------------------------------------------------------*/
.calendar__body {
    position: relative;
    margin: 0 auto;
    height: 100%;
    max-height: 635px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #878895;
    border-radius: 5px;
    background-color: #fff;
}

.left {
    width: 60%;
    padding: 20px;
}

.calendar {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #878895;
    border-radius: 5px;
    background-color: #fff;
}

/* Decoraciones para los bordes del calendario */
.calendar::before,
.calendar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 12px;
    height: 97%;
    border-radius: 0 5px 5px 0;
    background-color: #d3d4d6d7;
    transform: translateY(-50%);
}

.calendar::before {
    height: 94%;
    left: calc(100% + 12px);
    background-color: rgb(153, 153, 153);
}

/* Estilo para el encabezado del calendario */
.calendar .month {
    width: 100%;
    max-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: capitalize;
}

.calendar .month .prev,
.calendar .month .next {
    cursor: pointer;
    font-size: 2rem;
    transition: color 0.3s;
}

.calendar .month .prev:hover,
.calendar .month .next:hover {
    color: #006fdd;
}

/* Estilo para los días de la semana en el calendario */
.calendar .weekdays {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize;
}

.weekdays div {
    width: 14.28%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo para los días del calendario */
.calendar .days {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.calendar .days .day {
    width: 14.28%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #006fdd;
    border: 1px solid #f5f5f5;
}

/* Estilos para los bordes de los días del calendario */
.calendar .days .day:nth-child(7n + 1) {
    border-left: 2px solid #f5f5f5;
}

.calendar .days .day:nth-child(7n) {
    border-right: 2px solid #f5f5f5;
}

.calendar .days .day:nth-child(-n + 7) {
    border-top: 2px solid #f5f5f5;
}

.calendar .days .day:nth-child(n + 29) {
    border-bottom: 2px solid #f5f5f5;
}

/* Estilo para los días seleccionados y eventos */
.calendar .days .day:not(.prev-date, .next-date):hover {
    color: #fff;
    background-color: #006fdd;
}

.calendar .days .active {
    position: relative;
    font-size: 2rem;
    color: #fff;
    background-color: #006fdd;
}

.calendar .days .active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px 2px #006fdd;
}

.calendar .days .today {
    font-size: 2rem;
}

.calendar .days .event {
    position: relative;
    background: #e6f0fa
}
.calendar .days .holiday {
    position: relative;
    background: #f1f1f1
}

/*.calendar .days .event::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: 10%;*/
/*    left: 50%;*/
/*    width: 75%;*/
/*    height: 6px;*/
/*    border-radius: 30px;*/
/*    transform: translateX(-50%);*/
/*    background-color: #006fdd;*/
/*}*/
/*.calendar .days .holiday::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: 10%;*/
/*    left: 50%;*/
/*    width: 75%;*/
/*    height: 6px;*/
/*    border-radius: 30px;*/
/*    transform: translateX(-50%);*/
/*    background-color: #878895;*/
/*}*/
.calendar .days .day:hover.event::after {
    background-color: #fff;
}

.calendar .days .active.event::after {
    background-color: #fff;
    bottom: 20%;
}

.calendar .days .active.event {
    padding-bottom: 10px;
    color: #006fdd;
}
/*.calendar .days .active.holiday {*/
/*    padding-bottom: 10px;*/
/*    color: #dd0042;*/
/*}*/
.calendar .goto-today {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0 20px;
    margin-bottom: 20px;
    color: #006fdd;
}

.calendar .goto-today .goto {
    display: flex;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #006fdd;
}

.calendar .goto-today .goto input {
    width: 100%;
    height: 30px;
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 0 20px;
    color: #006fdd;
}

.calendar .goto-today button {
    padding: 5px 10px;
    border: 1px solid #006fdd;
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
    color: #006fdd;
}

.calendar .goto-today button:hover {
    color: #fff;
    background-color: #006fdd;
}

.calendar .goto-today .goto button {
    border: none;
    border-left: 1px solid #006fdd;
    border-radius: 0;
}

.right {
    position: relative;
    width: 40%;
    min-height: 100%;
    padding: 20px 0;
}

.right .today-date {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    padding-left: 70px;
    margin-top: 50px;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.right .today-date .event-day {
    font-size: 2rem;
    font-weight: 500;
}

.right .today-date .event-date {
    font-size: 1rem;
    font-weight: 400;
    color: #878895;
}

.events {
    width: 100%;
    height: 100%;
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-left: 70px;
}

.events .event {
    position: relative;
    width: 90%;
    min-height: 80px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 10px 30px;
    padding-left: 60px;
    color: #333;
    background-color: #e6f0fa;
    margin-bottom: 10px;
    border-radius: 5px 10px 10px 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #6a9bcf;
    overflow: hidden;
}

.events .event::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: #fff;
}

.events .event:hover {
    background-color: #006fdd;
}

.events .event h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.events .event p {
    font-size: 0.9rem;
    line-height: 1.4;
}


@media (max-width: 768px) {
    .calendar__body {
        flex-direction: column;
        width: 100%;
        max-height: none;
    }

    .calendar .days .active {
        font-size: 1rem;
    }

    .calendar .days .today {
        font-size: 1rem;
    }

    .left, .right {
        width: 100%;
        padding: 10px;
    }

    .month {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
    }

    .today-date {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .date-input {
        margin-bottom: 5px;
    }

    .right .today-date {
        padding-left: 0px;
    }

    .events {
        padding-left: 25px;
    }
}


/* Pasantias */
.Pasantiacontainer {
    margin: 0;
}

#pricingPasantia {
    overflow: visible;
}

.ulPasantia {
    margin: 0 !important;
}

@media (max-width: 768px) {
    .d-flex span {
        margin-left: 0 !important;
    }
}


/*Carreras*/

/*Informatica*/
.objetivosDeCarreara {
    background: #006fdd;
    color: #fff;
    border-radius: 40px 0 40px 40px;
    padding: 50px;
    margin: 0;
}

.titulacion {
    margin-top: 50px;
    border-radius: 40px 0 40px 40px;
    padding: 30px;
    text-align: center;
}

.planymalla {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
}

.habilidades {
    background: #006fdd;
    color: #fff;
    border-radius: 40px 40px 40px 0;
    padding: 30px;
}

.habilidades-custom {
    padding: 7px 7px 7px 30px;
    text-align: justify;
}

.perfil {
    text-align: left;
    padding: 40px;
    list-style-type: none;
}

.perfil li {
    text-align: justify;
    hyphenate-limit-chars: 5;
    hyphens: auto;
}

.perfil .row {
    text-align: justify;
    hyphenate-limit-chars: 5;
    hyphens: auto;
}

@media (max-width: 768px) {
    .perfil {
        padding: 30px !important;
    }

    .perfil .row .col {
        flex: 0 0 100%;
    }
}


#habilidades-item {
    text-align: left;
}

#check-habilidad {
    color: #006fdd;
}

.director_carrera {
    text-align: justify;
}

.autoridades {
    text-align: center;
    padding: 20px;
}

.acreditacion {
    border-radius: 40px 0 40px 40px;
    padding: 20px;
}

.parrafo_electronica {
    text-align: justify;
}

.hablilidad_list {
    list-style-type: none;
}

@media (max-width: 768px) {
    .titulacion_item {
        margin-bottom: 20px;
    }
}

@media (max-width: 600px) {
    #containerMision {
        width: 80% !important;
    }

    #valores_row {
        display: flex;
        flex-direction: column;
    }

    #containerInfor {
        width: 90% !important;
    }
}

/* Mecip */
.containermecip-img {
    display: block;
    max-width: 600px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.containermecip-img.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 992px) {
    .containermecip-img {
        width: 100%;
        height: auto;
    }

}

/* Admision */

.custom-testimonial.restore-padding {
    padding: 60px 0 !important;
}

/* Investigacion Formato */
.pricing-list.justified-list {
    text-align: justify !important;
    hyphens: auto;
}

<!--
CSS adicional

-->


.news-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: white;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.image-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Proporción 16:9 */
    background-color: #eaeaea; /* Color de fondo para carga */
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que las imágenes se ajusten correctamente */
}

.category-select {
    padding: 8px;
    width: 100%;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: white;
}

.modal-content {
    border-radius: 8px;
    overflow: hidden;
}

.modal-body img {
    max-width: 100%;
    border-radius: 8px;
}

.news-content p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.no-news {
    text-align: center;
    padding: 50px 20px;
    background-color: white;
    border-radius: 10px;
}


/* Filtro de noticias */
.news-filter {
    text-align: center; /* Centra el contenido */
    margin-bottom: 30px; /* Espacio debajo del filtro */
}

/* Título del filtro */
.news-filter__title {
    font-size: 1.5rem; /* Tamaño del título */
    font-weight: bold; /* Negrita */
    color: #00008b; /* Color del texto */
    margin-bottom: 15px; /* Espacio entre el título y el select */
}

/* Estilo del select */
.news-filter__select {
    padding: 10px 20px; /* Relleno interno */
    font-size: 1rem; /* Tamaño del texto */
    border: 2px solid #00008b; /* Borde azul */
    border-radius: 8px; /* Bordes redondeados */
    background-color: #fff; /* Fondo blanco */
    color: #00008b; /* Color del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el select */
    transition: all 0.3s ease; /* Animación suave */
    appearance: none; /* Elimina el estilo predeterminado del navegador */
    -webkit-appearance: none; /* Para navegadores basados en WebKit */
    -moz-appearance: none; /* Para Firefox */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); /* Flecha personalizada */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Posición de la flecha */
    background-size: 12px; /* Tamaño de la flecha */
}

/* Hover del select */
.news-filter__select:hover {
    border-color: #00008b; /* Cambia el color del borde al pasar el mouse */
}

/* Focus del select */
.news-filter__select:focus {
    outline: none; /* Elimina el contorno predeterminado */
    box-shadow: 0 0 5px #00008b; /* Sombra al hacer foco */
    border-color: #00008b; /* Cambia el color del borde */
}

/* Lista de noticias */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Banner de noticias */
.news-banner {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    align-items: stretch;
    max-height: 250px;
    min-height: 240px;
}

/*noticias paginado */
.news-pagination {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias líneas si es necesario */
}

.news-page-numbers {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap; /* Ajusta los números de página en varias líneas si no caben */
}

.news-page-number {
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 1rem; /* Tamaño de fuente base */
}

.news-page-number.active {
    background: #006fdd;
    color: white;
}

.news-page-btn {
    padding: 0.5rem 1rem;
    background: #006fdd;
    color: white;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
    font-size: 1rem; /* Tamaño de fuente base */
}

.news-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.news-page-number {
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 1.2rem;
}

.news-page-number.active {
    background: #006fdd;
    color: white;
}

.news-page-btn {
    padding: 0.5rem 1rem;
    background: #006fdd;
    color: white;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
    font-size: 1.2rem;; /* Tamaño de fuente base */
}

.news-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.news-page-icon {
    font-size: 1.8rem;
    color: #007bff; /* Color activo */
    cursor: pointer;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.news-page-icon:hover {
    color: #0b198f;
}

.news-page-icon.disabled {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    .news-pagination {
        gap: 0.75rem; /* Reducir el espacio entre elementos */
    }

    .news-page-number,
    .news-page-btn {
        padding: 0.4rem 0.8rem; /* Reducir el tamaño del padding */
        font-size: 0.9rem; /* Reducir el tamaño de la fuente */
    }
}

/* Media Queries para pantallas muy pequeñas */
@media (max-width: 480px) {
    .news-pagination {
        gap: 0.5rem; /* Espacio más pequeño entre elementos */
    }

    .news-page-number,
    .news-page-btn {
        padding: 0.3rem 0.6rem; /* Padding aún más reducido */
        font-size: 0.8rem; /* Fuente más pequeña */
    }
}

.news-banner:hover {
    transform: translateY(-5px);
}

.news-banner__image-wrapper {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.news-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-banner__image:hover {
    transform: scale(1.1);
}

.news-banner__content {
    flex: 2;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-banner__date {
    font-size: 0.9rem;
    color: #888;
}

.news-banner__title {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.news-banner__link {
    text-decoration: none;
    color: #007bff;
    transition: color 0.3s ease;
}

.news-banner__link:hover {
    color: #0056b3;
}

.news-banner__excerpt {
    font-size: 1rem;
    color: #555;
}

/* Responsive */
@media (max-width: 768px) {
    .news-banner {
        flex-direction: column;
        max-height: max-content;
    }

    .news-banner__image-wrapper {
        max-width: none;
        height: 200px;
    }
}


.pricing-list.justified-list li {
    display: inline-block;
    margin-right: 10px;
}

.pricing-list.justified-list li:last-child {
    margin-right: 0;
}

.pricing.full-image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    padding: 0;
}

/* Docentes con Publicaciones */
.custom-header {
    width: 300px;
}

.responsive-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 480px) {
    .custom-header {
        width: 250px;
    }

    .responsive-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 481px) and (max-width: 758px) {
    .custom-header {
        width: 500px;
    }

    .responsive-row {
        grid-template-columns: 1fr;
    }

    .btn-card {
        width: 100%;
        margin-top: 8px;
        font-size: 14px;
    }
}

.btn-card {
    font-size: 12px;
    margin-top: 10px;
    border-radius: 15px;
    transition: 0.5s;
    color: #fff;
    border: 1px solid #006fdd;
    background: #006fdd;
    box-shadow: 0 2px 5px rgba(65, 84, 241, 0.4);
}

.btn-card .arrow-icon {
    transition: transform 0.5s;
}

.btn-card:hover {
    background: transparent;
}

.btn-card:hover .arrow-icon {
    transform: translateX(5px);
}

/* Biblioteca Digital */
.news-banner__image.img-biblioteca {
    object-fit: contain !important;
    max-height: 150px;
}

/* wifi */
.img-wifi {
    max-height: 500px;
    width: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

@media (max-width: 768px) {
    .img-wifi {
        width: 100%;
    }
}

/* servicios informaticos */
.containerText.servicios-informaticos {
    text-align: left;
}


/*Graduados*/
.wrapper {
    padding: 15px 10px;
}

.double-slider-box {
    background-color: #fff;
    padding: 5px 20px;
    border-radius: 10px;
    width: 100%;
}

h6.range-title {
    margin-bottom: 2.5rem;
    text-align: center;
}

.range-slider {
    position: relative;
    width: 100%;
    height: 5px;
    margin: 20px 0;
    background-color: #e9e9e9;
    border-radius: 10px;
}

.slider-track {
    height: 100%;
    position: absolute;
    background-color: #0d6efd;
}

.range-slider input {
    position: absolute;
    width: 100%;
    background: none;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 3px solid #0d6efd;
    background: #0d6efd;
    pointer-events: auto;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 .125rem .5625rem -0.125rem rgba(0, 0, 0, .25);
}

input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 3px solid #FFF;
    background: #FFF;
    pointer-events: auto;
    -moz-appearance: none;
    cursor: pointer;
    box-shadow: 0 .125rem .5625rem -0.125rem rgba(0, 0, 0, .25);
}

.tooltipSlider {
    padding: .25rem .5rem;
    border: 0;
    background: #373f50;
    color: #fff;
    font-size: .75rem;
    line-height: 1.2;
    border-radius: .25rem;
    bottom: 120%;
    display: block;
    position: absolute;
    text-align: center;
    white-space: nowrap;
}

/*modal*/
.modalButton {
    background: #0e80e6;
    color: white;
}

.modalButton:focus {
    color: #0d65ff;
    background: transparent;

}

.modal-body {
    z-index: 10;
}


.min-tooltip {
    left: 50%;
    transform: translateX(-30%) translateY(-60%);
    z-index: 5;
}

.max-tooltip {
    right: 50%;
    transform: translateX(30%) translateY(-60%);
}

.input-box {
    display: flex;
    height: 30px;
}

.min-box,
.max-box {
    width: 50%;
}

.min-box {
    margin-right: .5rem;
}

.input-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-addon {
    display: flex;
    align-items: center;
    padding: .2rem .8rem;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4b566b;
    text-align: center;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #d4d7e5;
    border-radius: .25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-field {
    margin-left: -1px;
    padding: .325rem .45rem;
    font-size: 0.8125rem;
    border-radius: .25rem;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    color: #4b566b;
    background-color: #fff;
    border: 1px solid #d4d7e5;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-field:focus {
    outline: none;
}

#openModalBtn i {
    font-size: 2rem;
}

@media (max-width: 1400px) {
    .filter-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .filter-row {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        font-size: 14px;
    }

    .range-title {
        font-size: .9rem;
    }

    .filter-component {
        max-height: 400px;
        overflow-y: auto;
        display: none;
    }
}

@media (max-width: 720px) {
    #filterIconContainer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #filterIconContainer a {
        height: 35px;
    }
}

@media (min-width: 721px) {
    #filterIconContainer {
        display: none;
    }
}

.select2-results__options {
    max-height: 100px;
    overflow-y: auto;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 40px;
    max-height: 60px;
    overflow-y: auto;
}

.select2-container--bootstrap-5 .select2-selection--multiple::-webkit-scrollbar {
    width: 8px;
    border-radius: 5px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 8px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple::-webkit-scrollbar-thumb:hover {
    background: #0b5ed7;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
    scrollbar-width: thin;
    scrollbar-color: #0d6efd transparent;
}

/*Tabla de Graduados*/
.table__bodyGraduados {
    padding: 0;
    max-height: 380px;
    height: 537px;
    width: 85%;
    margin: .8rem auto;
    overflow: auto;
}

.table__bodyGraduados::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

.table__bodyGraduados::-webkit-scrollbar-thumb {
    border-radius: .5rem;
    background-color: #0004;
    visibility: hidden;
}

.table__bodyGraduados:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

.tableGraduados .table__bodyGraduados td {
    padding: 0.2rem;
    text-align: center;
    min-width: 9rem;
    width: 9rem;
    height: 5px;
    min-height: 5px;
}

.tableGraduados .table__bodyGraduados td:first-child {
    min-width: 5rem;
    width: 5rem;
}

.tableGraduados .table__bodyGraduados th:first-child {
    min-width: 5rem;
    width: 5rem;
}

.tableGraduados .table__bodyGraduados th {
    padding: 0.2rem;
    text-align: center;
    min-width: 9rem;
    width: 9rem;
}

.table-pagination {
    width: 85%;
    margin: .5rem auto;
}


@media (max-width: 768px) {
    .tableGraduados .table__bodyGraduados td:first-child {
        min-width: 2rem;
        width: 2rem;
    }

    .table__bodyGraduados {
        height: 310px;
    }

    .tableGraduados .table__bodyGraduados th:first-child {
        min-width: 3rem;
        width: 3rem;
    }

    .tableGraduados .table__bodyGraduados th {
        width: 7rem;
        min-width: 7rem;
    }

    .tableGraduados .table__bodyGraduados td {
        width: 7rem;
        min-width: 7rem;
    }

    td, th {
        padding: 0.2rem;
        font-size: 12px;
        min-width: 5rem;
    }

    td:not(:first-of-type) {
        min-width: 9rem;
    }

}

/*Sección de Llamados*/
.llamados-container {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 15px;
    margin-bottom: 20px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
.llamados-container strong{
    color: #006fdd;
    font-weight: 600;
}

.llamado {
    margin-bottom: 30px;
}

.evento {
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 3px solid #007bff;
}

.llamados-container::-webkit-scrollbar {
    width: 8px;
}

.llamados-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.llamados-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
    display:none;
}

.llamados-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.formularios-fijos .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.5s ease !important;
    background-color: #006fdd;
    color: #fff;
    border: 1px solid #006fdd;
}
.card {
    height: 100%;

}
.formularios-fijos .card .card-body i {
    color: white;
}

.formularios-fijos .card:hover .card-body i {
    color: #0a53be;
}

.formularios-fijos .card:hover {
    transform: translateY(-5px);
    background-color: transparent;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #0a53be;
}

.formularios-fijos .btn {
    font-size: 1rem;
    padding: 10px;
    border-radius: 5px;
}

/* Responsive design */
@media (max-width: 768px) {
    .formularios-fijos .col-md-3 {
        flex: 0 0 50%; /* Dos columnas en pantallas pequeñas */
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    @media (max-width: 576px) {
        .formularios-fijos .col-md-3 {
            flex: 0 0 100%; /* Una columna en pantallas muy pequeñas */
            max-width: 100%;
        }
    }
}
/*Resena Historica*/
.engineering-programs-history {
    padding: 0;
}
/* Plantilla de columnas en admision */
.engineering-programs {
    padding: 0 0 60px 0;
}

.engineering-programs .section-title {
    color: #333;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
}

.program-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.program-icon {
    font-size: 3rem;
    color: #012970;
    margin-bottom: 5px;
    min-height: 80px;
}

#engineering-mision .program-icon{
    min-height: 130px;
}

.program-card h3 {
    color: #012970;
    font-size: 1.5rem;
    margin-bottom: 15px;
    min-height: 60px;
    align-content: center;
}

.program-card p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    flex-grow: 1;
    min-height: 56px;
}

.program-card:hover i{
    color: #006fdd !important;
}

.program-card:hover h2{
    color: #006fdd !important;
}
.program-card:hover h3{
    color: #006fdd !important;
}
#indexcarrer p{
    font-size: clamp(1.1rem, 5vw, 0.9rem) !important;
}
@media (max-width: 992px) {
    .col-md-6 {
        margin-bottom: 30px;
    }
}

/*Estilos para Carreras */
/* Estilos alternativos con nombres diferentes */
.alt-program-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 0;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.alt-program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.program-icon i {
    transition: font-size 0.3s ease, color 0.3s ease;
}
.program-card:hover .program-icon > i {
    font-size: 3.3rem;
}

#indexcarrer .program-icon i {
    color:  #012970;
}
#indexcarrer .program-card:hover .program-icon i {
    color: #006fdd;
}
#indexcarrer .program-card:hover h3 {
    color: #006fdd !important;
}

.alt-program-icon {
    font-size: 3rem;
    background-color: #006fdd;
    color: #fff;
    padding: 30px 20px;
    margin-bottom: 0;
    width: 100%;
}

.alt-program-icon i {
    color: #fff;
}

.alt-program-icon h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 10px;
    margin-bottom: 0;
}

.alt-program-content {
    padding: 30px 20px;
    flex-grow: 1;
}

.alt-program-content p {
    line-height: 1.6;
    text-align: justify;
    hyphenate-limit-chars: 5;
    hyphens: auto;
}

.alt-habilidades-item .row {
    text-align: left;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .alt-habilidades-item .row .col {
        flex: 0 0 100%;
    }
}

.alt-check-habilidad {
    color: #006fdd;
    margin-right: 5px;
}

/* Estilos para la sección de autoridades principales */
.main-authorities {
    padding: 60px 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) -1%, rgba(13, 101, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

.authority-card {
    background: none;
    border: none !important;
    padding: 25px 20px 25px 60px;
    position: relative;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 2;
    transition: transform 0.3s ease;
}

.authority-card:nth-child(odd) {
    background: none;
    padding: 25px 60px 25px 20px;
    position: relative;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 2;
}

.authority-card:nth-child(odd)::before {
    content: "";
    background-color: #ffffff;
    position: absolute;
    border-top-right-radius: 20px;
    box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.1);
    border-bottom-right-radius: 20px;
    top: 0;
    right: 0;
    width: 100svw;
    height: 100%;
    z-index: -1;
    border: 1px solid #999999;
}

.authority-card:nth-child(even)::before {
    content: "";
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.1);
    width: 100svw;
    height: 100%;
    border-radius: inherit;
    z-index: -1;
    border: 1px solid #999999;
}

.authority-card:hover {
    transform: translateY(-10px);
}

.authority-image img {
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 5px;
    background: #fff;
}

.authority-content {
    background: transparent !important;
    margin: 0 !important;
    text-align: left;
    height: 100%;
}

.authority-content h2 {
    font-size: 2.5rem !important; /* Título principal más grande */
    color: #006fdd;
    margin-bottom: 10px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3),
    -1px -1px 3px rgba(255, 255, 255, 0.5);
}

.authority-content h3 {
    font-size: 1.5rem !important; /* Subtítulo más grande */
    color: #333;
    margin-bottom: 15px;
}

.authority-content {
    background: #fff !important; /* Fondo solo en contenido */
    border-radius: 10px;
    padding: 2rem !important;
}

.authority-content p {
    font-size: 1.1rem !important; /* Párrafo más grande */
    line-height: 1.6;
    color: #666;
}

/* Contenedor de la imagen */
.image-wrapper {
    padding: 1rem; /* Espacio alrededor de la imagen */
    background: none; /* Fondo claro para mejor contraste */
    border-radius: 10px; /* Borde suave */
    overflow: hidden; /* Asegura que la imagen no se salga */
}

/* Control de imágenes */
.authority-image img {
    width: 100%; /* Ocupa el 100% del contenedor */
    height: auto; /* Mantiene la proporción */
    object-fit: contain; /* Muestra toda la imagen sin recortar */
    max-width: 100%; /* Evita desbordamiento horizontal */
    max-height: 400px; /* Altura máxima ajustable */
    margin: 0 auto; /* Centrado horizontal */
    display: block; /* Elimina espacio debajo de la imagen */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .authority-card .row {
        flex-direction: column-reverse;
    }

    .image-wrapper {
        padding: 0.5rem;
    }

    .authority-image img {
        max-height: 300px;
    }

    .authority-content {
        text-align: center;
    }

    .authority-content h2 {
        font-size: 1.75rem !important;
    }

    .authority-content h3 {
        font-size: 1.25rem !important;
    }

    .authority-content p {
        font-size: 1rem !important;
    }
}

/* Estilos para la sección de otros miembros */
.other-members {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.other-members .section-title {
    text-align: center;
    color: #006fdd;
    margin-bottom: 40px;
    font-size: 2rem;
    font-weight: bold;
}

.other-members .content {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.other-members .content:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.other-members h3 {
    color: #006fdd;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.other-members h4 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.other-members p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

/* Ajustes adicionales para mantener la coherencia con el diseño existente */
.about, .about2, .other-members {
    padding: 60px 0;
}

.about .content, .about2 .content, .other-members .content {
    padding: 30px;
}

.about h1, .about2 h1 {
    color: #006fdd;
    font-size: 2rem;
    margin-bottom: 10px;
}

.about h2, .about2 h2 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.about p, .about2 p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

.about img, .about2 img {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilos responsivos */
@media (max-width: 992px) {
    .other-members .content {
        margin-bottom: 30px;
    }

    p {
        padding: 0 !important;
    }
}

/* Chartsjs */
.chartContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 40px;
}

.chartContainer a {
    cursor: pointer;
}

.chart {
    width: 50%;
}

#myChart {
    min-height: 200px;
    height: auto;
    width: 100%;
}

@media (max-width: 720px) {
    .chart {
        width: 100%;
        height: 100%;
    }

    .chartContainer {
        padding: 20px 10px;
    }
}

/*Ajustes para cartas en Consejo Directivo*/
/* Estilo base para la tarjeta */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 100%;
    perspective: 1000px; /* Efecto 3D */
    display: flex; /* Añadido para mejor alineación */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Contenedor interno de la tarjeta */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px; /* Bordes redondeados */
    display: flex; /* Añadido para mejor alineación */
    flex-direction: column; /* Estructura vertical */
}

/* Efecto de volteo al pasar el cursor */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Estilo para la parte frontal */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px; /* Bordes redondeados */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Previene desbordamiento */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Estilo específico para la parte frontal */
.flip-card-front {
    background-color: #fff;
    color: black;
    z-index: 2; /* Asegura que esté por encima cuando no está volteada */
}

/* Estilo específico para la parte trasera */
.flip-card-back {
    background-color: #ffffff; /* Color de fondo blanco */
    transform: rotateY(180deg); /* Voltear la parte trasera */
    z-index: 1; /* Asegura que esté por debajo cuando no está volteada */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 50px;
}

/* Título principal en la parte trasera */
.info-title {
    font-size: 1.2em; /* Tamaño grande para el título */
    margin-bottom: 15px; /* Espacio debajo del título */
    color: #006fdd !important; /* Color azul para destacar el título */
}

.subtitulo {
    font-size: 1em; /* Tamaño más grande para los subtítulos */
    font-weight: bold; /* Negrita para destacar */
    margin: 5px 0; /* Espaciado */
    color: #231e2f !important; /* Color oscuro */
}

/* Detalles del correo */
.detalle-correo {
    font-size: 0.9em; /* Tamaño reducido para el correo */
    word-break: break-word; /* Ajuste de texto para que no se desborde */
    margin: 5px 0; /* Espaciado */
    color: #231e2f !important; /* Color oscuro */
}

/* Detalles de la carrera */
.detalle-carrera {
    font-size: 0.9em; /* Tamaño reducido para la carrera */
    margin: 5px 0; /* Espaciado */
    color: #231e2f !important; /* Color oscuro */
}

/* Asegura que la tarjeta flip mantenga las mismas dimensiones que las otras tarjetas */
.member.flip-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    min-height: 420px; /* Aumentado: Altura mínima para tarjetas más largas */
}

/* Ajustes para la sección de imagen */
.flip-card .member-img {
    height: 280px; /* Aumentado: Más espacio para las imágenes */
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

.flip-card .member-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio */
}

/* Media query para el rango de 990px a 1130px */
@media (min-width: 990px) and (max-width: 1130px) {
    .team .row > div {
        flex: 0 0 33.3333%; /* 3 columnas */
        max-width: 33.3333%; /* Ancho máximo del 33.33% */
    }
}

/* Ajustes responsivos */
@media (max-width: 992px) {
    .member.flip-card {
        min-height: 450px; /* Ajuste para pantallas medianas */
    }

    .flip-card .member-img {
        height: 300px; /* Ajuste para pantallas medianas */
    }
}

@media (max-width: 768px) {
    .member.flip-card {
        min-height: 480px; /* Ajuste para pantallas más pequeñas */
    }

    .flip-card .member-img {
        height: 320px; /* Ajuste para pantallas más pequeñas */
    }
}

@media (max-width: 576px) {
    .member.flip-card {
        min-height: 500px; /* Ajuste para móviles */
    }

    .flip-card .member-img {
        height: 340px; /* Ajuste para móviles */
    }
}

.info-flip {
    position: absolute;
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, 50%); /* Ajuste preciso para centrar */
    display: flex; /* Uso de flexbox para alinear elementos internos */
    align-items: center; /* Centrado vertical de los elementos internos */
    justify-content: center; /* Centrado horizontal de los elementos internos */
    gap: 20px; /* Espaciado entre los elementos internos */
    width: 100%; /* Ocupa| el ancho del contenedor padre */
    text-align: center; /* Asegura que el texto interno esté centrado */
}

/* Servicios Informaticos */
/* Estilo base para pantallas grandes */
.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 2fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.justify-text {
    text-align: justify;
    hyphenate-limit-chars: 5;
    hyphens: auto;
    text-wrap: pretty;
}

.parent a {
    display: flex;
    text-decoration: none;
    align-items: center;
    padding: 10px 5px;
    border: 1px solid #d9d9d9d9;
    justify-content: center;
    border-radius: 5px;
    height: 100%;
    flex-direction: column;
    transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.parent a i {
    position: relative;
    font-size: 2rem;
    opacity: 1;
    transition-delay: 0.5s;
    transition: font-size 0.3s ease-in, opacity 0.3s ease-in;
}

.parent a:hover {
    transform: scale(104%);
    color: white;
    background-color: #0a6ebd;
}

.parent a span {
    margin: 10px 0;
    transition: opacity 0.3s ease;
}

.parent a:hover i {
    /*font-size: 3rem;*/
    opacity: 1;
}

.div1 {
    grid-area: 1 / 1 / 3 / 4;
}

.div2 {
    grid-area: 1 / 4 / 3 / 6;
}

.div3 {
    grid-area: 1 / 6 / 3 / 7;
}

.div4 {
    grid-area: 4 / 1 / 7 / 3;
}

.div5 {
    grid-area: 4 / 3 / 5 / 5;
}

.div6 {
    grid-area: 3 / 1 / 4 / 3;
}

.div7 {
    grid-area: 3 / 5 / 5 / 7;
}

.div8 {
    grid-area: 3 / 3 / 4 / 5;
}

.div9 {
    grid-area: 5 / 4 / 7 / 7;
}

.div10 {
    grid-area: 5 / 3 / 7 / 4;
}

@media (max-width: 1024px) {
    .parent {
        grid-template-columns: repeat(2, 2fr);
        grid-template-rows: repeat(5, 1fr);
    }

    .div1 {
        grid-area: 1 / 1 / 1 / 1;
    }

    .div2 {
        grid-area: 1 / 2 / 1 / 2;
    }

    .div3 {
        grid-area: 2 / 1 / 2 / 1;
    }

    .div4 {
        grid-area: 2 / 2 / 2 / 2;
    }

    .div5 {
        grid-area: 3 / 1 / 3 / 1;
    }

    .div6 {
        grid-area: 3 / 2 / 3 / 2;
    }

    .div7 {
        grid-area: 4 / 1 / 4 / 1;
    }

    .div8 {
        grid-area: 4 / 2 / 4 / 2;
    }

    .div9 {
        grid-area: 5 / 1 / 5 / 1;
    }

    .div10 {
        grid-area: 5 / 2 / 5 / 2;
    }
}

@media (max-width: 768px) {
    .parent {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
    }
    .parent a i {
        position: absolute;
        opacity: 0;
    }

    .parent a:hover span {
        opacity: 0;
    }

    .parent a:hover i {
        font-size: 3rem;
        opacity: 1;
    }

    .div1 {
        grid-area: 1 / 1 / 1 / 1;
    }

    .div2 {
        grid-area: 1 / 2 / 1 / 2;
    }

    .div3 {
        grid-area: 2 / 1 / 2 / 1;
    }

    .div4 {
        grid-area: 2 / 2 / 2 / 2;
    }

    .div5 {
        grid-area: 3 / 1 / 3 / 1;
    }

    .div6 {
        grid-area: 3 / 2 / 3 / 2;
    }

    .div7 {
        grid-area: 4 / 1 / 4 / 1;
    }

    .div8 {
        grid-area: 4 / 2 / 4 / 2;
    }

    .div9 {
        grid-area: 5 / 1 / 5 / 1;
    }

    .div10 {
        grid-area: 5 / 2 / 5 / 2;
    }
}

@media (max-width: 480px) {
    .parent {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(10, auto);
        grid-gap: 10px;
    }

    .div1 {
        grid-area: 1 / 1 / 1 / 1;
    }

    .div2 {
        grid-area: 2 / 1 / 2 / 1;
    }

    .div3 {
        grid-area: 3 / 1 / 3 / 1;
    }

    .div4 {
        grid-area: 4 / 1 / 4 / 1;
    }

    .div5 {
        grid-area: 5 / 1 / 5 / 1;
    }

    .div6 {
        grid-area: 6 / 1 / 6 / 1;
    }

    .div7 {
        grid-area: 7 / 1 / 7 / 1;
    }

    .div8 {
        grid-area: 8 / 1 / 8 / 1;
    }

    .div9 {
        grid-area: 9 / 1 / 9 / 1;
    }

    .div10 {
        grid-area: 10 / 1 / 10 / 1;
    }
}

/*Consultar Puntaje*/
@media (max-width: 500px) {
    #consultarPuntaje {
        width: 85% !important;

    }

    #consultarPuntaje:hover {
        width: 95% !important;

    }
}

.btnConsultar {
    background-color: #006fdd;
    border: 1px solid #0a6ebd !important;
    transition: background-color 0.2s ease-in;
}

.btnConsultar:hover {
    background-color: transparent;
    color: #0d65ff !important;
}
.card-footer {
    background-color: #0a6ebd;
}

.toast-container {
    top: 42%;
}

.btnResolucion {
    cursor: pointer;
    color: inherit;
    transition: color 0.3s ease;
}

.btnResolucion:hover {
    color: #0a6ebd;
}
/*Formatos Recomendados*/
.docLinks {
    transition: transform 0.3s ease !important;
    color: #0a0a0a;
}

.docLinks:hover {
    transform: translateX(20px);
    text-decoration: underline;
}
/*Eventos de Llamados dentro de llamados*/
.cardllamados {
    border: 1px solid lightgrey;
  border-radius: 10px;
  opacity: 0.4; /* Invisible por defecto */
  transform: scale(0.9); /* Empieza un poco abajo */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.cardllamados.animate {
  opacity: 1; /* Visible */
  transform: translateY(0); /* Posición final */
}
.cardllamados:hover .title-evento {
    background: linear-gradient(135deg, #0052a3 0%, #003b73 100%);
}
.title-evento {
    min-height: 80px;
    height: auto;
    width: 100%;
    border: none;
    padding: 15px;
    align-items: center;
    text-align: start;
    font-weight: bold;
    font-size: 18px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #006fdd 0%, #0052a3 100%);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 111, 221, 0.2);
    display: flex;
    justify-content: flex-start;
    transition: background 0.4s ease-in-out;
}
.title-evento::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
    transform: skewX(-15deg) translateX(10px);
}
/* Enlaces de documentos con hover mejorado */
.document-link {
    color: #006fdd;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    background: rgba(0, 111, 221, 0.05);
    border: 1px solid rgba(0, 111, 221, 0.1);
    margin: 0.2rem 0;
    position: relative;
    overflow: hidden;
}

.document-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.document-link:hover::before {
    left: 100%;
}

.document-link:hover {
    color: white;
    background: linear-gradient(135deg, #006fdd 0%, #0052a3 100%);
    transform: translateX(8px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 111, 221, 0.3);
    border-color: #006fdd;
}

.document-link i {
    margin-right: 8px;
    transition: all 0.3s ease;
}

.document-link:hover i {
    transform: scale(1.3) rotate(10deg);
}
/* Responsive styles */
@media (max-width: 768px) {
    .title-evento {
        min-height: 60px;
        padding: 15px 20px;
    }

    .title-evento h3 {
        font-size: 1.1rem;
    }

    .card_content {
        padding: 20px;
    }

    .cardllamados:hover .card_content {
        padding: 22px;
    }

    .cardllamados:hover {
        transform: translateY(-8px) scale(1.02);
    }
}

@media (max-width: 576px) {
    #Titulo-Consejo {
        font-size: 1.2rem;
    }

    .cardllamados:hover {
        transform: translateY(-5px) scale(1.01);
    }
}

/* Optimización de rendimiento para parallax */
.cardllamados,
.llamado {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.card_key_points a:hover{
    text-decoration: underline;
}