.wintemp-circular-process {
    position: relative;
    width: 100%;
    max-width: 766px;
    margin: auto;
}

.circular-process-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Aspect ratio for responsive container */
    overflow: visible;
}

.circular-process-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    z-index: 1;
}

.circular-process-halo img {
    width: 100%;
    height: 100%;
    display: block;
}

.circular-process-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    opacity: 0;
    padding-bottom: 12px;
}

.is-animated .circular-process-center {
    animation: fadeInCenter 0.6s ease-out forwards;
}

.center-icon {
    color: #ff6b00;
    line-height: 1;
}

.center-icon i, .center-icon svg {
    width: 52px;
    height: 52px;
}

.center-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #ff6b00;
    text-transform: uppercase;
}

.process-item {
    position: absolute;
    width: 200px;
    text-align: center;
    z-index: 5;
    transition: all 300ms;
}
.process-item:hover {
    transform: translateY(-5px);
}
.item-number {
    width: auto;
    height: 96px;
    margin: 0 auto -40px;
    opacity: 0;
    transform: translateY(20px);
    position: relative;
    z-index: 1;
}

.item-number img {
    width: 100%;
    height: 100%;
    display: block;
}

.is-animated .item-number {
    animation: fadeInUp 0.4s ease-out forwards;
}

.item-title {
    font-size: 20px;
    font-weight: 600;
    color: #632800;
    line-height: 1.4;
    opacity: 0;
    position: relative;
    z-index: 2;
    cursor: default;
}

.is-animated .item-title {
    animation: opacityTitle 0.4s ease-out forwards;
}

/* Position mapping based on the image */
/* Item 01: Top Left */
.item-1 {
    top: 13%;
    left: 6%;
}

/* Item 02: Middle Left */
.item-2 {
    top: 50%;
    left: 0%;
}

/* Item 03: Bottom Center */
.item-3 {
    bottom: -3%;
    left: 37%;
}

/* Item 04: Middle Right */
.item-4 {
    top: 50%;
    right: 0%;
}

/* Item 05: Top Right */
.item-5 {
    top: 13%;
    right: 6%;
}

/* Animation Delays - Sequential */

/* Numbers appear first: 0.3s interval */
.item-1 .item-number { animation-delay: 0.4s; }
.item-2 .item-number { animation-delay: 0.7s; }
.item-3 .item-number { animation-delay: 1.0s; }
.item-4 .item-number { animation-delay: 1.3s; }
.item-5 .item-number { animation-delay: 1.6s; }

/* Titles appear after all numbers: starting from 2.5s */
.item-1 .item-title { animation-delay: 0.4s; }
.item-2 .item-title { animation-delay: 0.7s; }
.item-3 .item-title { animation-delay: 1.0s; }
.item-4 .item-title { animation-delay: 1.3s; }
.item-5 .item-title { animation-delay: 1.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInCenter {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes opacityTitle {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .circular-process-container {
        padding-bottom: 85%;
    }
    .process-item {
        width: 90px;
    }
    .item-number {
        height: 48px;
        margin: 0 auto -20px;
    }
    .item-title {
        font-size: 13px;
    }
    .item-1 { top: 7%; left: 0; }
    .item-5 { top: 7%; right: 0; }
    .item-2 { top: 70%; left: 5%; }
    .item-4 { top: 69%; right: 1%; }
    .item-3 { bottom: -25%; }
    .wintemp-circular-process {
        height: 85vw;
    }
    .circular-process-container .circular-process-halo {
        width: 161px;
    }
    .center-icon i, .center-icon svg {
        width: 26px;
        height: 26px;
    }
    .center-text {
        font-size: 16px;
    }
    .circular-process-center {
        padding-bottom: 0;
    }
}