.milestone-section {
    padding: 60px 5% 80px;
    background: #f3f3f3;
}

/* -------- Year nav outer: aligns timeline with content area -------- */
.milestone-nav-outer {
    width: 100%;
    overflow: visible;
    /*
     * Padding = arrow button width (img 24px + padding 2x14px = 52px)
     * This makes the timeline line start/end exactly where the content does.
     */
    padding: 0 52px;
    box-sizing: border-box;
}

/*
 * Fixed-height nav track.
 * The height = label area (top) + dot area (bottom).
 * Setting a fixed height prevents layout jumping when the label rises.
 */
.milestone-nav {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 80px;
    /* Subtle thin line */
    border-bottom: 2px solid #aaa;
    overflow: visible;
    box-sizing: border-box;
}

/* -------- Each year tab -------- */
.milestone-year-tab {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    overflow: visible;
    /* Keep the dot at the bottom of the track */
    justify-content: flex-end;
}

/*
 * Year label: absolute so it NEVER affects layout height.
 * Sits at a fixed vertical position inside the track.
 */
.milestone-year-label {
    position: absolute;
    bottom: 22px;              /* slightly higher above bigger dot */
    left: 50%;
    transform: translateX(-50%) translateY(0) scale(1);
    font-size: 1.1rem;         /* inactive: 18px-ish */
    font-weight: 500;
    color: #555;
    white-space: nowrap;
    transition: color 0.4s ease-out,
                font-weight 0.4s ease-out,
                transform 0.4s ease-out,
                font-size 0.4s ease-out;
    transform-origin: center bottom;
    will-change: transform;
}

/* Inactive dot: 14px */
.milestone-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #999;
    position: absolute;
    bottom: -8px;              /* centred on the 5px border line */
    transition: width 0.4s ease-out,
                height 0.4s ease-out,
                bottom 0.4s ease-out,
                background 0.4s ease-out,
                box-shadow 0.4s ease-out;
    z-index: 2;
    flex-shrink: 0;
}

/* -------- ACTIVE state -------- */
.milestone-year-tab.active .milestone-year-label {
    color: #096CB6;
    font-weight: 800;
    font-size: 1.5rem;         /* active: 24px */
    transform: translateX(-50%) translateY(-24px) scale(1);
}
.milestone-year-tab.active .milestone-dot {
    background: #096CB6;
    width: 24px;               /* active dot: 24px */
    height: 24px;
    bottom: -13px;             /* keep centred on thicker line */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* -------- Content body: arrows on sides -------- */
.milestone-body {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 36px;
    padding: 0 0;
}

/* Image-based arrow */
.milestone-arrow {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    opacity: 0.45;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
}
.milestone-arrow img {
    width: 34px;               /* scaled up from 24px */
    height: auto;
    display: block;
}
/* arrow_black.png points RIGHT by default */
.milestone-arrow.arrow-prev img {
    transform: scaleX(-1);     /* flip LEFT arrow so it points left */
}
/* Right arrow stays as-is (already points right) */
.milestone-arrow:hover { opacity: 1; }

/* -------- Content area -------- */
.milestone-content-area {
    flex: 1;
    position: relative;
    /* Fixed min-height so the area doesn't jump on text switch */
    min-height: 220px;
}

/*
 * Panels: use opacity + visibility instead of display:none.
 * This keeps the container height stable at all times.
 * All panels stack atop each other; only the active one is visible.
 */
.milestone-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
    pointer-events: none;
}
.milestone-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;        /* active panel takes up space for height */
}

/* Content row: centered, image left, text right */
.milestone-content-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    width: 100%;
}

.milestone-img-box {
    flex-shrink: 0;
    width: 400px;              /* +23% from 325px */
    height: 270px;
    border-radius: 8px;
    background: #dde4ea;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 0.8rem;
}
.milestone-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.milestone-text-box { 
    padding-left: 5%;
    flex: 1; }

.milestone-entry { margin-bottom: 20px; }
.milestone-entry-title {
    font-size: 1.3rem;         /* ~21px */
    font-weight: 700;
    color: #0e5fa3;
    margin-bottom: 6px;
}
.milestone-entry-desc {
    font-size: 1.05rem;        /* ~17px */
    color: #444;
    line-height: 1.7;
    margin: 0;
}

/* -------- Responsive -------- */
@media (max-width: 767px) {
    .milestone-content-row { flex-direction: column; gap: 16px; }
    .milestone-img-box { width: 100%; height: 180px; }
    .milestone-arrow img { width: 18px; }
    .milestone-year-tab { min-width: 52px; }
}