/* Splits */
:root{ --aboutus-text-desktop: 58%; --aboutus-image-desktop: 42%; }
:root{ --aboutus-text-tablet: 56%; --aboutus-image-tablet: 44%; }

/* Base layering */
#about-us > * { position: relative; z-index: 1; }

/* Phones: no images/gradient */
@media (max-width: 575.98px){
  #about-us{ background: none !important; }
  #about-us::before, #about-us::after{ display: none !important; }
}

/* Tablet + Desktop */
@media (min-width: 576px){
  /* Left background panel */
  #about-us{
    background: linear-gradient(to right, rgb(234,244,246) 0 var(--aboutus-text-tablet), rgba(234,244,246,0) var(--aboutus-text-tablet) 100%) !important;
  }

  /* Two layers anchored to the right by width */
  #about-us::before, #about-us::after{
    content: "" !important;
    position: absolute; top:0; bottom:0; right:0;
    left: auto !important;
    width: var(--aboutus-image-tablet) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }
  #about-us::before{ background-image: url('../img/finance-team.webp') !important; }
  #about-us::after { background-image: url('../img/second-about-us.jpg') !important; }

  /* Baseline: show ::before */
  #about-us{ --mmg-alt: 0; }
  #about-us:not(.rotator-alt)::before{ opacity: 1; }
  #about-us.rotator-alt::after{ opacity: 1; }

  /* Hide any legacy/carousel media inside #about-us to avoid duplicates */
  #about-us .ts-background,
  #about-us .ts-background *,
  #about-us .ts-background-image,
  #about-us .fader,
  #about-us .fader *,
  #about-us .aboutus-media,
  #about-us .owl-carousel,
  #about-us .owl-stage-outer,
  #about-us .owl-stage,
  #about-us .owl-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Desktop split override */
@media (min-width: 992px){
  #about-us{
    background: linear-gradient(to right, rgb(234,244,246) 0 var(--aboutus-text-desktop), rgba(234,244,246,0) var(--aboutus-text-desktop) 100%) !important;
  }
  #about-us::before, #about-us::after{ width: var(--aboutus-image-desktop) !important; }
}