.mos-img img {display: none !important;}

:root {
  --mxeffect-primary: #333333;
  --mxeffect-primary-rgb: 37, 59, 47;
  --mxeffect-secondary: #D2E0D9;
  --mxeffect-secondary-rgb: 210, 224, 217;
  --mxeffect-border-color: var(--mxeffect-primary);
  --mxeffect-link-color-rgb: var(--mxeffect-primary-rgb);
  --mxeffect-link-color: var(--mxeffect-primary);
  --mxeffect-link-hover-color: var(--mxeffect-primary);
  --mxeffect-link-hover-color-rgb: var(--mxeffect-primary-rgb);
}
.display-1 {
  font-size: calc(3.15rem + 22.8vw);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-1 {
    font-size: 20.25rem;
  }
}

.display-2 {
  font-size: calc(2.375rem + 13.5vw);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-2 {
    font-size: 12.5rem;
  }
}

.display-3 {
  font-size: calc(1.6875rem + 5.25vw);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-3 {
    font-size: 5.625rem;
  }
}

.display-4 {
  font-size: calc(1.4375rem + 2.25vw);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.125rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}
.stroke-heading {
  --mxeffect-stroke-heading-height: 50px;
  --mxeffect-stroke-heading-dasharray: 700;
  --mxeffect-stroke-heading-dashoffset: 700;
  --mxeffect-stroke-heading-color: var(--mxeffect-primary);
  line-height: 1.3;
}

.stroke-heading svg {
  stroke: var(--mxeffect-stroke-heading-color);
  height: var(--mxeffect-stroke-heading-height);
}

.stroke-heading.stroke-heading-2 {
  line-height: 1;
  --mxeffect-stroke-heading-height: 80px;
  --mxeffect-stroke-heading-dasharray: 500;
  --mxeffect-stroke-heading-dashoffset: 500;
}

.stroke-heading.stroke-heading-2 svg {
  stroke: var(--mxeffect-secondary);
  width: -moz-fit-content;
  width: fit-content;
}

.stroke-heading .text-line {
  stroke-dasharray: var(--mxeffect-stroke-heading-dasharray);
  stroke-dashoffset: var(--mxeffect-stroke-heading-dashoffset);
  position: relative;
  top: var(--mxeffect-text-line-top-spacing);
  animation: dash 4s linear forwards, filling 4s ease-in forwards;
}

.stroke-heading .text-line-2 {
  stroke-dasharray: var(--mxeffect-stroke-heading-dasharray);
  stroke-dashoffset: var(--mxeffect-stroke-heading-dashoffset);
  position: relative;
}

.stroke-heading .text-line-animation {
  animation: dash 4s linear forwards, filling 4s ease-in forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes filling {
  0%, 90% {
    fill: currentColor;
    fill-opacity: 0;
  }
  100% {
    fill: currentColor;
    fill-opacity: 0;
  }
}

@media (max-width: 1800px) {
  .stroke-heading {
    --mxeffect-stroke-heading-height: 80px;
  }
}

@media (max-width: 1620px) {
  .stroke-heading {
    --mxeffect-stroke-heading-height: 60px;
  }
}

@media (max-width: 1399.98px) {
  .stroke-heading {
    --mxeffect-stroke-heading-height: 62px;
  }
}


@media (max-width: 991.98px) {
  .stroke-heading {
    --mxeffect-stroke-heading-height: 60px;
    --mxeffect-stroke-heading-dasharray: 700;
    --mxeffect-stroke-heading-dashoffset: 600;
  }
}

@media (max-width: 767.98px) {
  .stroke-heading {
    --mxeffect-stroke-heading-height: 70px;
    --mxeffect-stroke-heading-dasharray: 500;
  }
}

.animate-fill,
.animate-fill::after {
  animation-delay: var(--mxeffect-animate-fill-delay, 3s);
  animation-iteration-count: var(--mxeffect-animate-fill-iterations);
  animation-duration: var(--mxeffect-animate-fill-duration);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.animate-fill {
  --mxeffect-animate-fill-delay: 1s;
  --mxeffect-animate-fill-duration: 1s;
  --mxeffect-animate-fill-iterations: 1;
  animation-delay: var(--mxeffect-animate-fill-delay);
  animation-iteration-count: var(--mxeffect-animate-fill-iterations);
  animation-duration: var(--mxeffect-animate-fill-duration);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
  cursor: default;
}

.animate-fill::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mxeffect-animate-fill-box-color);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

.animate-fill.primary::after {
  --mxeffect-animate-fill-box-color: var(--mxeffect-primary);
}

.animate-fill.secondary::after {
  --mxeffect-animate-fill-box-color: var(--mxeffect-secondary);
}

.animate-fill.danger::after {
  --mxeffect-animate-fill-box-color: var(--mxeffect-danger);
}

.animate-fill.info::after {
  --mxeffect-animate-fill-box-color: var(--mxeffect-info);
}

@keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}