.montserrat-font {
  font-family: 'Montserrat', sans-serif;
 }
 .circle-icon {
 width: 50px; /* Tamaño del círculo */
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #005E9F; /* Color de fondo, puedes cambiarlo según tus preferencias */
 color: #fff; /* Color del icono */
 border-radius: 50%; /* Hace que el elemento sea circular */ 
}
 .circle-university {
 width: 180px; /* Tamaño del círculo */
 height: 180px; /* Tamaño del círculo */
 border-radius: 50%; /* Forma de círculo */
 overflow: hidden; /* Oculta contenido adicional fuera del círculo */
 background-color: #005E9F; /* Color de fondo del círculo */
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 margin: 0 auto; /* Centra el círculo en la columna */
}
 .circle-university img {
 max-width: 90%; /* Asegura que la imagen no desborde el círculo */
 max-height: 90%; /* Asegura que la imagen no desborde el círculo */
 object-fit: contain;
}
footer {
 background-color: #29925B;
 color: white;
}
footer .nav-link {
color: white !important;
}
.accordion-button.active {
background-color: transparent; /* Puedes cambiar 'transparent' por otro color si lo prefieres */
}

.footer-custom {
padding-right: 30px; /* Ajusta según el padding lateral de tu container principal */
padding-left: 80px;
}
.footer-custom .col {
padding-right: 5px; /* Reduce el padding derecho */
padding-left: 5px;  /* Reduce el padding izquierdo */
}

.footer-custom .col img {
max-width: 100%; /* Asegura que la imagen ocupe todo el espacio posible */
display: block; /* Asegura que la imagen no tenga espacio extra alrededor */
margin-bottom: 0; /* Elimina el margen inferior */
}

.footer-custom .col:first-child {
padding-right: 0; /* Elimina el padding derecho del primer elemento */
}

.footer-custom .col:last-child {
padding-left: 0; /* Elimina el padding izquierdo del último elemento */
}

.footer-custom .col h5 {
margin-top: 20px; /* Ajusta este valor según necesites */
}

.footer-custom .nav-link {
padding-top: 10px; /* Aumenta el padding para bajar los enlaces */
}

.footer-custom img {
width: 300px; /* Establece un tamaño inicial para pantallas grandes */
height: auto; /* Mantiene la proporción de la imagen */
}

@media (max-width: 768px) {
.footer-custom img {
   width: 250px; /* Tamaño más pequeño para tablets */
}
}

@media (max-width: 480px) {
.footer-custom img {
   width: 100px; /* Tamaño aún más pequeño para teléfonos móviles */
}
}

.footer-text-small {
font-size: 0.7rem; /* Reduce el tamaño del texto */
}

@media (max-width: 768px) {
.footer-text-small {
   font-size: 0.6rem; /* Ajusta para dispositivos más pequeños si es necesario */
}
}

.footer-custom .nav-item {
padding-right: 15px; /* Ajusta según necesidades */
}

/* Reducir el margen inferior de los ítems del carrusel */
.carousel-item {
margin-bottom: 0; /* Ajusta este valor según sea necesario */
}

/* Reducir el margen inferior de los ítems del carrusel */
.carousel-item-universities {
  margin-bottom: 0; /* Ajusta este valor según sea necesario */
  }

/* Ajustar el relleno inferior del contenedor del carrusel */
#carouselUniversidades {
  margin-bottom: 0;
padding-bottom: 0; /* Ajusta este valor según sea necesario */
}

/* Si los textos debajo de las imágenes están empujando hacia abajo, ajusta su margen también */
.circle-university + p {
margin-top: 0; /* Ajusta este valor según sea necesario */
}

/* Asegúrate de que no haya estilos adicionales añadidos por bootstrap que puedan estar afectando */
.carousel-indicators {
margin-bottom: 0;
}


.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover; /* Asegura que la imagen cubra completamente el espacio sin deformarse */
object-position: center center; /* Centra la imagen para cortes óptimos */
}

.carousel-item-universities img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra completamente el espacio sin deformarse */
  object-position: center center; /* Centra la imagen para cortes óptimos */
  }

/* Ajustes para pantallas con una resolución alta */
@media (min-width: 1800px) {
.carousel-item {
  height: 900px; /* Un ejemplo de ajuste de altura basado en tu caso específico */
}
}

/* Ajustes para pantallas estándar */
@media (max-width: 1799px) {
.carousel-item {
  height: 70vh; /* Altura basada en una proporción del ancho de la pantalla */
}
}


/* Estilos por defecto para pantallas grandes */
.card-title {
font-size: 1.02rem; /* Tamaño de fuente estándar para títulos de tarjetas */
}

