/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 28 2025 | 11:56:37 */
      /* ---------- Root & body ---------- */
      .timeline-body {
        --color: rgba(30, 30, 30);
        --bgColor: rgba(245, 245, 245);
        margin: 0;
        font-family: system-ui, sans-serif;
        background: var(--bgColor);
        color: var(--color);
      }

      /* ---------- Heading ---------- */
      .timeline-heading {
        text-align: center;
        margin-block: 2rem 3rem;
      }

      /* ---------- Timeline wrapper ---------- */
      .timeline {
        --col-gap: 2rem;
        --row-gap: 2rem;
        --line-w: 0.25rem;

        display: grid;
        grid-template-columns: var(--line-w) 1fr;
/*         width: min(60rem, 90%); */
		  width:100%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        position: relative;
      }

      /* vertical center line */
      .timeline::before {
        content: "";
        grid-column: 1;
        grid-row: 1 / span 20;
        background: rgb(225, 225, 225);
        border-radius: calc(var(--line-w) / 2);
      }

      /* ---------- Timeline items ---------- */
      .timeline-item {
        grid-column: 2;
        grid-row: span 2;
        display: grid;
        grid-template-rows: min-content min-content min-content;
        --inlineP: 1.5rem;
        margin-inline: var(--inlineP);
      }

      .timeline-item:not(:last-child) {
        margin-bottom: var(--row-gap);
      }

      /* ---------- Date pill ---------- */
      .timeline-date {
        --dateH: 3rem;
        height: var(--dateH);
        margin-inline: calc(var(--inlineP) * -1);
        display: grid;
        place-content: center;
        text-align: center;
        font-size: 1.25rem;
        font-weight: 700;
        color: #fff;
        background: var(--accent-color);
        position: relative;
        border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
      }

      /* folded flap */
      .timeline-date::before {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        width: var(--inlineP);
        aspect-ratio: 1;
        background: var(--accent-color);
        background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
        clip-path: polygon(0 0, 100% 0, 0 100%);
      }

      /* small circle on center line */
      .timeline-date::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(100% + var(--col-gap) + var(--line-w) / 2);
        width: 2rem;
        aspect-ratio: 1;
        background: var(--bgColor);
        border: 0.3rem solid var(--accent-color);
        border-radius: 50%;
        transform: translate(50%, -50%);
      }

      /* ---------- Title & description ---------- */
      .timeline-title,
      .timeline-descr {
        position: relative;
        background: var(--bgColor);
        padding-inline: 1.5rem;
      }

      .timeline-title {
        padding-block: 1.5rem 1rem;
        font-weight: 500;
      }

      .timeline-descr {
        padding-block-end: 1.5rem;
        font-weight: 300;
      }

      /* subtle shadows */
      .timeline-title::before,
      .timeline-descr::before {
        content: "";
        position: absolute;
        left: 50%;
        width: 90%;
        height: 0.5rem;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        filter: blur(8px);
        transform: translate(-50%, 50%);
      }
      .timeline-title::before {
        bottom: calc(100% + 0.125rem);
      }
      .timeline-descr::before {
        bottom: 0.25rem;
        z-index: -1;
      }

      /* ---------- Responsive: two‑column layout ---------- */
      @media (min-width: 40rem) {
        .timeline {
          grid-template-columns: 1fr var(--line-w) 1fr;
        }
        .timeline::before {
          grid-column: 2;
        }
        .timeline-item:nth-child(odd) {
          grid-column: 1;
        }
        .timeline-item:nth-child(even) {
          grid-column: 3;
        }
        /* start second card higher so items interleave cleanly */
        .timeline-item:nth-child(2) {
          grid-row: 2 / 4;
        }
        /* flip flap and dot for left‑side cards */
        .timeline-item:nth-child(odd) .timeline-date::before {
          clip-path: polygon(0 0, 100% 0, 100% 100%);
          left: 0;
          right: auto;
        }
        .timeline-item:nth-child(odd) .timeline-date::after {
          left: calc(100% + var(--col-gap) + var(--line-w) / 2);
          right: auto;
          transform: translate(-50%, -50%);
        }
        .timeline-item:nth-child(odd) .timeline-date {
          border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
        }
      }

      /* ---------- Accent‑color utility classes ---------- */
      .accent-1  { --accent-color: #41516C; }
      .accent-2  { --accent-color: #FBCA3E; }
      .accent-3  { --accent-color: #E24A68; }
      .accent-4  { --accent-color: #1B5F8C; }
      .accent-5  { --accent-color: #4CADAD; }