/* Timeline Line Styles */
.arman-timeline-wrapper {
    position: relative;
    --timeline-line-top: 0;
    --timeline-line-bottom: 0;
}

.arman-timeline-wrapper::before {
    content: '';
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    width: var(--line-width, 2px);
    z-index: 0;
    
    /* These will be set by JavaScript */
    top: var(--timeline-line-top);
    bottom: var(--timeline-line-bottom);
    
    /* For solid line */
    background-color: var(--line-color, #50d1c0);
}

/* Dashed line */
.arman-timeline-wrapper[data-line-type="dashed"]::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--line-color, #50d1c0),
        var(--line-color, #50d1c0) var(--dash-visible, 5px),
        transparent var(--dash-visible, 5px),
        transparent calc(var(--dash-visible, 5px) + var(--dash-spacing, 5px))
    );
}

/* Dotted line */
.arman-timeline-wrapper[data-line-type="dotted"]::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--line-color, #50d1c0),
        var(--line-color, #50d1c0) 2px,
        transparent 2px,
        transparent 4px
    );
}


.timeline-item {
    display: flex;
    justify-content: space-between;
    
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}

.timeline-item .timeline-side {
    width: 45%;
    padding: 0 10px;
}

.timeline-icon {
    /* Use CSS variables with fallbacks */
    background-color: var(--icon-bg-color, #50d1c0) !important;
    color: var(--icon-color, #0e0e0e) !important;
    
   
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 20px;
    flex-shrink: 0;
}

/* Target both FontAwesome icons and SVGs */
.timeline-icon i,
.timeline-icon svg {
    color: var(--icon-color, #0e0e0e) !important;
    fill: var(--icon-color, #0e0e0e) !important;
}

.timeline-item .timeline-side.date {
    font-size: 20px;
    color: #50d1c0;
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
}

.timeline-item .timeline-side.content h4 {
    color: #50d1c0;
    margin-bottom: 10px;
}


.timeline-item.even .timeline-side.date {
    text-align: left;
}

.timeline-item.odd .timeline-side.date {
    text-align: right;
}

@media (max-width: 767px) {
    .arman-timeline-wrapper {
        padding: 40px 15px;
    }
    
    .arman-timeline-wrapper::before {
        right: 33px; 
        transform: none; 
    }
    
    .timeline-item {
        flex-direction: column; 
        margin-bottom: 60px;
        align-items: flex-start; 
    }
    
    .timeline-item .timeline-side {
        width: 100% !important; 
        text-align: right; 
    }
    
    .timeline-item .timeline-side.date {
        order: 1; 
        margin-bottom: 15px;
        text-align: right !important;
        padding-right: 80px; 
    }
    
    .timeline-item .timeline-side.content {
        order: 2; 
        padding-right: 80px; 
    }
    
    .timeline-item .timeline-icon {
        position: absolute;
        right: 20px; 
        top: 0;
        transform: translateX(50%); 
        margin: 0;
    }
    
    /* Remove even/odd specific styles for mobile */
    .timeline-item.even .timeline-side.date,
    .timeline-item.odd .timeline-side.date {
        text-align: right !important;
    }
}


/* Hide the line above first item and below last item */
.timeline-item.first-item::before,
.timeline-item.last-item::after {
    content: none !important;
}


/* Milestone Indicator Line - Desktop */
.timeline-icon {
    position: relative;
    z-index: 1; /* Ensure icon stays above other elements */
}

.arman-milestone-indicator {
    position: absolute;
    height: 2px;
    width: 20px;
    background-color: var(--milestone-color, var(--line-color, #50d1c0));
    top: 50%;
    transform: translateY(-50%);
    z-index: 0; /* Place behind icon but above timeline */
}

/* Circular bullet at the END of the line */
.arman-milestone-indicator::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: inherit;
    top: 50%;
    transform: translateY(-50%);
}

/* Even items (right side) - Adjusted to match your latest version */
.timeline-item.even .arman-milestone-indicator {
    right: -20px;
    left: auto;
}
.timeline-item.even .arman-milestone-indicator::after {
    right: -3px; /* Bullet at end */
}

/* Odd items (left side) - Adjusted to match your latest version */
.timeline-item.odd .arman-milestone-indicator {
    left: -20px;
    right: auto;
}
.timeline-item.odd .arman-milestone-indicator::after {
    left: -3px; /* Bullet at end */
}

/* Mobile - Hide milestone completely */
@media (max-width: 767px) {
    .arman-milestone-indicator,
    .arman-milestone-indicator::after {
        display: none !important; 
    }
}