/* ===========================
   FILM PATHWAY
=========================== */

.film-pathway-section{

    background:
    radial-gradient(circle at 50% 25%,rgba(255,200,0,.08),transparent 34%),
    linear-gradient(to bottom,#090909,#050505);

    overflow:hidden;

}

.film-pathway-header{

    max-width:850px;
    margin:auto;
    text-align:center;
    margin-bottom:90px;

}

.film-pathway-header h2{

    font-family:"Playfair Display",serif;
    font-size:clamp(48px,6vw,82px);
    margin:25px 0;

}

.film-pathway-header h2::first-line{

    color:var(--primary);

}

.film-pathway-header p{

    max-width:720px;
    margin:auto;
    color:rgba(255,255,255,.72);
    line-height:1.8;

}

/* TIMELINE */

.film-pathway{

    position:relative;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:30px;

    align-items:start;

}

.timeline-line{

    position:absolute;

    top:65px;

    left:8%;

    width:84%;

    height:4px;

    background:linear-gradient(
        to right,
        var(--primary),
        rgba(255,200,0,.18)
    );

    z-index:0;

}

/* STEP */

.timeline-step{

    position:relative;

    z-index:2;

    text-align:center;

}

.timeline-icon{

    width:130px;
    height:130px;

    margin:auto;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#141414;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:var(--shadow);

    transition:.35s;

}

.timeline-step.active .timeline-icon{

    background:linear-gradient(145deg,#ffd54a,#f5be18);

}

.timeline-icon i{

    font-size:46px;

    color:var(--primary);

}

.timeline-step.active .timeline-icon i{

    color:#111;

}

.timeline-step h3{

    margin-top:30px;
    margin-bottom:15px;

    font-size:28px;

}

.timeline-step p{

    color:rgba(255,255,255,.68);

    line-height:1.8;

    max-width:210px;

    margin:auto;

}

/* hover */

.timeline-step:hover .timeline-icon{

    transform:translateY(-10px);

    border-color:rgba(255,200,0,.35);

    box-shadow:
    0 18px 45px rgba(255,200,0,.15);

}

/* MOBILE */

@media(max-width:1100px){

.film-pathway{

grid-template-columns:1fr;

gap:70px;

}

.timeline-line{

display:none;

}

.timeline-step{

display:grid;

grid-template-columns:130px 1fr;

gap:30px;

text-align:left;
align-items:center;

}

.timeline-step h3{

margin:0 0 12px;

}

.timeline-step p{

margin:0;
max-width:none;

}

}

@media(max-width:650px){

.timeline-step{

grid-template-columns:1fr;

text-align:center;

}

}