@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    color: #01184A;
}

a {
  color: #01184A;
}

header {
    background-color: #fff;
}

.logo-header {
    height: auto;
    transition: .5s;
}

.carousel-item a img {
    transition: .5s;
}

#section-quienes {
    background-color: #F5F5F5;
}

.title-front {
    color: #001A52;
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.text-front {
    color: #01184A;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 26px;
    font-weight: 300;
    text-align: center;
}

.btn {
    font-size: 19px;
    border-radius: 50px;
    padding: 10px 30px;
    text-transform: uppercase;
    font-weight: 500;
}

.btn-primary {
    background-color: #062F87;
    border-color: #062F87;
}

.title-integrantes {
    font-size: 26px;
    color: #00226C;
    font-weight: 400;
    text-align: center;
    border-bottom: 1px solid #CFD6E5;
}

.cont-logos {
    margin-top: 30px;
}

.logo-integrantes {
    max-height: 70px;
}

.linea {
    border-bottom: 1px solid #CFD6E5;
    display: block;
}

.line-footer {
  width: 100vw;
  aspect-ratio: 1520 / 18;
  display: block;
}

footer {
  background-color: #F5F5F5;
}

footer p {
  font-size: 18px;
  font-family: 'Inter', sans-serif;
  color: #01184A;
  font-weight: 300;
}



/*SCROLL efect*/
.animatable {
  /* initially hide animatable objects */
  visibility: hidden;

  /* initially pause animatable objects their animations */
  animation-play-state: paused;
}

/* show objects being animated */
.animated {
  visibility: visible;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated.fadeInDown {
  animation-name: fadeInDown;
}



@media (min-width: 576px) {

    .logo-header {
    height: 70px;}

    .title-front {
    font-size: 36px;}

    .text-front {
    font-size: 21px;
    line-height: 32px;}

    .title-integrantes {
    font-size: 28px;}

    .cont-logos {
    margin-top: 40px;}

 }


@media (min-width: 768px) {

    .logo-header {
    height: 80px;}

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

    .cont-logos {
    margin-top: 50px;}

 }


@media (min-width: 992px) {

    .logo-header {
    height: 90px;}

 }


@media (min-width: 1200px) {

    .logo-header {
    height: 105px;}

 }


@media (min-width: 1400px) {
 }