/*=========================================================
                    OUR JOURNEY
=========================================================*/

.journey-section{

    padding:20px;

    background:#F8FAFC;

    position:relative;

    overflow:hidden;

}

/*==================================================
                TIMELINE
==================================================*/

.timeline{

    position:relative;

    max-width:1100px;

    margin:80px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:linear-gradient(
        #2563EB,
        #60A5FA
    );

    border-radius:20px;

}

/*==================================================
            TIMELINE ITEM
==================================================*/

.timeline-item{

    width:50%;

    padding:20px 50px;

    position:relative;

}

.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.timeline-item:nth-child(even){

    left:50%;

}

/*==================================================
            YEAR CIRCLE
==================================================*/

.timeline-year{

    position:absolute;

    top:35px;

    width:80px;

    height:80px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:18px;

    box-shadow:0 15px 40px rgba(37,99,235,.30);

    z-index:2;

}

.timeline-item:nth-child(odd) .timeline-year{

    right:-40px;

}

.timeline-item:nth-child(even) .timeline-year{

    left:-40px;

}

/*==================================================
                CARD
==================================================*/

.timeline-content{

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:0 20px 50px rgba(15,23,42,.08);

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 70px rgba(37,99,235,.15);

}

.timeline-content h4{

    font-size:28px;

    margin-bottom:15px;

    color:#0F172A;

}

.timeline-content p{

    color:#64748B;

    line-height:1.8;

    margin:0;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:991px){

.timeline::before{

    left:35px;

}

.timeline-item{

    width:100%;

    left:0!important;

    text-align:left!important;

    padding-left:110px;

    padding-right:15px;

    margin-bottom:40px;

}

.timeline-year{

    left:-5px!important;

    right:auto!important;

}

}

@media(max-width:576px){

.timeline-content{

    padding:25px;

}

.timeline-content h4{

    font-size:22px;

}

.timeline-year{

    width:65px;

    height:65px;

    font-size:15px;

}

}