/* home page styles */
.banner-highlight {
  position: relative;
}
.banner-highlight__hippo {
  position: absolute;
}
.banner-highlight .tri {
  margin-bottom: 4.08rem;
  /* triangle styles */
  border-top-width: 1.85rem;
  border-right-width: 1.85rem;
}
.banner-highlight__statement {
  font-weight: 900;
  line-height: 1.29em;
}
.banner-cards {
  margin-top: 0.77rem;
  margin-bottom: 9.38rem;
}
.banner-cards .col-lg {
  padding-left: 6px;
  padding-right: 6px;
}
.banner-card {
  background: white;
  position: relative;
  line-height: 1.6em;
  min-height: 160px;
  padding: 1.92rem 1.54rem;
}
.banner-card .tri {
  position: absolute;
  top: 0;
  left: 0;
  /* triangle styles */
  border-top-width: 2.31rem;
  border-right-width: 2.31rem;
}
.banner-card__title {
  color: #0167B4;
  font-size: 1.15rem;
  font-weight: bold;
  letter-spacing: -0.0012em;
  line-height: 1.533em;
  margin-bottom: 1.62rem;
  display: block;
  position: relative;
  padding-right: 2.5rem;
}
.banner-card__title:after {
  content: '';
  position: absolute;
  top: -0.4rem;
  right: 0;
  background: url('/img/home/banner_card_icon.svg') center / cover no-repeat;
  width: 2.46rem;
  height: 2.46rem;
}

.home__about {
  text-align: center;
  padding-bottom: 0;
}

.home__about h2 {
  font-size: 2.8rem;
  line-height: 1.333em;
  margin-bottom: 2rem;
}

.home__about h3 {
  margin-bottom: 1.5rem;
}

.home__about p {
  text-align: left;
}

.home__why {
  text-align: center;
  margin-top: 2.85rem;
  padding: 0;
}
.home__why h2 {
  font-size: 2.31rem;
  line-height: 1.333em;
}


.home__value-props .value-prop {
  margin-top: 0;
}
.value-prop-group__title {
  font-size: 2.31rem;
  font-weight: 900;
  letter-spacing: -0.0012em;
  line-height: 1.333em;
}
.value-prop-group__border {
  position: relative;
  overflow: visible;
}
.value-prop-group__border:after {
  position: absolute;
  display: block;
  content: "•";
  font-size: 3rem;
  line-height: 1em;
  /* border-radius: 100%;
  height: 0.85rem;
  width: 0.85rem; */
}
.value-prop__title {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.41em;
}
.value-prop__title,
.value-prop__copy {
  font-size: 1rem;
  line-height: 1.62em;
  letter-spacing: 0.0077em;
}
.value-prop-group--slug_consulting .value-prop-group__title,
.value-prop-group--slug_consulting .value-prop__title,
.value-prop-group--slug_consulting .value-prop-group__border {
  color: #597490;
}
.value-prop-group--slug_support .value-prop-group__title,
.value-prop-group--slug_support .value-prop__title,
.value-prop-group--slug_support .value-prop-group__border {
  color: #4B7374;
}
.value-prop-group--slug_kubernetes .value-prop-group__title,
.value-prop-group--slug_kubernetes .value-prop__title,
.value-prop-group--slug_kubernetes .value-prop-group__border {
  color: #0167B4;
}
.value-prop-group--slug_consulting .value-prop-group__border:after {
  /* background: #597490; */
  color: #597490;
}
.value-prop-group--slug_support .value-prop-group__border:after {
  /* background: #4B7374; */
  color: #4B7374;
}
.value-prop-group--slug_kubernetes .value-prop-group__border:after {
  /* background: #0167B4; */
  color: #0167B4;
}
.value-prop__title {
  position: relative;
}
.value-prop__title:before {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
}
.value-prop--slug_protect .value-prop__title:before {
  background-image: url('/img/home/home_ring_icons/protecting_your_data.svg');
}
.value-prop--slug_geospatial .value-prop__title:before {
  background-image: url('/img/home/home_ring_icons/geospatial.svg');
}
.value-prop--slug_experts .value-prop__title:before {
  background-image: url('/img/home/home_ring_icons/supported_by_experts.svg');
}
.value-prop--slug_trusted .value-prop__title:before {
  background-image: url('/img/home/home_ring_icons/trusted_postgresql.svg');
}
.value-prop--slug_security .value-prop__title:before {
  background-image: url('/img/home/home_ring_icons/vault.svg');
}
.value-prop--slug_cloud .value-prop__title:before {
  background-image: url('/img/home/home_ring_icons/kubernetes.svg');
}

.home__cta {
  padding: 2.31rem 0;
  text-align: center;
}

