.vr-container-8abb0730 {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    overflow: hidden; /* Prevent animation overflow */
}

.vr-line-8abb0730 {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    background-color: var( --e-global-color-primary );
}

.vr-item-8abb0730 {
    padding: 20px 40px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
}

/* Base Circle Styles */
.vr-item-8abb0730::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 3px solid var( --e-global-color-primary );
    border-radius: 50%;
    top: 30px;
    z-index: 1;
    /* Default offset; gets overridden by line_width calc dynamically */
    box-sizing: content-box;
}

.vr-left {
    left: 0;
    padding-left: 0; /* Remove left padding to allow full width */
    padding-right: 40px; /* Keep padding near the line */
}

.vr-right {
    left: 50%;
    padding-right: 0; /* Remove right padding to allow full width */
    padding-left: 40px; /* Keep padding near the line */
}

/* Default alignment fallbacks */
.vr-left::before {
    right: -9px; 
}

.vr-right::before {
    left: -9px;
}

.vr-card-8abb0730 {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    /* Default max width, can be overridden by responsive settings */
    width: 100%;
    max-width: 100%;
}

/* Align cards appropriately within their 50% columns */
.vr-left .vr-card-8abb0730 {
    margin-left: auto; /* Push towards the line (right) */
    margin-right: 0;
}

.vr-right .vr-card-8abb0730 {
    margin-right: auto; /* Push towards the line (left) */
    margin-left: 0;
}


/* Entrance Animations */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Add an initial delay and use intersection observer in JS for true scroll animation,
   but we'll just apply basic CSS animation for immediate render in editor/view */
.vr-anim-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.vr-anim-right {
    animation: slideInRight 0.8s ease-out forwards;
}


.vr-header-8abb0730 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.vr-title-8abb0730 {
    margin: 0 0 5px;
    font-size: 1.2rem;
}

.vr-subtitle-8abb0730 {
    margin: 0 0 5px;
    font-size: 1rem;
    font-weight: 500;
}

.vr-company-8abb0730 {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.vr-date-8abb0730 {
    font-size: 0.9rem;
    font-weight: bold;
}

.vr-bullets-8abb0730 {
    margin: 0;
    padding-left: 20px;
}

.vr-bullets-8abb0730 li {
    margin-bottom: 5px;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .vr-line-8abb0730 {
        left: 20px;
    }
    .vr-item-8abb0730 {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
    }
    .vr-right {
        left: 0;
    }
    /* Mobile circle alignment (line is pinned to left: 20px) */
    .vr-left::before, .vr-right::before {
        /* Reset positioning for mobile view relative to the fixed line */
        left: calc(20px - 9px) !important;
        right: auto !important;
    }
    
    .vr-anim-left, .vr-anim-right {
        animation: slideInRight 0.6s ease-out forwards;
    }
    
    /* Ensure cards take full width on mobile unless overridden */
    .vr-left .vr-card-8abb0730, .vr-right .vr-card-8abb0730 {
        margin: 0;
        width: 100% !important; 
    }
}