/* ==========================================
   LOVE STORY
========================================== */

#story{

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}

.timeline{

    position:relative;

    max-width:1000px;

    margin:80px auto 0;

}

/* Garis Tengah */

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:2px;

    height:100%;

    background:#D4AF37;

    transform:translateX(-50%);

}

/* Item */

.timeline-item{

    position:relative;

    width:50%;

    margin-bottom:70px;

}

/* Titik */

.timeline-item::before{

    content:"";

    position:absolute;

    top:30px;

    width:18px;

    height:18px;

    background:#D4AF37;

    border:5px solid white;

    border-radius:50%;

    box-shadow:0 0 0 4px rgba(212,175,55,.2);

    z-index:5;

}

/* Kiri */

.timeline-item.left{

    left:0;

    padding-right:70px;

    text-align:right;

}

.timeline-item.left::before{

    right:-9px;

}

/* Kanan */

.timeline-item.right{

    left:50%;

    padding-left:70px;

}

.timeline-item.right::before{

    left:-9px;

}

/* Card */

.timeline-content{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

}

.timeline-content span{

    display:inline-block;

    background:#D4AF37;

    color:white;

    padding:6px 18px;

    border-radius:50px;

    font-size:13px;

    margin-bottom:18px;

}

.timeline-content h4{

    font-size:26px;

    margin-bottom:15px;

    color:#222;

}

.timeline-content p{

    color:#666;

    line-height:30px;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.timeline::before{

left:20px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:60px!important;

padding-right:0!important;

text-align:left!important;

}

.timeline-item::before{

left:11px!important;

right:auto!important;

}

.timeline-content{

padding:25px;

}

}