figure {
    width: 200px;
    height: 200px;
    position: relative;
    text-align: center;
    margin: 0;
}

.svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-background {
    fill: none;
    stroke-width: 30px;
    stroke: rgb(83, 33, 72);
}

.circle-foreground {
    fill: none;
    stroke-width: 30px;
    stroke: gold;
    stroke-linecap: butt;
    stroke-dasharray: 566.8;
    /* Full circumference of r = 85px */
    stroke-dashoffset: 566.8;
    /* Starts hidden */
    transition: stroke-dashoffset 2s ease-in;
}

.in-view .circle-foreground {
    animation: fill-circle 1s ease-in forwards;
}

@keyframes fill-circle {
    to {
        stroke-dashoffset: 447.68;
        /* Adjust to desired fill percentage */
    }
}

figure {
    width: 200px;
    height: 200px;
    position: relative;
    text-align: center;
    margin: 0;
}

.svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    /* Start at 12 o'clock position */
}

.circle-background {
    fill: none;
    stroke-width: 30px;
    stroke: rgb(83, 33, 72);
}

.circle-section {
    fill: none;
    stroke-width: 30px;
    stroke-linecap: butt;
    stroke-dasharray: 530.66;
    stroke-dashoffset: 530.66;
    /* Start hidden */
}

/* Each section fills 12.5% of the circle */
.in-view .circle-section.one {
    stroke-dasharray: 48.33 530.66;
    stroke-dashoffset: 48.33;
    animation: section-one-fill 1s ease-in forwards;
}

.in-view .circle-section.two {
    stroke-dasharray: 158.67 530.66;
    stroke-dashoffset: 158.67;
    animation: section-two-fill 1s ease-in forwards;

}

.in-view .circle-section.three {
    stroke-dasharray: 210.00 530.66;
    stroke-dashoffset: 210.00;
    animation: section-three-fill 1s ease-in forwards;

}

.in-view .circle-section.four {
    stroke-dasharray: 320.33 530.66;
    stroke-dashoffset: 320.33;
    animation: section-four-fill 1s ease-in forwards;

}

.in-view .circle-section.five {
    stroke-dasharray: 374.67 530.66;
    stroke-dashoffset: 374.67;
    animation: section-five-fill 1s ease-in forwards;

}

.in-view .circle-section.six {
    stroke-dasharray: 424.00 530.66;
    stroke-dashoffset: 424.00;
    animation: section-six-fill 1s ease-in forwards;

}

.in-view .circle-section.seven {
    stroke-dasharray: 484.33 530.66;
    stroke-dashoffset: 484.33;
    animation: section-seven-fill 1s ease-in forwards;

}

.in-view .circle-section.eight {
    stroke-dasharray: 530.66 530.66;
    stroke-dashoffset: 530.66;
    animation: section-eight-fill 1s ease-in forwards;

}

/* Keyframes for smooth animation of each section */
@keyframes section-one-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes section-two-fill {
    to {
        stroke-dashoffset: -48.33;
    }
}

@keyframes section-three-fill {
    to {
        stroke-dashoffset: -158.67;
    }
}

@keyframes section-four-fill {
    to {
        stroke-dashoffset: -210.00;
    }
}

@keyframes section-five-fill {
    to {
        stroke-dashoffset: -320.33;
    }
}

@keyframes section-six-fill {
    to {
        stroke-dashoffset: -374.67;
    }
}

@keyframes section-seven-fill {
    to {
        stroke-dashoffset: -424.00;
    }
}

@keyframes section-eight-fill {
    to {
        stroke-dashoffset: -484.33;
    }
}

/*  */

/* Each section fills 12.5% of the circle */
.in-view .circle-section.one_a {
    stroke-dasharray: 48.33 530.66;
    stroke-dashoffset: 48.33;
    animation: section-one-fill 1s ease-in forwards;
}

.in-view .circle-section.two_a {
    stroke-dasharray: 27.67 530.66;
    stroke-dashoffset: 27.67;
    animation: section-two-fill 1s ease-in forwards;

}

.in-view .circle-section.three_a {
    stroke-dasharray: 80.00 530.66;
    stroke-dashoffset: 80.00;
    animation: section-three-fill 1s ease-in forwards;

}

.in-view .circle-section.four_a {
    stroke-dasharray: 220.33 530.66;
    stroke-dashoffset: 220.33;
    animation: section-four-fill 1s ease-in forwards;

}

.in-view .circle-section.five_a {
    stroke-dasharray: 374.67 530.66;
    stroke-dashoffset: 374.67;
    animation: section-five-fill 1s ease-in forwards;

}

