.journey{
height:100vh;
overflow:hidden;
position:relative;
color:#fff;
}

.header{
    position:absolute;
    top:60px;
    width:100%;
    z-index:999;
}

.timeline-track{
    display:flex;
    align-items:center;
    padding-top:200px; /* instead of margin */
}


.timeline-track{
    display:flex;
    align-items:center;
    height:calc(100vh - 220px);
    margin-top:0px;

    padding-left:35vw;
    padding-right:50vw; /* important */
}

.panel{
    min-width:380px;
    max-width:380px;
height:430px;
margin-right:120px;
background:#fff;
color:#111;
border-radius:24px;
padding:40px;
position:relative;
box-shadow:
    0 8px 20px rgba(15,23,42,.05),
    0 25px 45px rgba(15,23,42,.08),
    0 50px 80px rgba(15,23,42,.12),
    0 0 0 1px rgba(255,255,255,.6);

    transition:all .4s ease;
}
.panel:hover{
    transform:translateY(-10px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.12),
        0 35px 80px rgba(15,23,42,.18);
}
.panel h4{
	padding-top: 20px;
}
.year{
    position:absolute;
    top:0px;
    left:0px;

    background:#d71920;
    color:#fff;

    padding:8px 18px;
    border-radius:30px;

    font-size:14px;
    font-weight:600;
}

.panel h3{
font-size:32px;
margin-bottom:15px;
color:#173A6A;
}

.panel p{
color:#000;
}

.progress-line{
position:absolute;
top:50%;
left:0;
height:4px;
background:rgba(255,255,255,.15);
width:100%;
}

.progress-fill{
position:absolute;
top:50%;
left:0;
height:4px;
background:#d71920;
width:0%;
}

.dot{
position:absolute;
top:calc(50% - 10px);
width:20px;
height:20px;
border-radius:50%;
background:#fff;
}

.panel.active{
transform:scale(1.08);
}

.bg-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size:40px 40px;
}

@media(max-width:768px){

.header h2{
font-size:34px;
}

.panel{
min-width:320px;
height:auto;
padding:25px;
margin-right:50px;
}

.timeline-track{
padding-left:10vw;
padding-right:10vw;
}

}