.client-img-div {
  position: relative;
}
.client-img-div .client-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  z-index: 0;
}
.client-img-div .client-img.defult-revel-img {
  opacity: 1;
  z-index: 1;
   position: relative;
}
.circle-animation {
    --main-circle: 400px;
    --button-size: 30px;
    --radius-value: calc(var(--main-circle) / 2 - var(--button-size) / 2);
    position: relative;
    width: var(--main-circle);
    height: var(--main-circle);
    border-radius: 50%;
    overflow: hidden;
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .circle-animation {
   	--main-circle: 450px !important;
  }
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  .circle-animation {
   	--main-circle: 250px !important;
  }
}
.circle-animation-dash-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    object-fit: contain;
    z-index: 1;
    border-radius: 50%;
}

.circle-animation-dot-button-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 50%;
}

.dot-icon-block {
    position: absolute;
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 50%;
    offset-path: circle(var(--radius-value) at 50% 50%);
    offset-rotate: 0turn;
}

.circle-animation-dot-button-div a:nth-child(1) { offset-distance: calc(100% * (0 / 5) + 10%); }
.circle-animation-dot-button-div a:nth-child(2) { offset-distance: calc(100% * (1 / 5) + 10%); }
.circle-animation-dot-button-div a:nth-child(3) { offset-distance: calc(100% * (2 / 5) + 10%); }
.circle-animation-dot-button-div a:nth-child(4) { offset-distance: calc(100% * (3 / 5) + 10%); }
.circle-animation-dot-button-div a:nth-child(5) { offset-distance: calc(100% * (4 / 5) + 10%); }


.inl-kirsty-graham_webflow_io-1{opacity:0}

.inl-kirsty-graham_webflow_io-2{opacity:0}

.inl-kirsty-graham_webflow_io-3{opacity:0}

.inl-kirsty-graham_webflow_io-4{opacity:0}

.inl-kirsty-graham_webflow_io-5{background-image:url("images/kirsty_38.jpg")}

.inl-kirsty-graham_webflow_io-6{opacity:0}

.inl-kirsty-graham_webflow_io-7{opacity:0}

.inl-kirsty-graham_webflow_io-8{opacity:0}

.inl-kirsty-graham_webflow_io-9{opacity:0}

.inl-kirsty-graham_webflow_io-10{opacity:0}

.inl-kirsty-graham_webflow_io-11{opacity:0}

.inl-kirsty-graham_webflow_io-12{opacity:0}

.inl-kirsty-graham_webflow_io-13{opacity:0}

.inl-kirsty-graham_webflow_io-14{opacity:0}


.progress-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(-40deg);
  z-index: 0;
}

.circle-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 2;
}

.circle-progress {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 597; /* 2pr ˜ 2 * p * 95 */
  stroke-dashoffset: 597;
  transition: stroke-dashoffset 0.7s ease;
}
body .approach-section .approach-section-left-side .circle-animation svg.progress-circle circle.circle-track {
    stroke: transparent !important;
}
body .approach-section .approach-section-left-side .circle-animation img.circle-animation-dash-img {
    height: 95% !important;
    width: 95% !important;
}
@media only screen and (max-width: 480px) {
    body .approach-section .approach-section-left-side .circle-animation .progress-circle {
        width: 95% !important;
        height: 95% !important;
    }
    body .approach-section .approach-section-left-side .circle-animation img.circle-animation-dash-img {
        width: 90% !important;
        height: 90% !important;
    }
}