.elementor-4870 .elementor-element.elementor-element-18bb593{--display:flex;}.elementor-4870 .elementor-element.elementor-element-645c3a6a{z-index:5;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4870 .elementor-element.elementor-element-63bfcd4a{--grid-columns:1;z-index:1;}@media(min-width:768px){.elementor-4870 .elementor-element.elementor-element-18bb593{--content-width:1200px;}}@media(max-width:1024px){.elementor-4870 .elementor-element.elementor-element-63bfcd4a{--grid-columns:1;}}@media(max-width:767px){.elementor-4870 .elementor-element.elementor-element-63bfcd4a{--grid-columns:1;}}/* Start custom CSS for container, class: .elementor-element-18bb593 *//* --- 1. Main Container & Progress Bar --- */
.elementor-4870 .elementor-element.elementor-element-18bb593 { position: relative; width: 100%; }
.elementor-4870 .elementor-element.elementor-element-18bb593 .timeline-progress {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 3px;
  height: 100%; z-index: 1;
  background-image: linear-gradient(to bottom, #333 4px, transparent 4px);
  background-size: 100% 8px;
}
.elementor-4870 .elementor-element.elementor-element-18bb593 .timeline-progress::before {
  content: ''; display: block; position: absolute;
  top: 0; left: 0; width: 100%;
  background-color: #333; transition: height 0.2s ease-out;
  height: var(--progress-height, 0px);
}

/* --- 2. Timeline Item Base Styles --- */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item { 
  position: relative !important; 
  width: 50% !important; 
  padding-top: 40px;
  padding-left: 40px;
  padding-bottom: 40px;
  box-sizing: border-box !important;
  z-index: 2;
}


/* Default State: A simple solid dot */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item::before { 
  content: ''; 
  position: absolute; 
  top: 45px; /* Positioned for the larger size */
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #333; /* Solid black color */
  box-shadow: none; /* No bullseye effect by default */
  z-index: 3;
  transition: all 0.3s ease;
}

/* Active State: The bullseye effect appears */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item.is-active::before { 
  top: 53px; /* Moves down to re-center the smaller core */
  width: 15px;  /* Becomes the small inner solid dot */
  height: 15px;
  background-color: #333; /* The solid black center */
  
  /* This creates the gap (white) and the outline (black) */
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #333;
}

/* --- 3. INVERTED Positioning to Counteract Theme Conflict --- */

/* ODD items (1st, 3rd) are forced to the RIGHT */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd) { 
  left: 50% !important; 
      padding-right: 40px;
  padding-left: 40px !important; 
  text-align: left !important; 
  background-color: #f7f7f7; 
}
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd)::before { 
  left: -7px !important; 
}

/* EVEN items (2nd, 4th) are forced to the LEFT */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even) { 
  left: 0 !important; 
  padding-right: 40px !important; 
  text-align: right !important; 
  background-color: #f7f7f7; /* Grey background */
}
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even)::before { 
  right: -7px !important; 
}

/* --- 4. Responsive --- */
@media (max-width: 767px) {
  /* On mobile, all items go to the left, so we reset the inverted styles */
  .elementor-4870 .elementor-element.elementor-element-18bb593 .timeline-progress { left: 10px; transform: none; }
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item, 
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd),
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even) { 
    width: 100% !important; 
    left: 0 !important; 
    padding-left: 40px !important; 
    padding-right: 10px !important; 
    text-align: left !important; 
  }
  /* On mobile, odd items get the grey background back */
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd) {
    background-color: #f7f7f7 !important;
  }
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even) {
    background-color: transparent !important;
  }
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item::before, 
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd)::before, 
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even)::before { 
    left: 4px !important; top: 45px !important; right: auto !important;
  }
}/* End custom CSS */