/* === Custom Block Styling === */
.circleProgress{
    padding: var(--CB-padding-top) var(--CB-padding-right) var(--CB-padding-bottom) var(--CB-padding-left);
    margin: var(--CB-margin-top) var(--CB-margin-bottom);
    background-color: var(--CB-background-color);
    background-image: var(--CB-background-image);
    background-position: var(--CB-background-position);
    background-size: cover;
    overflow: hidden;
}

/* === Copy Styles === */
.circleProgress__row{
    align-items: center;
}

.circleProgress__subheading{
    text-transform: uppercase;
    /* padding-bottom: 16px; */
    color: var(--FC-secondary-color);
}

.circleProgress__heading{
    color: var(--FC-primary-color);
    padding-bottom: 16px;
}

.circleProgress__copy p {
    color: var(--FC-secondary-color);
    padding-bottom: 16px;
}





/* === Image Styles === */
.circleProgress__imageWrapper {
    max-width: 500px;
    padding: 20px;
    cursor: none;
}

.circleProgress__image {
    width: 100%;
    border-radius: 50% !important;
    object-fit: cover;
    cursor: none;
}
.circleProgress__imagePagination{
    color: var(--FC-white);
    padding-bottom: 20px;
    text-shadow: 0 0 20px var(--FC-black);
}

.circleProgress__progressBar {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 500px;
    width: 100%;
    height: auto;
    pointer-events: none;
}
.circleProgress__progressBar svg{
    max-width: 500px;
    width: 100%;
    height: auto;
    transform: rotate(-90deg); /* Rotate to start from the top */
    pointer-events: none;
}

.circleProgress__progressBar circle {
    fill: none;
    stroke-linecap: round;
}

.circleProgress__progressBarFill {
    /* stroke: var(--FC-primary-color); Color for progress */
    stroke: var(--FC-primary-color);
    stroke-dasharray: 325; /* Circumference of the circle (2 * pi * radius) */
    stroke-dashoffset: 325; /* Hide the progress initially */
    transition: stroke-dashoffset 0.3s ease; /* Smooth transition */
    stroke-dashoffset: 0;
}


.circleProgress__progressBarStatic {
    stroke: var(--FC-off-white);
    opacity: .5;
}
/* Example for adjusting the stroke width */
.circleProgress__progressBar circle,
.circleProgress__progressBarFill {
    stroke-width: .5;
}










/* === This code handles the custom cursor effect === */
.circleProgress__customCursor {
    position: absolute;
    width: 75px;
    height: 75px;
    background: url("data:image/svg+xml,%3Csvg%20height%3D%2275%22%20width%3D%2275%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2075%2075%22%3E%3Ccircle%20cx%3D%2237.5%22%20cy%3D%2237.5%22%20r%3D%2230%22%20fill%3D%22red%22%20stroke%3D%22none%22/%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20font-size%3D%2218%22%20fill%3D%22white%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20font-family%3D%22AvertaStd%2C%20sans-serif%22%3EClick%3C/text%3E%3C/svg%3E") no-repeat center center;
    pointer-events: none;
    transform: translate(-50%, -75%);
    opacity: 0;
    transition: opacity .1s ease-in-out;
  }
  
  .circleProgress__customCursor.active{
    opacity: 1;
    transition: opacity .1s ease-in-out;
  }




.circleProgress__heading {
    font-size: var(--FC-font-size-84);
    line-height: 1;
}



.circleProgressImageSlider .swiper-button-next, .circleProgressImageSlider .swiper-button-prev {
    color: red !important;
}
.circleProgressImageSlider .swiper-button-next, .circleProgressImageSlider .swiper-rtl .swiper-button-prev {
    right: 46% !important;
    left: auto !important;
    top: unset !important;
    bottom: -35px;
}

.circleProgressImageSlider .swiper-button-prev, .circleProgressImageSlider .swiper-rtl .swiper-button-next {
    left: 30% !important;
    right: auto !important;
    top: unset !important;
    bottom: -35px;
}
.circleProgressImageSlider .swiper-button-next:after, .circleProgressImageSlider .swiper-button-prev:after {
    font-size: 28px !important;
}

.circleProgressImageSlider {
    overflow: visible !important;
}


@media screen and (max-width: 1399.98px){
    .circleProgressImageSlider .swiper-button-next, .circleProgressImageSlider .swiper-rtl .swiper-button-prev {
        right: 40% !important;
    }
    .circleProgressImageSlider .swiper-button-prev, .circleProgressImageSlider .swiper-rtl .swiper-button-next{
        left: 35% !important;
    }
}

@media screen and (max-width: 1199.98px){
    .circleProgressImageSlider .swiper-button-next, .circleProgressImageSlider .swiper-rtl .swiper-button-prev {
        right: 37% !important;
    }
}

@media screen and (max-width: 991.98px){
    .circleProgressImageSlider .swiper-button-next, .circleProgressImageSlider .swiper-rtl .swiper-button-prev {
        right: 35% !important;
    }
}

@media screen and (max-width: 767px){
    .circleProgress__subheading{
        padding-top: 32px;
    }
}



@media screen and (max-width: 575px){
    .circleProgress__customCursor.active{
        display: none;
    }
    .circleProgress__image{
        cursor: pointer;
    }
    .circleProgress__imageWrapper{
        cursor: default;
    }
}