/* riverBI hero layout fix
 * The two .col-lg-6 columns (585px + 570px) overflow Bootstrap 3's
 * ~1140px container, so the video column wraps below the headline.
 *
 * Desktop (>=992px): force two equal flex columns, video on the right.
 * Mobile (<992px): restore the default stacked layout so nothing is squeezed.
 */

/* Desktop only — two columns side by side */
@media (min-width: 992px) {
  .hero-sec .row {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    margin-left: 0;
    margin-right: 0;
  }

  /* Left: headline + CTA */
  .hero-sec .col-lg-6.order-2.order-md-1,
  .hero-sec .col-lg-6.order-2.order-md-1:first-child {
    order: 1 !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box !important;
  }

  /* Right: hexagon video */
  #rbi-hero,
  .hero-sec .col-lg-6.order-1.order-md-2 {
    order: 2 !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box !important;
  }
}

.hero-right-img {
  max-width: 475px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile (<992px): default stacking, video below headline, full width */
@media (max-width: 991px) {
  .hero-sec .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0;
    margin-right: 0;
  }
  .hero-sec .col-lg-6.order-2.order-md-1,
  .hero-sec .col-lg-6.order-2.order-md-1:first-child,
  .hero-sec .col-lg-6.order-1.order-md-2,
  #rbi-hero {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    order: 0 !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box !important;
  }
  #rbi-hero { order: 2 !important; }
}