
.two-colors-content-box { margin: 40px 0; }
.two-colors-content-box__container { max-width: 1200px; margin: 0 auto; padding: 0 12px; }
@media (min-width: 768px) { .two-colors-content-box__container { padding: 0 20px; } }

.two-colors-content-box__border {
  border-bottom: 1px solid #E4E3FB;
  padding-bottom: 64px;
}
@media (min-width: 768px) { .two-colors-content-box__border { padding-bottom: 80px; } }
@media (min-width: 1024px) { .two-colors-content-box__border { padding-bottom: 112px; } }

.two-colors-content-box__col { padding-left: 24px; }
@media (min-width: 768px) { .two-colors-content-box__col { width: 50%; } }

.two-colors-heading {
  font-weight: 700;
  font-size: 2.25rem;
  margin: 0 0 24px 0;
  line-height: 1.2;
}

.two-colors-heading .overflow-hidden {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  height: 1.2em;
}
.two-colors-heading .overflow-hidden span { display: inline-block; }
.text-binx-purple-500 { color: #6972F5; }

.two-colors-subtext { color: #6b7280; }

/* Rotating word animation */
.binx-rotate-in { animation: binxRotateIn 0.5s ease forwards; }
.binx-rotate-out { animation: binxRotateOut 0.5s ease forwards; }

@keyframes binxRotateIn {
  from { opacity: 0; transform: translateY(60%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes binxRotateOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-60%); }
}
