/* ============================================================
   Overflow guard
   ============================================================ */
html:has(.sg-history),
body:has(.sg-history) {
  overflow-x: clip;
}
@supports not selector(:has(*)) {
  html,
  body {
    overflow-x: clip;
  }
}


/* ============================================================
   Section heading
   ============================================================ */
.sg-history__header {
  text-align: center;
  margin-bottom: clamp(2.25rem, 4vw, 4rem);
}
.sg-history__heading {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03125rem;
}

/* ============================================================
   Layout — vertical center line
   ============================================================ */
.sg-history__layout {
  position: relative;
  /* padding: clamp(3rem, 5vw, 5rem) 0; */
}
.sg-history__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 1px;
  background: #eef1f4;
  pointer-events: none;
}
.sg-history__items {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Item row — 2-col grid, connector sits absolute on center line
   ============================================================ */
.sg-history__item {
  position: relative;
  width: min(82.5rem, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1.125rem 0;
}

/* ============================================================
   Year wrap
   Initial state: invisible + shifted outward
   ============================================================ */
.sg-history__year-wrap {
  display: flex;
  align-items: center;
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sg-history__year-label {
  margin: 0;
  font-size: clamp(1.85rem, 2.5vw, 2.45rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03125rem;
  color: #ffffff;
}

/* ============================================================
   Connector — dot springs in, bridge draws in
   ============================================================ */
.sg-history__connector {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.sg-history__dot {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  border-radius: 50%;
  background: #f7b93a;
  box-shadow: inset 0 0 0 0.075rem #23479b;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-history__dot::after {
  content: '';
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}
.sg-history__bridge {
  width: 5rem;
  height: 1px;
  flex: 0 0 5rem;
  background: #ffffff;
  transform: scaleX(0);
  transition: transform 0.3s ease 0.2s;
}

/* ============================================================
   Card
   Initial state: invisible + shifted inward from outside
   ============================================================ */
.sg-history__card {
  width: min(29.75rem, 100%);
  /* background: rgba(255, 255, 255, 0.30); */
      background: #23479B4D;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  padding: 1rem;
  align-self: center;
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Yellow highlight card — white-tinted bg with yellow border */
.sg-history__card--highlight {
  background: rgba(255, 255, 255, 0.30);
  border-color: #f7b93a;
}
/* .sg-history__item:nth-child(6) .sg-history__card{
    background: linear-gradient(0deg, rgba(35, 71, 155, 0.14), rgba(35, 71, 155, 0.14)), linear-gradient(0deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));
} */
.sg-history__item:nth-child(7) .sg-history__card,
.sg-history__item:nth-child(9) .sg-history__card,
.sg-history__item:nth-child(10) .sg-history__card,
.sg-history__item:nth-child(11) .sg-history__card,
.sg-history__item:nth-child(13) .sg-history__card
{
background: #FFFFFF1A;
}
.sg-history__item:nth-child(8) .sg-history__card,
.sg-history__item:nth-child(12) .sg-history__card,
.sg-history__item:nth-child(14) .sg-history__card,
.sg-history__item:nth-child(15) .sg-history__card,
.sg-history__item:nth-child(16) .sg-history__card,
.sg-history__item:nth-child(17) .sg-history__card,
.sg-history__item:nth-child(18) .sg-history__card
{
/* background: #FFFFFF4D; */
background:#FFFFFF1A;

}
.sg-history__item:nth-child(19) .sg-history__card{
background: linear-gradient(0deg, rgba(35, 71, 155, 0.14), rgba(35, 71, 155, 0.14)),
linear-gradient(0deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));
}
.sg-history__item:nth-child(22) .sg-history__card{
/* background: #FFFFFF33; */
background:#23479B4D;
}
/* ============================================================
   LEFT item: year col-1 (right-aligned) → card col-2
   Year slides in from LEFT first, card slides in from RIGHT last
   ============================================================ */
.sg-history__item--left .sg-history__year-wrap {
  grid-column: 1;
  justify-content: flex-end;
  padding-right: clamp(1.25rem, 5%, 4.5rem);
  transform: translateX(-3.5rem);
  /* no delay — animates first */
}
.sg-history__item--left .sg-history__year-label {
  text-align: right;
}
.sg-history__item--left .sg-history__connector {
  left: calc(50% - 0.5rem);
  flex-direction: row; /* dot → bridge going right */
}
.sg-history__item--left .sg-history__bridge {
  transform-origin: left;
}
.sg-history__item--left .sg-history__card {
  grid-column: 2;
  width: min(29.75rem, calc(100% - 6.25rem));
  margin-left: 6.25rem;
  transform: translateX(3.5rem);
  transition-delay: 0.28s; /* card animates last */
}

/* ============================================================
   RIGHT item: card col-1 → year col-2 (left-aligned)
   Card slides in from LEFT first, year slides in from RIGHT last
   ============================================================ */
.sg-history__item--right .sg-history__card {
  grid-column: 1;
  width: min(29.75rem, calc(100% - 6.25rem));
  margin-left: auto;
  margin-right: 6.25rem;
  transform: translateX(-3.5rem);
  /* no delay — animates first */
}
.sg-history__item--right .sg-history__connector {
  right: calc(50% - 0.5rem);
  flex-direction: row-reverse; /* dot on right, bridge goes left */
}
.sg-history__item--right .sg-history__bridge {
  transform-origin: right;
}
.sg-history__item--right .sg-history__year-wrap {
  grid-column: 2;
  justify-content: flex-start;
  padding-left: clamp(1.25rem, 5%, 4.5rem);
  transform: translateX(3.5rem);
  transition-delay: 0.28s; /* year animates last */
}
.sg-history__item--right .sg-history__year-label {
  text-align: left;
}

/* ============================================================
   Visible state — IntersectionObserver adds .is-visible
   ============================================================ */
.sg-history__item.is-visible .sg-history__year-wrap {
  opacity: 1;
  transform: translateX(0);
}
.sg-history__item.is-visible .sg-history__card {
  opacity: 1;
  transform: translateX(0);
}
.sg-history__item.is-visible .sg-history__dot {
  transform: scale(1);
}
.sg-history__item.is-visible .sg-history__bridge {
  transform: scaleX(1);
}


/* ============================================================
   Card body — thumbnail + text
   ============================================================ */
.sg-history__body {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sg-history__content {
  color: #ffffff;
  font-size: 1rem;
  /* font-weight: 500; */
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.sg-history__content p:first-child {
  margin-top: 0;
}
.sg-history__content p:last-child {
  margin-bottom: 0;
}
.sg-history__media {
  flex: 0 0 6.25rem;
}
.sg-history__media img {
  display: block;
  width: 6.25rem;
  height: 6.25rem;
  object-fit: cover;
  border-radius: 0.3125rem;
}
 .sg-history {
           padding: 7.5rem 0 5.625rem;
  }
/* ============================================================
   Mobile ≤ 47.999rem (767px) — single column, line on left
   ============================================================ */

@media (max-width: 1200px) {
.sg-history__body {
    align-items: flex-start;
}
.sg-history__item:nth-child(21) .sg-history__card,
.sg-history__item:nth-child(20) .sg-history__card,
.sg-history__item:nth-child(19) .sg-history__card,
.sg-history__item:nth-child(5) .sg-history__card,
.sg-history__item:nth-child(4) .sg-history__card,
.sg-history__item:nth-child(3) .sg-history__card,
.sg-history__item:nth-child(2) .sg-history__card
{
background: #FFFFFF1A;

}
}
@media (max-width: 1024px) {
 .sg-history {
           padding: 80px 0;
  }
  .sg-history__body {
    align-items: flex-start;
  }
}
@media (max-width: 990px) {
  .sg-history__item:nth-child(22) .sg-history__card {
    background: #FFFFFF1A;
}
  .sg-history__item:nth-child(2) .sg-history__card{
background: linear-gradient(0deg, rgba(35, 71, 155, 0.1), rgba(35, 71, 155, 0.1)),
linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));

  }
  .sg-history__layout {
    padding: 2.5rem 0;
  }

  .sg-history__line {
    left: 0.75rem;
    transform: none;
  }

  /* Switch to flex column */
  .sg-history__item {
    display: flex;
    flex-direction: column;
    padding-left: 2.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    width: 100%;
  }

  /* Connector: dot only, pinned to left line */
  .sg-history__connector,
  .sg-history__item--left .sg-history__connector,
  .sg-history__item--right .sg-history__connector {
    left: 0.25rem; /* line 0.75rem, dot 1rem → center = 0.25 + 0.5 = 0.75rem */
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row;
    transition-delay: 0.05s;
  }
  .sg-history__bridge,
  .sg-history__item--left .sg-history__bridge,
  .sg-history__item--right .sg-history__bridge {
    display: none;
  }

  /* Year wrap — reset to left-aligned, slide from left */
  .sg-history__year-wrap,
  .sg-history__item--left .sg-history__year-wrap,
  .sg-history__item--right .sg-history__year-wrap {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0.5rem;
    transform: translateX(1.5rem);
    transition-delay: 0s;
    order: 1;
  }
  .sg-history__item--right .sg-history__year-wrap {
    order: -1;
  }

  .sg-history__year-label,
  .sg-history__item--left .sg-history__year-label,
  .sg-history__item--right .sg-history__year-label {
    text-align: left;
    font-size: 1.65rem;
  }

  /* Card — full width, slide from left */
  .sg-history__card,
  .sg-history__item--left .sg-history__card,
  .sg-history__item--right .sg-history__card {
    width: 100%;
    margin: 0;
    transform: translateX(1.5rem);
    transition-delay: 0.15s;
    order: 2;
    grid-column: auto;
  }
  .sg-history__item--right .sg-history__card {
    order: 1;
  }

  /* Visible overrides */
  .sg-history__item.is-visible .sg-history__year-wrap {
    transform: translateX(0);
  }
  .sg-history__item.is-visible .sg-history__card {
    transform: translateX(0);
  }

  /* Card body — image stacks above text */
  .sg-history__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .sg-history__media {
    flex: 0 0 5rem;
  }
  .sg-history__media img {
    width: 5rem;
    height: 5rem;
  }
}
/* ============================================================
   Ultra-wide ≥ 128rem (2048px)
   ============================================================ */
@media (min-width: 128rem) {
 
  .sg-history__card {
    padding: 1.25rem;
  }
  .sg-history__item--left .sg-history__card,
  .sg-history__item--right .sg-history__card {
    width: min(36.25rem, calc(100% - 6.25rem));
  }
  .sg-history__year-label {
    font-size: clamp(2.3rem, 2.8vw, 3.2rem);
  }
}

/* ============================================================
   Reduced motion — skip transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sg-history__year-wrap,
  .sg-history__card,
  .sg-history__dot,
  .sg-history__bridge {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}