/* ==========================================
   PROGRAMME JOURNEY
========================================== */

.journey-section{
    background:#EEF0F8;
    padding:100px 0;
}

.journey-section *{
    box-sizing:border-box;
}

.journey-section .container{
    max-width:1400px;
    margin:auto;
    padding:0 60px;
}

/* Section Heading */

.journey-section .section-head{
    text-align:center;
    max-width:760px;
    margin:0 auto 80px;
}

.journey-section .label{
    color:#F47B20;
    font-size:16px;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
    margin-bottom:15px;
}

.journey-section h2{
    color:#002B6B;
    font-size:44px;
    line-height:1.2;
    margin:0 0 20px;
}

.journey-section .section-head p{
    color:#5B6E91;
    font-size:17px;
    line-height:1.8;
    margin:0;
}

/* ==========================================
   Timeline
========================================== */

.timeline{

    display:flex;

    justify-content:space-between;

    position:relative;

    gap:20px;

}

.timeline::before{

    content:"";

    position:absolute;

    top:48px;

    left:7%;

    right:7%;

    height:4px;

    background:#F47B20;

    z-index:1;

}

/* Milestone */

.milestone{

    flex:1;

    position:relative;

    text-align:center;

    background:none;

    box-shadow:none;

    padding:0;

    z-index:2;

}

.milestone:hover{

    transform:none;

}

/* Circle */

.dot{

    width:100px;

    height:100px;

    margin:0 auto 28px;

    border-radius:50%;

    background:#ffffff;

    border:3px solid #F47B20;

    color:#F47B20;

    font-size:34px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}

/* First completed steps */

.milestone:nth-child(1) .dot,
.milestone:nth-child(2) .dot{

    border-color:#F47B20;

    color:#F47B20;

}

/* Remaining */

.milestone:nth-child(n+3) .dot{

    border-color:#D7E5F7;

    color:#005AAA;

}

.milestone h3{

    color:#002B6B;

    font-size:20px;

    line-height:1.35;

    margin-bottom:14px;

    min-height:56px;

}

.milestone time{

    display:block;

    color:#005AAA;

    font-weight:700;

    font-size:17px;

    margin-bottom:8px;

}

.milestone p{

    color:#5B6E91;

    font-size:15px;

    line-height:1.7;

    margin:0;

}

.journey-note{

    text-align:center;

    margin-top:60px;

    color:#6B7280;

    font-size:15px;

    font-style:italic;

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:1200px){

    .timeline{

        display:grid;

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

        gap:40px;

    }

    .timeline::before{

        display:none;

    }

}

@media(max-width:768px){

    .journey-section{

        padding:70px 0;

    }

    .journey-section .container{

        padding:0 24px;

    }

    .journey-section h2{

        font-size:34px;

    }

    .timeline{

        grid-template-columns:1fr;

    }

    .dot{

        width:80px;

        height:80px;

        font-size:28px;

    }

    .milestone h3{

        min-height:auto;

    }

}