/* Dev Service Graphic Border Animation */
.dev-service-graphic {
    position: relative;
}

.dev-service-graphic svg {
    width: 100%;
    height: auto;
}

/* Base styles for all segments */
.dev-service-graphic .segment-path {
    transition: stroke 0.3s ease-in, stroke-width 0.3s ease-in;
}

/* Active segment styles */
.dev-service-graphic .segment-path.active {
    stroke: #df0b0bff !important;
    stroke-width: 8px !important;
    animation: pulse 2s infinite;
    paint-order: stroke fill;
}

/* Inactive segment styles */
.dev-service-graphic .segment-path.inactive {
    stroke: #121212 !important;
    stroke-width: 2px !important;
}

/* Pulse animation for active segment */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Animation control */
.dev-service-graphic.animating .segment-path {
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dev-service-graphic svg {
        max-width: 100%;
        height: auto;
    }
}