.in-view .circle-section.six_a {
    stroke-dasharray: 424.00 530.66;
    stroke-dashoffset: 424.00;
    animation: section-six-fill 1s ease-in forwards;

}


.in-view .circle-section.seven_a {
    stroke-dasharray: 530.66 530.66;
    stroke-dashoffset: 530.66;
    animation: section-eight-fill 1s ease-in forwards;

}

/* Keyframes for smooth animation of each section */
@keyframes section-one_a-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes section-two_a-fill {
    to {
        stroke-dashoffset: -48.33;
    }
}

@keyframes section-three_a-fill {
    to {
        stroke-dashoffset: -27.67;
    }
}

@keyframes section-four_a-fill {
    to {
        stroke-dashoffset: -80.00;
    }
}

@keyframes section-five_a-fill {
    to {
        stroke-dashoffset: -220.33;
    }
}

@keyframes section-six_a-fill {
    to {
        stroke-dashoffset: -374.67;
    }
}

@keyframes section-seven_a-fill {
    to {
        stroke-dashoffset: -424.00;
    }
}

/* Each section fills a percentage of the circle */
.in-view .circle-section.section-1 {
    stroke-dasharray: 480.66 534.07; /* 90% of 534.07 */
    stroke-dashoffset: 480.66;
    animation: section-one-fill 1s ease-in forwards;
}

.in-view .circle-section.section-2 {
    stroke-dasharray: 53.40 534.07; /* 4% of 534.07 */
    stroke-dashoffset: 53.40;
    animation: section-two-fill 1s ease-in forwards;
}


/* Keyframes for smooth animation of each section */
@keyframes section-one-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes section-two-fill {
    to {
        stroke-dashoffset: -480.66;
    }
}