.home__triangles {
  display: flex;
}
.tri--pos_right,
.tri--pos_left {
  flex: 0 0 50%;
  border-left-width: 50vw;
}
.tri--pos_left.tri--bg_white {
  border-left-color: white;
}
.tri--pos_right.tri--bg_white {
  border-bottom-color: white;
}
.tri--pos_left.tri--bg_grey {
  border-left-color: #F6F6F6;
}
.tri--pos_right.tri--bg_grey {
  border-bottom-color: #F6F6F6;
}

/* Only lg+ (desktop) */
@media screen and (min-width: 992px) {
  .banner-highlight__statement {
    max-width: calc(100% - 20rem);
    font-size: 3.23rem;
  }
  .banner-highlight__hippo {
    width: 20rem;
  }

  .banner-cards {
    display: flex;
    justify-content: space-between;
  }
  .banner-card {
    flex: 0 1 33.33%;
  }
  .banner-card + .banner-card {
    margin-left: 0.77rem;
  }

  .tri--pos_left {
    border-top-width: 4.15rem;
  }
  .tri--pos_right {
    border-bottom-width: 4.15rem;
  }

  .home__value-props {
    padding: 4.42rem 0 6.15rem;
  }
  .value-prop-group + .value-prop-group {
    margin-top: 6.15rem;
  }
  .value-prop-group__title {
    text-align: right;
  }
  .value-prop-group__border {
    margin: 1.5rem 0 4.15rem;
    border-top: 1px solid;
    height: 0;
  }
  .value-prop-group__border:after {
    top: 0.5px;
    right: 0;
    transform: translate(50%, -50%);
  }
  .value-prop__title:before {
    top: -4.15rem;
    left: -0.05em;
    width: 5.38rem;
    height: 5.38rem;
    font-size: 5.38rem;
    transform: translateY(-50%);
  }
}

/* not lg or xl (desktop) */
@media screen and (max-width: 991px) {
  .banner-cards {
    margin: 0 -15px;
  }
  .banner-card {
    border-bottom: 1px solid #E8E8E8;
  }
  .banner .home__triangles {
    display: none;
  }
  .value-prop-group + .value-prop-group {
    margin-top: 1.92rem;
  }
  .value-prop-group__container {
    display: flex;
  }
  .value-prop-group__border {
    border-left: 1px solid;
    width: 0;
    height: 98%;
  }
  .value-prop-group__border:after {
    bottom: 0;
    left: -0.5px;
    transform: translate(-50%, 50%);
  }
  .value-prop-group__title {
    margin-bottom: 1.54rem;
  }
  .value-prop + .value-prop {
    margin-top: 1.54rem;
  }
  .home__why h2 {
    margin-bottom: 1.5rem;
    font-size: 1.85rem;
  }
}
/* Tablet (just md) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .banner-highlight__statement {
    font-size: 2.31rem;
    max-width: calc(100% - 15.92rem);
  }
  .banner-highlight__hippo {
    width: 15.92rem;
  }
  .banner-cards {
    margin: 4.15rem calc((100vw - 690px) / -2) 0;
  }
  .tri--pos_left {
    border-top-width: 3rem;
  }
  .tri--pos_right {
    border-bottom-width: 3rem;
  }
  .value-prop-group__border {
    margin: 0 4.15rem 0 2.73rem;
    height: calc(100% - 2.73rem);
  }
  .value-prop-group__border:after {
    display: none;
  }
  .value-prop__title:before {
    top: 0;
    right: calc(100% + 1.42rem);
    width: 5.46rem;
    height: 5.46rem;
    font-size: 5.46rem;
  }
}
/* not mobile */
@media screen and (min-width: 768px) {
  .banner-highlight {
    border: 0.78rem white solid;
    padding: 3.08rem;
  }
  .banner-highlight__hippo {
    bottom: 0;
    right: -2rem;
  }
}
/* large mobile */
@media screen and (min-width: 576px) and (max-width: 767px) {
  .banner-cards {
    margin: 4.15rem calc((100vw - 510px) / -2) 0;
  }
}
/* mobile */
@media screen and (max-width: 767px) {
  .banner-highlight {
    padding-bottom: 11.5rem;
  }
  .banner-highlight .tri {
    display: none;
  }
  .banner-highlight__statement {
    font-size: 1.85rem;
  }
  .banner-highlight__hippo {
    top: 100%;
    right: -3rem;
    width: 14.23rem;
    transform: translateY(-11rem);
  }
  .tri--pos_left {
    border-top-width: 1.54rem;
  }
  .tri--pos_right {
    border-bottom-width: 1.54rem;
  }
  .value-prop-group__border {
    margin: 0 1.87rem;
  }
  .value-prop__title:before {
    top: -0.75rem;
    right: calc(100% + 0.57rem);
    width: 3.15rem;
    height: 3.15rem;
    font-size: 3.15rem;
  }
}