/* Color Reference
Blue
#4898D3
72, 152, 211

Orange
F2762E
212, 118, 46

Yellow
#F2D338
242, 211, 56

Aqua
#25C7D9
37, 199, 217

*/


:root {
  /* ---- Color ---- */
  --main-blue: #4898D3;
  --orange: #F2762E;
  --yellow: #F2D338;
  --dark-yellow: #F5A623;
  --red: #D35E48;
  --aqua: #25C7D9;
  --sec-bkgrd-project-color: var(--main-blue);
  --sec-bkgrd-project-color-light: rgba(212, 118, 46,0.1);

  --project-main-color: var(--orange);
  --project-button-color: var(--main-blue);
  --project-progress-bar-btm: 1px solid rgba(0, 0, 0, 0.2);
  --project-progress-bar-top: 1px solid rgba(212, 118, 46 ,0.7);
}

.color-text {
  color: var(--main-blue);
}

h5.color-text {
  color: var(--orange);
}

.sec-bkgrd-project-color {
  background-color: var(--sec-bkgrd-project-color);
}

.sec-bkgrd-project-color-light {
  background-color: var(--sec-bkgrd-project-color-light);
}

.persona-img {
  background: url('../img/bargate/persona-1.jpg') no-repeat center center; 
  background-size: cover;
  border-radius: 1rem;
  height: 100%;
  min-height: 12rem;
}

.persona-img-2 {
  background: url('../img/bargate/persona-2.jpg') no-repeat center center; 
  background-size: cover;
  border-radius: 1rem;
  height: 100%;
  min-height: 12rem;
}

.persona-quote-wrapper {
  background-color: var(--main-blue);
  padding: 20px 30px;
  border-radius: 0px 2rem 2rem 2rem;
}

.decrease-margin {
  margin-top: -5px;
}

.highlight-img-wrapper {
  max-height: 430px;
}

.highlight-text {
  color: var(--main-blue);
}

.fill-in-text {
  color: var(--main-blue);
}

#navScroll i {
  height: 107%;
}

#navScroll {
  height: 60vh;
  top: 18vh;
}