:root {
        --tp-theme-orange: #ff321f;
        --tp-theme-vogue: #032b5f;
    }

    /* Keyframes for new infinite animations */
    @keyframes pulse-glow {
        0%, 100% {
            transform: scale(1);
            opacity: 0.4;
        }
        50% {
            transform: scale(1.1);
            opacity: 0.7;
        }
    }

    @keyframes float-up-down {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    @keyframes marching-ants {
        to {
            stroke-dashoffset: -20;
        }
    }

    /* New animated gradient background */
    @keyframes gradient-shift {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .process-timeline-section {
        background: linear-gradient(
            135deg,
            var(--tp-theme-orange),
            var(--tp-theme-vogue)
        );
        background-size: 200% 200%;
        animation: gradient-shift 8s ease infinite;
        padding: 120px 0;
        position: relative;
        overflow: hidden;
        font-family: Arial, sans-serif;
    }

    .process-timeline-section .tp-section__title,
    .process-timeline-section p {
        color: #ffffff; /* white text for contrast */
    }

    .process-timeline-container {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        margin-top: 80px;
    }

    .process-timeline-path {
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        height: 150px;
        z-index: 1;
    }

    .timeline-path-animated {
        stroke: rgba(255, 255, 255, 0.6);
        stroke-width: 2;
        stroke-dasharray: 10, 10;
        fill: none;
        animation: marching-ants 1.5s linear infinite;
    }

    .process-timeline {
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 2;
    }

    .timeline-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 23%;
        position: relative;
        animation: float-up-down 4s ease-in-out infinite;
    }

    /* Staggered animation delays */
    .timeline-step:nth-child(2) { animation-delay: 1s; }
    .timeline-step:nth-child(3) { animation-delay: 2s; }
    .timeline-step:nth-child(4) { animation-delay: 0.5s; }

    .step-icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }

    .step-icon-wrapper::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px dashed rgba(255, 255, 255, 0.6);
        border-radius: 50%;
    }

    .step-icon-wrapper::after { /* Glow element */
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--tp-theme-orange);
        box-shadow: 0 0 25px 8px rgba(255, 50, 31, 0.5);
        z-index: -1;
        animation: pulse-glow 3s infinite ease-in-out;
        transition: all 0.3s ease;
    }

    .step-icon {
        background-color: var(--tp-theme-vogue);
        width: 130px;
        height: 130px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 50px;
    }

    .step-content h3 {
        font-size: 22px;
        color: #ffffff;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .step-content p {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
    }

    /* Hover effects */
    .timeline-step:hover {
        animation-play-state: paused;
    }

    .timeline-step:hover .step-icon-wrapper {
        transform: scale(1.05);
    }

    .timeline-step:hover .step-icon-wrapper::after {
        animation-play-state: paused;
        transform: scale(1.1);
        opacity: 0.9;
        box-shadow: 0 0 35px 12px rgba(255, 50, 31, 0.6);
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .process-timeline { flex-wrap: wrap; justify-content: center; gap: 60px 2%; }
        .timeline-step { width: 48%; }
        .process-timeline-path { display: none; }
    }

    @media (max-width: 767px) {
        .process-timeline { flex-direction: column; align-items: center; gap: 60px; }
        .timeline-step { width: 80%; max-width: 350px; animation-name: none; } /* Disable float on mobile */
    }