/* wrapper */

.journey-wrap{
background:#000;
padding:80px 0;
color:#fff;
overflow:hidden;
}

/* heading */

.journey-heading{
text-align:center;
font-size:42px;
margin-bottom:40px;
color:#FFCE1B;
}

/* slider */

.journey-swiper{
height:420px;
}

.swiper-slide{
background-size:cover;
background-position:center;
border-radius:6px;
overflow:hidden;
position:relative;
transition:all .5s ease;
}

/* side slides effect */

.swiper-slide:not(.swiper-slide-active){
opacity:.4;
transform:scale(.9);
}

/* overlay */

.journey-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,.3),
rgba(0,0,0,.9)
);
}

/* content */

.journey-content{
position:absolute;
inset:0;

display:flex;
flex-direction:column; /* ⭐ important */
align-items:center;
justify-content:center;

text-align:center;
padding:30px;
}

.journey-content p{
font-size:22px;
max-width:800px;
line-height:1.6;
}

/* button */

.journey-btn{
display:inline-block;
margin-top:25px;
padding:10px 24px;

background:#FFCE1B;
color:#000;

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

text-decoration:none;
border-radius:4px;

transition:0.3s;
}

.journey-btn:hover{
background:#fff;
color:#000;
}

/* timeline */

.journey-timeline{
display:flex;
justify-content:space-between;
margin-top:40px;

position:relative;
padding:0 8%;
}

/* dotted line */

.journey-timeline:before{
content:"";
position:absolute;

left:8%;
right:8%;
top:50%;

border-bottom:1px dotted #777;
}

/* year */

.journey-timeline span{
position:relative;
font-size:14px;
cursor:pointer;
color:#FFCE1B;
}

/* dot */

.journey-timeline span:before{
content:"";
position:absolute;

top:-14px;
left:50%;

transform:translateX(-50%);

width:8px;
height:8px;

background:#FFCE1B;
border-radius:50%;
}

/* active */

.journey-timeline span.active{
font-weight:600;
}

.journey-timeline span.active:before{
background:#fff;
width:12px;
height:12px;
}

/* mobile */

@media(max-width:768px){

.journey-timeline{
overflow-x:auto;
gap:20px;
}

.journey-content p{
font-size:18px;
}

}