.highlight-span-wrap span {color: var(--color-theme-secondary); font-size: 2.75rem;font-weight: 500;}
.highlight-span-wrap p {color: #fff; font-weight: 300; font-size: var(--text-h3); line-height: 36px;}
.middle-curve-svg {position: absolute; top: 0vw; left:0vw;}
.middle-curve-svg svg {width: 100%;}
.right-ourpurpose-wrapper {max-width: 61vw; margin-left: auto; margin-right: 2vw;  margin-top: -12vw;}
.right-circle-warp-1 { position: relative; left: -13vw;top: 1.5vw;}
.right-circle-warp-2 { position: relative; left: -8vw;top: 1.2vw;}
.inner-no-bm p{margin-bottom: 0;}
.reveal-mask {overflow: hidden;}
.mold-vector svg {width: 100%;}
.mold-vector {width: 100%; position: absolute; top:0.5vw; left:0.4vw;}
.process-arrow {opacity: 0;}
.abg-group-wrap svg {width: 100%;height: 100%;}

.svg-heading-anim-outer {position: absolute; top:-3vw; left: 0;}
.svg-heading-anim-outer svg {width: 105%;}
.card {flex-shrink: 0;transition: width 0.3s ease;}
.card-svg {z-index: 2; opacity: 0; visibility: hidden; height: 100%;position: absolute;left: 0; top: 0;}
.card.active .card-svg{opacity: 1; visibility: visible;}
.card-svg-1{left: -20px;top: 18px;}
.card-svg-2{left: -8px;top: 2px;}
.card-svg-3{left: 3px;top: 2px;}

@media (max-width:1023px) {
  .highlight-span-wrap p{line-height: 1.5;}
  .right-ourpurpose-wrapper {max-width: 100%; margin-top: 24px; margin-right: 0;}
  .right-circle-warp-1,
  .right-circle-warp-2 {left: 0; top: 0;}
  .middle-curve-svg {position: absolute; top: 0; left: 0; margin: 10px 0;}
  .middle-curve-svg svg {width: 100%; height: auto;}
}

@media (max-width:1536px) and (min-width:1024px) {
  .right-ourpurpose-wrapper {max-width: 66vw; margin-top: -8vw; margin-right: 0;}
  .right-circle-warp-1 {left: -8vw; top: 1vw;}
  .right-circle-warp-2 {left: -4vw; top: 1vw;}

}


@media (max-width:767px) {
  .middle-curve-svg{ display: none; }
.svg-heading-anim-outer svg {width: 100%;transform: scale(2);transform-origin:25% top;}

.mold-vector {top: 1vw;left: 2vw;}
.right-ourpurpose-wrapper {
  max-width: 100%;
  margin-top: 30px;
  margin-right: 0;
  gap: 3.25rem;
  padding-inline: 0.5rem;
}
.right-circle-warp-1,
.right-circle-warp-2 {
  position: relative;
  left: 0;
  top: 0;
  margin-top: 0;
  z-index: 2;
}
.middle-curve-svg {
  position: absolute;
  left: 0;
  top: 22px;
  transform: none;
  width: 100%;
  height: calc(100% - 44px);
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.middle-curve-svg svg {
  width: 100%;
  height: 100%;
  transform: none;
  display: block;
}
.materials-process {padding-bottom: 5rem;}
}