.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 & Timeline Progress Line
   ========================================================= */
.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: 3;
  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: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  height: var(--progress-height, 0px);
  transition: height 0.2s ease-out;
}


/* =========================================================
   2. Timeline Item Base
   ========================================================= */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item { 
  position: relative !important;
  width: 50% !important;
  padding: 40px;
  box-sizing: border-box !important;
  z-index: 5; /* above background */
  background: transparent !important;
  overflow: visible !important;
}

/* ---- Full-width background for each item ---- */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50vw;
  width: 204%; /* guaranteed to cover entire screen */
  height: 100%;
  z-index: -1;
}

/* Alternating backgrounds */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd)::after {
  background-color: #f7f7f7 !important;
}

.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even)::after {
  background-color: #ffffff !important;
}


/* =========================================================
   3. Timeline Dot (Default + Active)
   ========================================================= */

/* Default dot */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item::before {
  content: '';
  position: absolute;
  top: 45px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #333;
  z-index: 10;
  transition: all 0.3s ease;
}

/* Active (bullseye) */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item.is-active::before {
  top: 53px;
  width: 15px;
  height: 15px;
  background-color: #333;
  box-shadow: 
    0 0 0 3px #fff, 
    0 0 0 5px #333;
}


/* =========================================================
   4. LEFT/RIGHT Layout Logic (Desktop)
   ========================================================= */

/* ODD = Right side */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd) { 
  left: 50% !important;
  padding-left: 40px !important;
  padding-right: 40px;
  text-align: left !important;
}
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(odd)::before {
  left: -7px !important;
}

/* EVEN = Left side */
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even) { 
  left: 0 !important;
  padding-right: 40px !important;
  text-align: right !important;
}
.elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item:nth-child(even)::before {
  right: -7px !important;
}


/* =========================================================
   5. Mobile Fixes
   ========================================================= */

@media (max-width: 767px) {

  .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;
    text-align: left !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  /* Adjust backgrounds to fit mobile container */
  .elementor-4870 .elementor-element.elementor-element-18bb593 .e-loop-item::after {
    left: 0;
    width: 100%;
  }

  /* Dots on mobile */
  .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;
    right: auto !important;
    top: 45px !important;
  }
}/* End custom CSS */