.cls-1 {
  isolation: isolate;
}

.cls-2, .cls-3, .cls-4 {
  fill: none;
  stroke-miterlimit: 10;
}

.cls-2 {
  stroke: #d3ddde;
  stroke-width: 6px;
}

.cls-3 {
  stroke: #6f9078;
}

.cls-3, .cls-4 {
  stroke-width: 3px;
  mix-blend-mode: multiply;
}

.cls-4 {
  stroke: #e48357;
}

.cls-5 {
  fill: #f4f8f9;
}

.cls-6 {
  fill: #4b514e;
}

.svg-container {
  width: 700px;
  margin: 0 auto;
  margin-bottom: 200px;
}

.process-path {
  stroke-dashoffset: 0;
  animation-name: process;
  animation-iteration-count: infinite;
  stroke-dasharray: 300 100;
  animation-duration: 10s;
  animation-direction: alternate;
}

.process-path-background {
  stroke: #f2f2f2;
  stroke-width: 4;
  fill: none;
}

.process-circle {
  stroke-dashoffset: 0;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.process-circle:hover {
  animation-duration: 2s;
}
.process-circle.one {
  stroke-dasharray: 40 4;
  animation-duration: 10s;
}
.process-circle.two {
  stroke-dasharray: 40 4;
  animation-duration: 10s;
  animation-delay: 2s;
}
.process-circle.three {
  stroke-dasharray: 40 4;
  animation-duration: 10s;
  animation-delay: 3s;
}

@keyframes process {
  from {
    stroke-dashoffset: 0;
    stroke-dasharray: 1000 200;
  }
  to {
    stroke-dashoffset: 200;
    stroke-dasharray: 300 100;
  }
}
@keyframes spin {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 200;
  }
}
@keyframes spin-fast {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 200;
  }
}
.image-container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-bottom: 300px;
  position: relative;
  z-index: 0;
}
.image-container:hover:before {
  filter: blur(0px);
}
.image-container:before {
  transition: all 0.2s;
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  background-color: #e48357;
  border-radius: 50%;
  mix-blend-mode: multiply;
  z-index: 1;
  filter: blur(2px);
}

.image-container:after {
  content: "";
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: #a4bda5;
  mix-blend-mode: multiply;
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 1;
}

.typed-wrap {
  font-size: 50px;
  color: #000;
  font-weight: 400;
  text-align: center;
  margin: 10% 0;
}

#typed {
    color: #f35626;
    font-weight: 500;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}
@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }

    to {
      -webkit-filter: hue-rotate(360deg);
    }
}