/* ======= Variables ======= */
/* :root {
  --brand-primary: #003120;
  --brand-secondary: #71B644;
  --brand-accent: #E7EDFF;
  --neutral-dark: #000;
  --neutral-light: #fff;
} */

/* ======= Timeline dot ======= */
.c-timeline__dot{
    background-color: #F6F6F6 !important;
    border: 1px solid var(--brand-primary) !important;
    border-radius: 50% !important;

    width: 32px !important;
    height: 32px !important;

    /* transform: translate(-50%, -50%) !important; */
    translate: -50% -50% !important;
    scale: 0.6 !important;
    
    transition: background-color 0.3s ease, scale 0.45s cubic-bezier(.21,.84,.5,1.37) !important;
}

.u-in-sight .c-timeline__dot{
    scale: 1 !important;
    background-color: var(--brand-primary) !important;
}

/* ======= Timeline row ======= */
.c-timeline__img, .c-timeline__content{
    opacity: 0.2 !important;
    transition: opacity 0.3s ease !important;
}

.u-in-sight .c-timeline__img, .u-in-sight .c-timeline__content{
    opacity: 1 !important;
}

/* ======= Timeline spine ======= */
.c-timeline__spine{
    top: 0;
    bottom: 0;
    width: 4px;
    translate: -50% 0;
    background: rgba(0, 49, 32, 0.3);  /* track */
    
    --progress: 0;
}

.c-timeline__spine::after{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand-primary) !important;        /* fill */
    transform-origin: top center;
    transform: scaleY(var(--progress));
    will-change: transform;
}

@media(max-width: 1024px){
    .c-timeline__spine{
        left: calc(10% + 12px) !important
    }
}

@media(max-width: 767px){
    .c-timeline__spine{
        left: calc(4% + 30px) !important
    }
}

@media(max-width: 576px){
    .c-timeline__spine{
        display: none !important;
    }
}

/* ======= Animation ======= */
@keyframes timeline-grow{
    from{ transform: scaleY(0); }
    to  { transform: scaleY(1); }
}