.double-height {
    height: 50em; /* Ajusta la altura según tus necesidades */
}

/* Estilos para la animación */
@keyframes pulsate {
  0% { 
    opacity: 0.2; transform: scale(0.8); 
  }
  50% { 
    opacity: 1; transform: scale(1.2); 
  }
  100% { 
    opacity: 0.2; transform: scale(0.8); 
  }
}

/* Aplica la animación a la clase pulsate */
.pulsate {
  animation: pulsate 2s infinite;
}

.color-rojo{
  color : red;
}

.bar {
  position: static;
  top: 0;
  left: 0;

  width: 100%;

  padding: 25px 0;

  background-color: #e74c3c;
  color: white;

  font-family: Gelasio;
  font-size: 30px;
}

.bar_content {
  display: block; /* Important to give the content a width */

  width: 100%;
  transform: translateX(100%); /* Animation start out of the screen */

  /* Add the animation */
  animation: move 14s linear infinite ;
}

/* Create the animation */
@keyframes move {
  to { 
    transform: translateX(-100%); 
  }
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}

.card-img-wrap {
overflow: hidden;
position: relative;
}
.card-img-wrap:after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.3);
opacity: 0;
transition: opacity .25s;
}
.card-img-wrap img {
transition: transform .25s;
width: 100%;
}
.card-img-wrap:hover img {
transform: scale(1.2);
}
.card-img-wrap:hover:after {
opacity: 0;
}

/*efecto para letras del h1 Colegio altas cumbres*/

.animate-charcter {
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  /*text-fill-color: transparent;*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 90px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

#covid{
    background: #F4D03F;

}

/* You can adjust the image size by increasing/decreasing the width, height */
.custom-circle-image {
  width: 20vw; /* note i used vw not px for better responsive */
  height: 20vw;
}

#pie{
    background: blanchedalmond;
}

#ciclo{
    color: blanchedalmond;
}

.nav-link{
    text-decoration-color: white;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans Georgian', sans-serif;
}

.jumbotron {
  align-items: center;
  display: flex;
  background-image: url('{% static "images/fondo.jpg" %}');
  background-image: url('{% static "images/fondo.jpg" %}'), linear-gradient( to bottom, #000,#BBB);
  background-size: cover;
  height: 95vh; /* Add this */
}

.ml2 {
  font-weight: 900;
  font-size: 3.5em;
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
}