/**/
#circle {
    position: absolute;
    left: -20%;
    top:0;
    width: 40vw; /* Circle diameter */
    height: 40vw; /* Circle diameter */
    border: 2px solid #e7fece; /* Circle border */
    border-radius: 50%; /* Make it a circle */
    background-color: transparent; /* Transparent background */
}

.point {
    position: absolute;
    width: 4%; /* Solid circle diameter */
    height: 4%; /* Solid circle diameter */
    border-radius: 50%; /* Make it a circle */
    background-color: #e7fece; /* Solid circle color */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 12px;
}

/* Positioning the points around the circle */
.point1 { top: 10%; right: 20%; transform: translate(50%, -50%); }
.point2 { top: 50%; right: 0; transform: translate(50%, -50%); }
.point3 { bottom: 0; right: 30%; transform: translate(-50%, -15%); }
.point4 { top: 40%; left: 0; transform: translate(-20%, -50%); }
.point5 { bottom: 10%; left: 10%; transform: translate(70%, -70%); }

#circle .label .title-number{
    font-family: 'Comfortaa';
    font-size: 3.5em;
    margin-right: 3vw;
    font-weight: 600;
}

#circle .label .point-description{
    font-size: 2.5em;
    line-height:  1.2em;
    font-family: 'Ameliafaith',Helvetica,Arial,Lucida,sans-serif;
}

#circle .label {
    position: absolute;
    width: 40%;
    color: #e7fece;
    margin-bottom: 3vw;
    margin-left: 3vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    gap:1vw
}

#circle .label.label1 .point-description{
    text-align: left;
}
#circle .label.label1 .title-number,#circle .label.label2 .title-number{
    margin-right: auto;
}

#circle .label.label3{
    width: 10vw;
}
.label.label5 .title-number{
    margin-right: 0;
}
#circle .label.label2 .title-number{
    margin-right: auto;
}
#circle .label.label2 .point-description{
    text-align: start;
}
.label.label5 .point-description{
    text-align: end;
}

.label1 { top: 0; right: 0; transform: translate(70%, -50%); }
.label2 { top: 50%; right: -20%; transform: translate(70%, -50%); }
.label3 { bottom: -15%; left: 60%; transform: translate(-50%, 100%); }
.label4 { top: 40%; left: -10%; transform: translate(-100%, -90%); }
.label5 { bottom: -10%; left: -30%; transform: translate(0, 0); }