/* MS_Services v5.0.0 */

/* ══════════════════════════════════════════════════════════
   WRAPPER
   ══════════════════════════════════════════════════════════ */
.ms5-wrap {
  --ms5-node-sz:  56px;
  --ms5-line-f:   #222;
  --ms5-line-b:   #e0e0e0;
  --ms5-line-w:   3px;
  --ms5-mob-left: 48px;

  position:   relative;
  width:      100%;
  box-sizing: border-box;
  padding:    60px 40px;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════
   TIMELINE TRACKS
   Two tracks: desktop (centred) and mobile (left-aligned).
   CSS shows/hides each at the right breakpoint.
   ══════════════════════════════════════════════════════════ */
.ms5-track {
  position:         absolute;
  top:    0;
  bottom: 0;
  width:            var(--ms5-line-w);
  background-color: var(--ms5-line-b);
  border-radius:    99px;
  z-index:          0;
  pointer-events:   none;
}

/* Desktop track: centred */
.ms5-track-desk {
  left:      50%;
  transform: translateX(-50%);
}

/* Mobile track: left-aligned (position set via CSS var from PHP) */
.ms5-track-mob {
  left:      var(--ms5-mob-left);
  transform: none;
  display:   none; /* hidden on desktop */
}

.ms5-fill {
  position:         absolute;
  top: 0; left: 0;
  width:  100%;
  height: 0%;
  background-color: var(--ms5-line-f);
  border-radius:    99px;
  transition:       height .07s linear;
  will-change:      height;
}

/* ══════════════════════════════════════════════════════════
   ITEMS LIST
   ══════════════════════════════════════════════════════════ */
.ms5-items {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  gap:            72px;
}

.ms5-item { width: 100%; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════
   DESKTOP LAYOUT  (.ms5-desk)
   Shown above 768px. Hidden below.
   Clean 3-column CSS grid. Node always centre column.
   even: text | node | image
   odd:  image | node | text
   ══════════════════════════════════════════════════════════ */
.ms5-desk {
  display:               grid;
  grid-template-columns: 1fr var(--ms5-node-sz) 1fr;
  grid-template-rows:    auto;
  align-items:           center;
  width:                 100%;
  box-sizing:            border-box;
}

/* even: col order TEXT | NODE | IMAGE */
.ms5-desk-even .ms5-d-text { grid-column: 1; grid-row: 1; padding-right: 40px; text-align: left; }
.ms5-desk-even .ms5-d-node { grid-column: 2; grid-row: 1; display: flex; justify-content: center; }
.ms5-desk-even .ms5-d-img  { grid-column: 3; grid-row: 1; padding-left:  40px; }

/* odd: col order IMAGE | NODE | TEXT */
.ms5-desk-odd  .ms5-d-img  { grid-column: 1; grid-row: 1; padding-right: 40px; }
.ms5-desk-odd  .ms5-d-node { grid-column: 2; grid-row: 1; display: flex; justify-content: center; }
.ms5-desk-odd  .ms5-d-text { grid-column: 3; grid-row: 1; padding-left:  40px; text-align: left; }

/* ══════════════════════════════════════════════════════════
   MOBILE LAYOUT  (.ms5-mob)
   Shown at 768px and below. Hidden above.
   Flex row: [node fixed-width] [text+image stacked]
   ══════════════════════════════════════════════════════════ */
.ms5-mob {
  display:     flex;
  flex-direction: row;
  align-items: flex-start;
  gap:         14px;
  width:       100%;
  box-sizing:  border-box;
}

.ms5-mob { display: none; } /* hidden on desktop */

.ms5-m-node {
  flex:            0 0 var(--ms5-node-sz);
  display:         flex;
  justify-content: center;
  padding-top:     4px;
}

.ms5-m-right {
  flex:     1;
  min-width: 0;
}

.ms5-m-img  { width: 100%; overflow: hidden; }
.ms5-m-text { margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════
   SHARED: Node, Title, Desc, Image
   ══════════════════════════════════════════════════════════ */
.ms5-node {
  transition: transform .25s ease, box-shadow .25s ease;
}
.ms5-node:hover {
  transform:  scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
}
.ms5-node i, .ms5-node svg {
  display:     block;
  flex-shrink: 0;
  line-height: 1;
}

.ms5-title {
  font-size:     1.4rem;
  font-weight:   700;
  line-height:   1.3;
  margin:        0 0 10px;
  text-align:    left !important;
  overflow-wrap: break-word;
  color:         #1a1a1a;
}
.ms5-desc {
  font-size:     .96rem;
  line-height:   1.75;
  margin:        0;
  text-align:    left !important;
  overflow-wrap: break-word;
  color:         #555;
}

.ms5-d-img  { overflow: hidden; min-width: 0; }
.ms5-d-text { min-width: 0; }

.ms5-img {
  display:    block;
  width:      100%;
  max-width:  100%;
  height:     260px;     /* overridden by Elementor selector */
  object-fit: cover;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   JS adds .ms5-visible when item scrolls into view.
   ══════════════════════════════════════════════════════════ */
.ms5-d-text, .ms5-d-img,
.ms5-m-right {
  opacity:    0;
  transition: opacity .65s ease, transform .65s ease;
}
.ms5-d-text  { transition-delay: .05s; }
.ms5-d-img   { transition-delay: .20s; }
.ms5-m-right { transition-delay: .08s; }

.ms5-item.ms5-visible .ms5-d-text,
.ms5-item.ms5-visible .ms5-d-img,
.ms5-item.ms5-visible .ms5-m-right { opacity: 1; }

/* Scale */
.ms5-anim-scale .ms5-d-text,
.ms5-anim-scale .ms5-d-img,
.ms5-anim-scale .ms5-m-right { transform: scale(.9); }
.ms5-anim-scale.ms5-visible .ms5-d-text,
.ms5-anim-scale.ms5-visible .ms5-d-img,
.ms5-anim-scale.ms5-visible .ms5-m-right { transform: scale(1); }

/* Slide Up */
.ms5-anim-slide-up .ms5-d-text,
.ms5-anim-slide-up .ms5-d-img,
.ms5-anim-slide-up .ms5-m-right { transform: translateY(36px); }
.ms5-anim-slide-up.ms5-visible .ms5-d-text,
.ms5-anim-slide-up.ms5-visible .ms5-d-img,
.ms5-anim-slide-up.ms5-visible .ms5-m-right { transform: translateY(0); }

/* Fade */
.ms5-anim-fade .ms5-d-text,
.ms5-anim-fade .ms5-d-img,
.ms5-anim-fade .ms5-m-right { transform: none; }

/* Rotate */
.ms5-anim-rotate .ms5-d-text,
.ms5-anim-rotate .ms5-d-img,
.ms5-anim-rotate .ms5-m-right { transform: rotate(-6deg) scale(.93); }
.ms5-anim-rotate.ms5-visible .ms5-d-text,
.ms5-anim-rotate.ms5-visible .ms5-d-img,
.ms5-anim-rotate.ms5-visible .ms5-m-right { transform: rotate(0) scale(1); }

/* Bounce */
@keyframes ms5-bounce {
  0%   { opacity:0; transform:scale(.4); }
  55%  { opacity:1; transform:scale(1.06); }
  80%  { transform:scale(.97); }
  100% { opacity:1; transform:scale(1); }
}
.ms5-anim-bounce .ms5-d-text,
.ms5-anim-bounce .ms5-d-img,
.ms5-anim-bounce .ms5-m-right { transform: scale(.4); }
.ms5-anim-bounce.ms5-visible .ms5-d-text,
.ms5-anim-bounce.ms5-visible .ms5-d-img,
.ms5-anim-bounce.ms5-visible .ms5-m-right {
  animation: ms5-bounce .7s cubic-bezier(.36,.07,.19,.97) both;
}

/* Editor: everything visible */
.ms5-item.ms5-visible .ms5-d-text,
.ms5-item.ms5-visible .ms5-d-img,
.ms5-item.ms5-visible .ms5-m-right { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Show/hide the two layouts + adjust tracks
   ══════════════════════════════════════════════════════════ */

/* ── Desktop > 768px ── */
@media (min-width: 769px) {
  .ms5-desk    { display: grid; }   /* show desktop layout */
  .ms5-mob     { display: none; }   /* hide mobile layout  */
  .ms5-track-desk { display: block; }
  .ms5-track-mob  { display: none; }
}

/* ── Mobile / Tablet ≤ 768px ── */
@media (max-width: 768px) {
  .ms5-wrap {
    padding: 40px 20px;
  }
  .ms5-items { gap: 44px; }

  .ms5-desk       { display: none !important; }  /* hide desktop layout */
  .ms5-mob        { display: flex !important; }   /* show mobile layout  */
  .ms5-track-desk { display: none !important; }
  .ms5-track-mob  { display: block !important; }

  .ms5-img { height: 190px !important; }
  .ms5-title { font-size: 1.15rem; }
  .ms5-desc  { font-size: .9rem; }
}

/* ── Small mobile ≤ 400px ── */
@media (max-width: 400px) {
  .ms5-wrap  { padding: 32px 14px; --ms5-node-sz: 44px; }
  .ms5-img   { height: 160px !important; }
  .ms5-title { font-size: 1rem; }
}