/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:transparent;

}

/* ---------- Timeline ---------- */

.timeline-container{

    position:relative;

    width:100%;

    padding:20px 70px 40px;

    background: transparent;

}

.timeline-window{

    overflow-x:auto;
    overflow-y:hidden;
    padding:0 120px;
    scroll-behavior:smooth;

}

.timeline-window::-webkit-scrollbar{

    height:8px;

}

.timeline-window::-webkit-scrollbar-thumb{

    background:#cccccc;
    border-radius:10px;

}

#timeline{

    display:flex;

    gap:90px;

    align-items:stretch;

    position:relative;

    width:max-content;

    padding:180px 80px;

}

#timeline::before{

    content:"";

    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:4px;

    background:#7d7d7d;

    transform:translateY(-50%);

}
/* ---------- Events ---------- */

.event{

    width:280px;

    height:600px;

    flex-shrink:0;

    position:relative;

}

/* Kaart */

.card{

    min-width:240px;

    max-width:340px;

    width:max-content;

    min-height:170px;

    background:#ffffff;

    border-radius:16px;

    padding:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.card h3{

    color:#EB2127;

    margin-bottom:15px;

    font-size:28px;

    margin-bottom:12px;

    text-align:center;

}

.card p{

    color:#555;

    font-size:15px;

    line-height:1.6;

    text-align:center;

}

/* Pyltjies */

.arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    font-size:26px;

    cursor:pointer;

    box-shadow:0 3px 12px rgba(0,0,0,.18);

    z-index:100;

}

#prev{

    left:20px;

}

#next{

    right:20px;

}

.arrow:hover{

    color:#EB2127;

}
.timeline-image{

    width:100%;

    height:140px;

    object-fit:contain;

    margin-top:18px;

    display:block;

}
.dot{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%, -50%);

    width:24px;

    height:24px;

    border-radius:50%;

    background:#EB2127;

    z-index:20;

}

.connector{

    position:absolute;

    left:50%;

    width:4px;

    background:#EB2127;

    transform:translateX(-50%);

}

.event.top .connector{

    top:calc(50% - 170px);

    height:170px;

}

.event.bottom .connector{

    top:50%;

    height:170px;

}

/* ===== Zig-Zag ===== */

.event .card{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

}

.event.top .card{

    bottom:calc(50% + 170px);

}

.event.bottom .card{

    top:calc(50% + 170px);

}

.card p{

    word-wrap:break-word;

    overflow-wrap:break-word;

}
/* ==========================
   MOBILE TIMELINE
========================== */

@media (max-width: 768px) {

.timeline-container{
    padding:10px 0 20px;
}

.timeline-window{
    padding:0;
    min-height:auto;
}

#timeline{
    gap:20px;
    padding:100px 0;
}

.event{
    width:200px;
    height:480px;
}

.card{
    min-width:200px;
    max-width:200px;
    width:200px;
    padding:15px;
}

.card h3{
    font-size:22px;
}

.card p{
    font-size:14px;
}

.timeline-image{
    height:110px;
}

.event.top .connector,
.event.bottom .connector{
    height:120px;
}

.event.top .card{
    bottom:calc(50% + 120px);
}

.event.bottom .card{
    top:calc(50% + 120px);
}

.arrow{
    width:42px;
    height:42px;
    font-size:22px;
}

#prev{
    left:5px;
}

#next{
    right:5px;
}

}