.card-text {
font-size: 0.75rem; /* Tamaño de fuente estándar para textos de tarjetas */
}

.btn {
font-size: 1rem; /* Tamaño de fuente estándar para botones */
}

/* Media queries para ajustar el tamaño del texto en pantallas más pequeñas */
@media (max-width: 768px) {
.card-title {
 font-size: 1rem; /* Reducir el tamaño de los títulos de tarjetas */
}

.card-text {
 font-size: 0.85rem; /* Reducir el tamaño de los textos de tarjetas */
}

.btn {
 font-size: 0.85rem; /* Reducir el tamaño del texto en botones */
}
}

.special-card {
background-color: #005E9F; /* Un azul similar al de Bootstrap */
color: white; /* Texto blanco */
}

.special-card .circle-icon {
background-color: white; /* Fondo blanco para el círculo */
color: #005E9F; /* Icono azul */
}

.special-card .card-text,
.special-card .card-title {
color: white; /* Asegurar que el texto es blanco */
}

@media (min-width: 768px) { /* Solo aplicar estos estilos en pantallas medianas o grandes */
.featurette-image {
 max-width: 90%; /* Reduce el tamaño máximo de la imagen */
 display: block; /* Asegura que la imagen se trate como un bloque para centrar */
 margin-left: auto; /* Centra la imagen automáticamente a la izquierda */
 margin-right: auto; /* Centra la imagen automáticamente a la derecha */
}
}

.btn-info-custom {
color: #005E9F; /* Cambia el color del texto */
border-color: #005E9F; /* Cambia el color del borde */
}

.btn-info-custom:hover {
color: #ffffff; /* Cambia el color del texto al pasar el mouse */
background-color: #005E9F; /* Cambia el fondo al pasar el mouse */
border-color: #005E9F; /* Mantiene el color del borde al pasar el mouse */
}

@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

#studentsCounter, #coursesCounter {
display: inline-block;  /* Permite la transformación */
opacity: 0;  /* Inicia invisible */
animation: fadeInScale 2s ease forwards;  /* Aplica la animación */
color: #005E9F; /* Color azul para los números */
font-size: 24px; /* Aumenta el tamaño de la fuente */
font-weight: bold; /* Hace el texto en negrita */
}


html, body {
width: 100%;
overflow-x: hidden; /* Oculta el desbordamiento horizontal */
}

.container, .container-fluid {
padding-left: 15px;
padding-right: 15px;
}

* {
box-sizing: border-box; /* Incluye padding y border en el ancho del elemento */
}
 .bd-placeholder-img {
   font-size: 1.125rem;
   text-anchor: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
 }

 @media (min-width: 768px) {
   .bd-placeholder-img-lg {
     font-size: 3.5rem;
   }
 }

 .b-example-divider {
   width: 100%;
   height: 3rem;
   background-color: rgba(0, 0, 0, .1);
   border: solid rgba(0, 0, 0, .15);
   border-width: 1px 0;
   box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
 }

 .b-example-vr {
   flex-shrink: 0;
   width: 1.5rem;
   height: 100vh;
 }

 .bi {
   vertical-align: -.125em;
   fill: currentColor;
 }

 .nav-scroller {
   position: relative;
   z-index: 2;
   height: 2.75rem;
   overflow-y: hidden;
 }

 .nav-scroller .nav {
   display: flex;
   flex-wrap: nowrap;
   padding-bottom: 1rem;
   margin-top: -1px;
   overflow-x: auto;
   text-align: center;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
 }

 .btn-bd-primary {
   --bd-violet-bg: #712cf9;
   --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

   --bs-btn-font-weight: 600;
   --bs-btn-color: var(--bs-white);
   --bs-btn-bg: var(--bd-violet-bg);
   --bs-btn-border-color: var(--bd-violet-bg);
   --bs-btn-hover-color: var(--bs-white);
   --bs-btn-hover-bg: #6528e0;
   --bs-btn-hover-border-color: #6528e0;
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
   --bs-btn-active-color: var(--bs-btn-hover-color);
   --bs-btn-active-bg: #5a23c8;
   --bs-btn-active-border-color: #5a23c8;
 }

 .bd-mode-toggle {
   z-index: 1500;
 }

 .bd-mode-toggle .dropdown-menu .active .bi {
   display: block !important;
 }

 /* Spiner de carga*/

 .lds-dual-ring,
.lds-dual-ring:after {
  box-sizing: border-box;
  margin:0 auto;
}
.lds-dual-ring {
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6.4px solid #0d6efd;
  border-color: #0d6efd transparent #0d6efd transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}