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

.journey-section{

    padding:20px;

    background:#FBF8F2;

    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(
        #C97824,
        #E0A052
    );

    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,
        #C97824,
        #A94F24
    );

    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(169,78,36,.18);

    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(169,78,36,.11);

}

.timeline-content h4{

    font-size:28px;

    margin-bottom:15px;

    color:#302C28;

}

.timeline-content p{

    color:#756E66;

    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;

}

}

/* Compact journey */
.journey-section{padding:72px 0;background:var(--section-bg);}
.timeline{margin:55px auto 0;max-width:1040px;}
.timeline::before{width:2px;background:var(--primary-color);}
.timeline-item{padding:16px 42px;}
.timeline-year{width:64px;height:64px;top:28px;background:var(--secondary-color);border:2px solid var(--primary-color);font-size:15px;box-shadow:0 8px 20px rgba(47,43,39,.12);}
.timeline-item:nth-child(odd) .timeline-year{right:-32px;}.timeline-item:nth-child(even) .timeline-year{left:-32px;}
.timeline-content{border-radius:15px;padding:26px;box-shadow:0 12px 30px rgba(47,43,39,.07);}
.timeline-content:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(47,43,39,.10);}
.timeline-content h4{font-size:22px;margin-bottom:10px;color:var(--secondary-color);}.timeline-content p{font-size:15px;line-height:1.7;}
@media(max-width:991px){.timeline{margin-top:40px;}.timeline::before{left:30px;}.timeline-item{padding-left:88px;padding-right:10px;margin-bottom:28px;}.timeline-year{left:-2px!important;right:auto!important;}}