/* Each section fills a percentage of the circle */
.in-view .circle-section.new-section-1 {
    stroke-dasharray: 480.66 534.07; /* 90% of 534.07 */
    stroke-dashoffset: 480.66;
    animation: new-section-one-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section-2 {
    stroke-dasharray: 21.36 534.07; /* 4% of 534.07 */
    stroke-dashoffset: 21.36;
    animation: new-section-two-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section-3 {
    stroke-dasharray: 32.04 534.07; /* 6% of 534.07 */
    stroke-dashoffset: 32.04;
    animation: new-section-three-fill 1s ease-in forwards;
}

/* Keyframes for smooth animation of each section */
@keyframes new-section-one-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes new-section-two-fill {
    to {
        stroke-dashoffset: -480.66;
    }
}

@keyframes new-section-three-fill {
    to {
        stroke-dashoffset: -502.02; /* -480.66 - 21.36 */
    }
}

/* Initial state (before animation) */
.circle-section {
    stroke-dasharray: 534.07; /* Full circumference */
    stroke-dashoffset: 534.07; /* Start with offset equal to circumference */
}

/* Each section fills a percentage of the circle */
.in-view .circle-section.new-section-a {
    stroke-dasharray: 422.52 534.07; /* 79% of 534.07 */
    stroke-dashoffset: 422.52;
    animation: new-section-a-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section-b {
    stroke-dasharray: 80.11 534.07; /* 15% of 534.07 */
    stroke-dashoffset: 80.11;
    animation: new-section-b-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section-c {
    stroke-dasharray: 32.04 534.07; /* 6% of 534.07 */
    stroke-dashoffset: 32.04;
    animation: new-section-c-fill 1s ease-in forwards;
}

/* Keyframes for smooth animation of each section */
@keyframes new-section-a-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes new-section-b-fill {
    to {
        stroke-dashoffset: -422.52;
    }
}

@keyframes new-section-c-fill {
    to {
        stroke-dashoffset: -502.63; /* -422.52 - 80.11 */
    }
}

/* Initial state (before animation) */
.circle-section {
    stroke-dasharray: 534.07; /* Full circumference */
    stroke-dashoffset: 534.07; /* Start with offset equal to circumference */
}

/* Each section fills a percentage of the circle */
.in-view .circle-section.new-section1-1 {
    stroke-dasharray: 80.11 534.07; /* 15% of 534.07 */
    stroke-dashoffset: 80.11;
    animation: new-section1-1-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section1-2 {
    stroke-dasharray: 48.07 534.07; /* 9% of 534.07 */
    stroke-dashoffset: 48.07;
    animation: new-section1-2-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section1-3 {
    stroke-dasharray: 325.89 534.07; /* 61% of 534.07 */
    stroke-dashoffset: 325.89;
    animation: new-section1-3-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section1-4 {
    stroke-dasharray: 5.34 534.07; /* 1% of 534.07 */
    stroke-dashoffset: 5.34;
    animation: new-section1-4-fill 1s ease-in forwards;
}

.in-view .circle-section.new-section1-5 {
    stroke-dasharray: 74.77 534.07; /* 14% of 534.07 */
    stroke-dashoffset: 74.77;
    animation: new-section1-5-fill 1s ease-in forwards;
}

/* Keyframes for smooth animation of each section */
@keyframes new-section1-1-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes new-section1-2-fill {
    to {
        stroke-dashoffset: -80.11;
    }
}

@keyframes new-section1-3-fill {
    to {
        stroke-dashoffset: -128.18; /* -80.11 - 48.07 */
    }
}

@keyframes new-section1-4-fill {
    to {
        stroke-dashoffset: -454.07; /* -128.18 - 325.89 */
    }
}

@keyframes new-section1-5-fill {
    to {
        stroke-dashoffset: -459.41; /* -454.07 - 5.34 */
    }
}


/* Initial state (before animation) */
.circle-section {
    stroke-dasharray: 534.07; /* Full circumference */
    stroke-dashoffset: 534.07; /* Start with offset equal to circumference */
}

/* Each section fills a percentage of the circle */
.in-view .circle-section.sec-a {
    stroke-dasharray: 22.47 534.07; /* 4.2% of 534.07 */
    stroke-dashoffset: 22.47;
    animation: sec-a-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-b {
    stroke-dasharray: 22.47 534.07; /* 4.2% of 534.07 */
    stroke-dashoffset: 22.47;
    animation: sec-b-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-c {
    stroke-dasharray: 284.63 534.07; /* 53.1% of 534.07 */
    stroke-dashoffset: 284.63;
    animation: sec-c-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-d {
    stroke-dasharray: 6.41 534.07; /* 1.2% of 534.07 */
    stroke-dashoffset: 6.41;
    animation: sec-d-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-e {
    stroke-dasharray: 39.00 534.07; /* 7.3% of 534.07 */
    stroke-dashoffset: 39.00;
    animation: sec-e-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-f {
    stroke-dasharray: 9.07 534.07; /* 1.7% of 534.07 */
    stroke-dashoffset: 9.07;
    animation: sec-f-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-g {
    stroke-dasharray: 15.60 534.07; /* 28.4% of 534.07 */
    stroke-dashoffset: 15.60;
    animation: sec-g-fill 1s ease-in forwards;
}

/* Keyframes for smooth animation of each section */
@keyframes sec-a-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sec-b-fill {
    to {
        stroke-dashoffset: -22.47;
    }
}

@keyframes sec-c-fill {
    to {
        stroke-dashoffset: -44.94; /* -22.47 - 22.47 */
    }
}

@keyframes sec-d-fill {
    to {
        stroke-dashoffset: -329.57; /* -44.94 - 284.63 */
    }
}

@keyframes sec-e-fill {
    to {
        stroke-dashoffset: -335.98; /* -329.57 - 6.41 */
    }
}

@keyframes sec-f-fill {
    to {
        stroke-dashoffset: -375.98; /* -335.98 - 39.00 */
    }
}

@keyframes sec-g-fill {
    to {
        stroke-dashoffset: -385.05; /* -375.98 - 9.07 */
    }
}

/* Initial state (before animation) */
.circle-section {
    stroke-dasharray: 534.07; /* Full circumference */
    stroke-dashoffset: 534.07; /* Start with offset equal to circumference */
}

/* Each section fills a percentage of the circle */
.in-view .circle-section.sec-h {
    stroke-dasharray: 27.78 534.07; /* 5.2% of 534.07 */
    stroke-dashoffset: 27.78;
    animation: sec-h-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-i {
    stroke-dasharray: 34.72 534.07; /* 6.5% of 534.07 */
    stroke-dashoffset: 34.72;
    animation: sec-i-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-j {
    stroke-dasharray: 17.11 534.07; /* 3.2% of 534.07 */
    stroke-dashoffset: 17.11;
    animation: sec-j-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-k {
    stroke-dasharray: 58.86 534.07; /* 11% of 534.07 */
    stroke-dashoffset: 58.86;
    animation: sec-k-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-l {
    stroke-dasharray: 16.04 534.07; /* 3% of 534.07 */
    stroke-dashoffset: 16.04;
    animation: sec-l-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-m {
    stroke-dasharray: 86.00 534.07; /* 16.1% of 534.07 */
    stroke-dashoffset: 86.00;
    animation: sec-m-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-n {
    stroke-dasharray: 21.50 534.07; /* 40.3% of 534.07 */
    stroke-dashoffset: 21.50;
    animation: sec-n-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-o {
    stroke-dasharray: 10.68 534.07; /* 2% of 534.07 */
    stroke-dashoffset: 10.68;
    animation: sec-o-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-p {
    stroke-dasharray: 12.84 534.07; /* 2.4% of 534.07 */
    stroke-dashoffset: 12.84;
    animation: sec-p-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-q {
    stroke-dasharray: 52.34 534.07; /* 9.8% of 534.07 */
    stroke-dashoffset: 52.34;
    animation: sec-q-fill 1s ease-in forwards;
}

/* Keyframes for smooth animation of each section */
@keyframes sec-h-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sec-i-fill {
    to {
        stroke-dashoffset: -27.78;
    }
}

@keyframes sec-j-fill {
    to {
        stroke-dashoffset: -62.50; /* -27.78 - 34.72 */
    }
}

@keyframes sec-k-fill {
    to {
        stroke-dashoffset: -79.61; /* -62.50 - 17.11 */
    }
}

@keyframes sec-l-fill {
    to {
        stroke-dashoffset: -138.47; /* -79.61 - 58.86 */
    }
}

@keyframes sec-m-fill {
    to {
        stroke-dashoffset: -154.51; /* -138.47 - 16.04 */
    }
}

@keyframes sec-n-fill {
    to {
        stroke-dashoffset: -240.51; /* -154.51 - 86.00 */
    }
}

@keyframes sec-o-fill {
    to {
        stroke-dashoffset: -251.19; /* -240.51 - 10.68 */
    }
}

@keyframes sec-p-fill {
    to {
        stroke-dashoffset: -264.03; /* -251.19 - 12.84 */
    }
}

@keyframes sec-q-fill {
    to {
        stroke-dashoffset: -276.87; /* -264.03 - 12.84 */
    }
}

/* Initial state (before animation) */
.circle-section {
    stroke-dasharray: 534.07; /* Full circumference */
    stroke-dashoffset: 534.07; /* Start with offset equal to circumference */
}

/* Each section fills a percentage of the circle */
.in-view .circle-section.sec-r {
    stroke-dasharray: 35.24 534.07; /* 6.6% of 534.07 */
    stroke-dashoffset: 35.24;
    animation: sec-r-fill 1s ease-in forwards;
}

.in-view .circle-section.sec-s {
    stroke-dasharray: 499.83 534.07; /* 93.4% of 534.07 */
    stroke-dashoffset: 499.83;
    animation: sec-s-fill 1s ease-in forwards;
}

/* Keyframes for smooth animation of each section */
@keyframes sec-r-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sec-s-fill {
    to {
        stroke-dashoffset: -35.24; /* Offset is -35.24 (end of sec-r) */
    }
}


.circle-part {
    fill: none;
    stroke-width: 30px;
    stroke-linecap: butt;
    stroke-dasharray: 534.07; /* Total circumference of the circle */
    stroke-dashoffset: 534.07; /* Start hidden */
}

/* First Section - 8% (Red) */
.in-view .part-1 {
    stroke-dasharray: calc(534.07 * 0.08) 534.07;
    stroke-dashoffset: calc(534.07 * 0.08);
    animation: section-fill 1s ease-in forwards;
}

/* Second Section - 15% (Green) */
.in-view .part-2 {
    stroke-dasharray: calc(534.07 * 0.15) 534.07;
    stroke-dashoffset: calc(534.07 * 0.23); /* 8% + 15% */
    animation: section-fill 1s ease-in forwards;
    animation-delay: 1s;
}

/* Third Section - 42% (Blue) */
.in-view .part-3 {
    stroke-dasharray: calc(534.07 * 0.42) 534.07;
    stroke-dashoffset: calc(534.07 * 0.65); /* 8% + 15% + 42% */
    animation: section-fill 1s ease-in forwards;
    animation-delay: 2s;
}

/* Fourth Section - 24% (Yellow) */
.in-view .part-4 {
    stroke-dasharray: calc(534.07 * 0.24) 534.07;
    stroke-dashoffset: calc(534.07 * 0.89); /* 8% + 15% + 42% + 24% */
    animation: section-fill 1s ease-in forwards;
    animation-delay: 3s;
}

/* Fifth Section - 11% (Magenta) */
.in-view .part-5 {
    stroke-dasharray: calc(534.07 * 0.11) 534.07;
    stroke-dashoffset: 534.07; /* Complete the circle */
    animation: section-fill 1s ease-in forwards;
    animation-delay: 4s;
}

/* Keyframes for smooth animation */
@keyframes section-fill {
    to {
        stroke-dashoffset: 0;
    }
}


.circle-part {
    fill: none;
    stroke-width: 30px;
    stroke-linecap: butt;
    stroke-dasharray: 534.07; /* Total circumference of the circle */
    stroke-dashoffset: 534.07; /* Start hidden */
}

/* First Section - 8% (Red) */
.in-view .slice-one {
    stroke-dasharray: calc(534.07 * 0.08) 534.07;
    stroke-dashoffset: calc(534.07 * 0.08);
    animation: fill-one 1s ease-in forwards;
}

@keyframes fill-one {
    from {
        stroke-dashoffset: 534.07;
    }
    to {
        stroke-dashoffset: calc(534.07 * 0);
    }
}

/* Second Section - 15% (Green) */
.in-view .slice-two {
    stroke-dasharray: calc(534.07 * 0.15) 534.07;
    stroke-dashoffset: calc(534.07 - (534.07 * 0.08)); /* Start after 8% */
    animation: fill-two 1s ease-in forwards;
    animation-delay: 1s;
}

@keyframes fill-two {
    from {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.08));
    }
    to {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.08) - (534.07 * 0.15));
    }
}

/* Third Section - 42% (Blue) */
.in-view .slice-three {
    stroke-dasharray: calc(534.07 * 0.42) 534.07;
    stroke-dashoffset: calc(534.07 - (534.07 * 0.23)); /* Start after 8% + 15% */
    animation: fill-three 1s ease-in forwards;
    animation-delay: 2s;
}

@keyframes fill-three {
    from {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.23));
    }
    to {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.23) - (534.07 * 0.42));
    }
}


/* Fourth Section - 24% (Yellow) */
.in-view .slice-four {
    stroke-dasharray: calc(534.07 * 0.24) 534.07;
    stroke-dashoffset: calc(534.07 - (534.07 * 0.65)); /* Start after 8% + 15% + 42% */
    animation: fill-four 1s ease-in forwards;
    animation-delay: 3s;
}

@keyframes fill-four {
    from {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.65));
    }
    to {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.65) - (534.07 * 0.24));
    }
}

/* Fifth Section - 11% (Magenta) */
.in-view .slice-five {
    stroke-dasharray: calc(534.07 * 0.11) 534.07;
    stroke-dashoffset: calc(534.07 - (534.07 * 0.89)); /* Start after 8% + 15% + 42% + 24% */
    animation: fill-five 1s ease-in forwards;
    animation-delay: 4s;
}

@keyframes fill-five {
    from {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.89));
    }
    to {
        stroke-dashoffset: calc(534.07 - (534.07 * 0.89) - (534.07 * 0.11));
    }
}


/*  */

.circle-background {
    fill: none;
    stroke-width: 30px;
    stroke: rgb(83, 33, 72);
}

.circle-section {
    fill: none;
    stroke-width: 30px;
    stroke-linecap: butt;
    stroke-dasharray: 530.66;
    stroke-dashoffset: 530.66;
    /* Start hidden */
}

/* Each section fills 12.5% of the circle */
.in-view .circle-section.one1 {
    stroke-dasharray: 42.45 530.66; /* 8% of 530.66 */
    stroke-dashoffset: 42.45;
    animation: sec-a-fill 1s ease-in forwards;
}

.in-view .circle-section.two1 {
    stroke-dasharray: 79.60 530.66; /* 15% of 530.66 */
    stroke-dashoffset: 79.60;
    animation: sec-b-fill 1s ease-in forwards;

}

.in-view .circle-section.three1 {
    stroke-dasharray: 222.88 530.66; /* 42% of 530.66 */
    stroke-dashoffset: 222.88;
    animation: sec-c-fill 1s ease-in forwards;

}

.in-view .circle-section.four1 {
    stroke-dasharray: 127.36 530.66; /* 24% of 530.66 */
    stroke-dashoffset: 127.36;
    animation: sec-d-fill 1s ease-in forwards;

}

.in-view .circle-section.five1 {
    stroke-dasharray: 58.37 530.66; /* 11% of 530.66 */
    stroke-dashoffset: 58.37;
    animation: sec-e-fill 1s ease-in forwards;

}


/* Keyframes for smooth animation of each section */
@keyframes section-one-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes section-two-fill {
    to {
        stroke-dashoffset: -42.45;
    }
}

@keyframes section-three-fill {
    to {
        stroke-dashoffset: -122.05;
    }
}

@keyframes section-four-fill {
    to {
        stroke-dashoffset: -344.93;
    }
}

@keyframes section-five-fill {
    to {
        stroke-dashoffset: -472.29;
    }
}