.eotc-split {
  position: relative;
  width: 100%;
  --eotc-gap: 0px;
  --eotc-sb-thumb: rgba(255, 255, 255, 0.45);
  --eotc-sb-track: transparent;
  --eotc-sb-w: 6px;
  --eotc-fade: 28px;
}

.eotc-split-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.eotc-split-mid {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  min-height: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.eotc-split-copy {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  line-height: 1.25;
  box-sizing: border-box;
  overflow: hidden;
  --eotc-copy-bg-o: 0.55;
}

.eotc-split-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: var(--eotc-copy-bg-o);
}

.eotc-split-copy-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--eotc-sb-thumb) var(--eotc-sb-track);
}

.eotc-split.is-text-scroll .eotc-split-copy {
  overflow: hidden;
  pointer-events: auto;
  align-items: stretch;
}

.eotc-split.is-text-scroll .eotc-split-copy-inner {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.eotc-split.is-text-fade .eotc-split-copy-inner {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 min(var(--eotc-fade), 18%),
    #000 calc(100% - min(var(--eotc-fade), 18%)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 min(var(--eotc-fade), 18%),
    #000 calc(100% - min(var(--eotc-fade), 18%)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.eotc-split.is-text-scroll .eotc-split-copy-inner::-webkit-scrollbar {
  width: var(--eotc-sb-w);
  height: var(--eotc-sb-w);
}

.eotc-split.is-text-scroll .eotc-split-copy-inner::-webkit-scrollbar-track {
  background: var(--eotc-sb-track);
}

.eotc-split.is-text-scroll .eotc-split-copy-inner::-webkit-scrollbar-thumb {
  background: var(--eotc-sb-thumb);
  border-radius: 99px;
  border: none;
}

.eotc-split.is-sb-hidden .eotc-split-copy-inner {
  scrollbar-width: none;
}

.eotc-split.is-sb-hidden .eotc-split-copy-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.eotc-split.is-sb-autohide .eotc-split-copy-inner {
  scrollbar-color: transparent var(--eotc-sb-track);
}

.eotc-split.is-sb-autohide .eotc-split-copy-inner::-webkit-scrollbar-thumb {
  background: transparent;
}

.eotc-split.is-sb-autohide.is-copy-scrolling .eotc-split-copy-inner {
  scrollbar-color: var(--eotc-sb-thumb) var(--eotc-sb-track);
}

.eotc-split.is-sb-autohide.is-copy-scrolling .eotc-split-copy-inner::-webkit-scrollbar-thumb {
  background: var(--eotc-sb-thumb);
}

.eotc-split-img {
  position: absolute;
  --eotc-pad-t: 0px;
  --eotc-pad-r: 0px;
  --eotc-pad-b: 0px;
  --eotc-pad-l: 0px;
  left: var(--eotc-pad-l);
  width: calc(100% - var(--eotc-pad-l) - var(--eotc-pad-r));
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
  will-change: transform, opacity, height;
  box-sizing: border-box;
  overflow: hidden;
}

.eotc-split-img.top {
  top: var(--eotc-pad-t);
  height: calc(50% - (var(--eotc-gap) / 2) - var(--eotc-pad-t) - var(--eotc-pad-b));
}

.eotc-split-img.bottom {
  bottom: var(--eotc-pad-b);
  height: calc(50% - (var(--eotc-gap) / 2) - var(--eotc-pad-t) - var(--eotc-pad-b));
}

.eotc-split-light {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  pointer-events: none;
  transform: translateY(-50%);
}

.eotc-split.is-hide-images .eotc-split-img {
  opacity: 0;
}

.eotc-split.is-pin .eotc-split-sticky {
  overflow: visible;
}

.elementor-editor-active .eotc-split-img,
.elementor-edit-area .eotc-split-img {
  z-index: 2;
}