/* Combined stylesheet for home.html + project.html
   Merged inline styles from both files into one central file.
*/

:root{
  --bg:#0b0d12;
  --card:#111520;
  --muted:#788199;
  --fg:#e6e9f2;
  --accent:#7c5cff;
  --accent-2:#33d1b1;
  --ring: 0 0 0 2px rgba(124,92,255,.6);
  --radius: 10px;
  --radius-lg: 18px;
  --gap: 22px;
  --surface: #0e1423;
  --border: #1a2340;
  --shadow-lg: 0 14px 34px rgba(0,0,0,.35);
  --glass: rgba(255,255,255,0.03);
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;                /* ensure body at least viewport high */
  background:radial-gradient(1200px 600px at 20% -10%,#12172a 0%,#0b0d12 60%),
              radial-gradient(900px 500px at 120% 10%,#11182a 0%,#0b0d12 50%);
  background-repeat:no-repeat;
  background-attachment:fixed;     /* keep gradient consistent over full page */
  background-size:cover;          /* cover the whole visible area */
  color:var(--fg);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
      height: max-content;
}
a{color:var(--fg)} a:hover{opacity:.9}

/* Container */
.container{
  max-width:1200px;
  margin:auto;
  padding: clamp(16px,4vw,32px);
}

/* Nav (shared with home + project) */
.nav{
  background:var(--accent);
  position:sticky;
  top:10px;
  z-index:50;
  width: calc(100% - 10%);
  margin:auto;
  border-radius:25px;
  padding: 0px 5%;
  overflow: hidden;
}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.navlinks{display:none;gap:20px}
#werk-navlinks{
  display: flex;
}
.navlinks a{color:#fff;padding:8px 8px;border-radius:8px; text-decoration: none;}
.navlinks a:hover{background:var(--bg);color:#fff}
.nav .home a{text-decoration: none;}
.home{padding:8px 12px}
.cta{background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;display:inline-block;text-decoration:none}

/* Hero (home) */
.hero {
  position: relative;
  height: fit-content; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff; /* Zorg dat tekst goed zichtbaar is op donkere achtergrond */
  overflow: hidden; /* Belangrijk voor animaties en achtergrond */
  padding: 20px;
  box-sizing: border-box;
}

.hero > * { /* Alles in hero behalve de achtergrond */
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 3.5rem; /* Groter maken */
  line-height: 1.2;
  margin-bottom: 20px;
  max-width: 900px;
  color: var(--accent-color); /* Gebruik je accentkleur */
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.5); /* Lichte gloed */
}

.hero p {
  font-size: 1.3rem;
  max-width: 700px;
  margin-bottom: 30px;
  color: #e0e0e0;
}

.hero .meta {
  font-size: 1rem;
  max-width: 500px;
  margin-bottom: 40px;
  color: var(--text-dim); /* Gedempte tekstkleur */
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 20px;
  border-radius: 50px; /* Pill-vorm */
  backdrop-filter: blur(5px); /* Subtiel blur-effect achter de tekst */
  background: rgba(255,255,255,0.05);
  margin-left: auto;
    margin-right: auto;
}

.hero .cta {
  display: inline-block;
  background: var(--accent);
  color: var(--fg);
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 138, 255, 0.6); /* Dikke gloed */
}

.hero .cta:hover {
  background: var(--accent); /* Wisselen naar de andere accentkleur on hover */
  box-shadow: 0 0 20px rgba(187, 134, 252, 0.8);
  transform: translateY(-3px);
}

/* Media queries voor responsiviteit */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1.1rem;
  }
}
.section{margin:60px 0}
.panel{background:linear-gradient(180deg,#10182c 0%, #0c1221 100%);padding:20px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));padding:18px}

/* Cards & gallery */
.card {
  display: flex;
  flex-direction: column;
  min-height: 100%; /* Zorgt dat alle kaarten in een rij even hoog zijn */
  
  /* Bestaande styles behouden */
  padding: 14px;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 120% at 0% 0%, rgba(124,92,255,.06), transparent 60%),
              linear-gradient(180deg,#0e1527,#0b101d);
  border: 1px solid var(--border);
}
/* Zorgt dat de content boven de knop alle extra ruimte opeet */
.card p, 
.card .description { 
  flex-grow: 1; 
  margin-bottom: 1.5rem;
}
.card .tags,
.card .cta-row,
.card div:last-child {
  margin-top: auto;
}
/* Optioneel: als je de knop specifiek wilt aanspreken */
.card .btn, 
.card a.cta {
  margin-top: auto; /* Extra veiligheid: duwt de knop altijd naar de bodem */
  align-self: flex-start; /* Voorkomt dat de knop over de hele breedte uitrekt */
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.40); border-color:#273459; cursor: pointer; }
.card img{
  width:100%; 
  height:auto;
  display:block;
  border-radius:10px;
  margin-bottom:10px
}

.card.fullwidth{order:2;grid-column:1 / -1}
.card.fullwidth iframe.banner{ width:970px; aspect-ratio:970/250; }

/* Tags & badges */
.tag{text-decoration: none; padding:4px 10px;border-radius:var(--radius);display:inline-flex;gap:8px;align-items:center;color:#c7d2f2;background:linear-gradient(180deg,#0e1424,#0a0f1d);border:1px solid var(--border)}
.tag:hover{background:rgba(124,92,255,.15);border-color:rgba(124,92,255,.25); border-radius: var(--radius-lg);}
.badge{font-size:11px;color:#b9c3de;background:#0b152c;border:1px solid var(--border);border-radius:999px;padding:4px 8px}

/* Controls / buttons */
.controls{display:flex;flex-wrap:wrap;gap:12px;padding:16px}
.control{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#0c1222;border:1px solid #1b2235;border-radius:12px}
select,button,input[type="checkbox"],input[type="radio"]{appearance:none;border:none;outline:none;background:transparent;color:var(--fg)}
select{padding:6px 8px;border:1px solid #1b2235;border-radius:10px;background:#0b1222}
button.btn{padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#12172a;cursor:pointer}
button.btn:focus{box-shadow:var(--ring)}
.btn{background: #121a33; border: 1px solid var(--border); border-radius: 12px; color:var(--fg); padding:10px 12px}
.btn:hover{ background:#172246; border-color:#2a3865; }
.btn:focus-visible{ outline:none; box-shadow: 0 0 0 2px rgba(124,92,255,.45); }

/* Modal / mock */
dialog{border:0;border-radius:16px;background:#0b0f1c;color:var(--fg);width:min(1100px,95vw);padding:0;overflow:hidden}
dialog::backdrop{background:rgba(0,0,0,.65)}
.mock{display:grid;grid-template-columns:320px 1fr;gap:20px;padding:20px}
.mock aside{width:320px}
.mock main{background:#0c111e;border:1px solid #17203a;border-radius:12px;padding:18px;min-height:60vh}

/* Skin demo */
.skin-demo{position:relative;isolation:isolate;margin-top:18px}
.skin-frame{position:relative;border:1px solid #1b2235;overflow:hidden}
.skin-page{position:relative;background:#0d1120;min-height:520px;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
.skin-top{height:250px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #1b2235;width:min(1000px,100%);justify-self:center}
.skin-top iframe{border:0}

/* Skin layout slots */
.skin-content{display:grid;grid-template-columns: minmax(0,1fr) minmax(0,999px) minmax(0,1fr);gap:0}
.skin-left,.skin-right{position:relative}
.skin-slot{position:sticky;height:90vh;background:repeating-linear-gradient(45deg, rgba(124,92,255,.06) 0 12px, transparent 12px 24px)}
.skin-center{padding:18px 20px}
.skin-article{background:#0c111e;border:1px solid #182038;border-radius:12px;padding:18px;box-shadow:var(--shadow-lg)}

/* Metrics */
.metrics{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;margin-left:6px}
/* larger, clearer metric cards with improved hierarchy */
.metric{
  background:linear-gradient(180deg, rgba(124,92,255,0.03), rgba(0,0,0,0.02));
  padding:14px 18px;
  border-radius:12px;
  min-width:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,0.03);
  color:#e6f0ff;
  box-shadow:0 6px 18px rgba(2,6,23,0.45);
}
.metric h4{margin:0;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:0.02em}
.metric .v{font-size:20px;font-weight:800;margin-top:6px;color:#ffffff;line-height:1}
.metric small{display:block;color:var(--muted);font-size:12px;margin-top:6px}

/* Brands scroller (moved from home.html) */
.brands {
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 6px;
  margin-top:12px;
  border-radius:12px;
  -ms-overflow-style:none;
  scrollbar-width:none;
  white-space:nowrap;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  background:transparent;
}
.brands::-webkit-scrollbar{ display:none; }
.brands-track{ display:inline-flex; gap:16px; align-items:center; }
.brand-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:140px;
  height:140px;
  flex:0 0 auto;
  box-sizing:border-box;
  padding:10px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  overflow:visible;
}
.brand-item::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72%;
  height:72%;
  border-radius:10px;
  background:rgba(255,255,255,0.96);
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
  z-index:0;
  transition:opacity .18s ease, transform .18s ease;
  opacity:1;
}
.brand-item.no-pill::before{ opacity:0; transform:translate(-50%,-50%) scale(.9); pointer-events:none; }
.brand-item a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.brand-item:hover{ transform:translateY(-4px); box-shadow: 0 8px 20px rgba(2,6,23,0.5); }
.brand-item img{
  max-width:70%;
  max-height:70%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
  transition:filter .12s ease, opacity .12s ease, transform .12s ease;
  justify-self: center;
  position:relative;
  z-index:1;
}
@media (max-width:900px){ .brand-item{width:72px;height:72px;padding:8px} .brand-item img{max-width:68%;max-height:68%} }
@media (max-width:480px){ .brand-item{width:60px;height:60px;padding:6px} .brand-item img{max-width:64%;max-height:64%} .brands-track{gap:10px} }

/* Project detail styles (moved from project.html) */
.wrap{max-width:1200px;margin:28px auto;padding:20px}
.top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.back{color:var(--muted);font-size:14px;text-decoration:none}
.title{font-size:26px;font-weight:700;margin:0}
.meta-row{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.badge{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:6px 12px;border-radius:999px;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.hero-large{margin-top:18px;border-radius:12px;overflow:hidden;border:1px solid var(--glass);box-shadow:0 12px 40px rgba(2,6,23,0.6)}
.hero-img{display:block;width:100%;height:620px;object-fit:cover;background:#071018}
.hero-meta{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
.hero-meta .left{display:flex;flex-direction:column}
.hero-meta .kicker{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
.metrics{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;margin-left:6px}
.metric{background:linear-gradient(180deg, rgba(124,92,255,0.03), rgba(0,0,0,0.02));padding:14px 18px;border-radius:12px;min-width:140px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:1px solid rgba(255,255,255,0.03);color:#e6f0ff;box-shadow:0 6px 18px rgba(2,6,23,0.45)}
.metric h4{margin:0;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:0.02em}
.metric .v{font-size:20px;font-weight:800;margin-top:6px;color:#ffffff;line-height:1}
.metric small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.content-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;margin-top:20px}
.summary{font-size:15px;color:#d8e9ff;line-height:1.5}
.case{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.case h3{margin:0;font-size:15px;color:var(--muted)}
.list{margin:0;padding-left:18px}
.tech{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cta-row{display:flex;gap:8px;margin-top:12px}
.screenshot-lg{width:100%;height:calc(560px - 40px);object-fit:contain;border-radius:8px;background:#071018;display:block}
.meta-small{font-size:13px;color:var(--muted);margin-top:8px}

/* Fix: restore nicer About / Contact layout + input styles */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:20px;
  align-items:start;
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}


/* Subtle panel tweak for better contrast and breathing room */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  padding:20px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
}
.about-section{
    display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
}

/* Improve About text column spacing */
.mock main, .panel p, .panel .meta, .timeline-item{
  font-size:15px;
  color:#d6e6ff;
}

/* Small tweak: ensure footer / wrap spacing consistent */
.wrap{padding:28px 20px}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.85);z-index:9999;padding:28px}
.lightbox img{max-width:98%;max-height:98%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.7)}
.lightbox.show{display:flex}

/* Small responsive tweaks */
@media (max-width:980px){
  .content-grid{grid-template-columns:1fr}
  .hero-img{height:340px}
  .hero-large{margin-top:12px}
  .container{padding:14px}
}

/* Accessibility & motion */
:focus-visible{ outline: none; box-shadow: 0 0 0 2px rgba(124,92,255,.6); }
@media (prefers-reduced-motion: no-preference){
  dialog[open]{ animation: pop .16s ease-out; }
  @keyframes pop{ from { transform: scale(.98); opacity: 0 } to   { transform: scale(1);   opacity: 1 } }
}

/* Footer */
.footer{
  text-align:center;
  padding:18px 20px;
  color:var(--fg);
  font-size:13px;
  border-top:1px solid rgba(255,255,255,0.03);
  background:var(--accent);
  margin-top:36px;
}
.footer a{
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
}
.footer a:hover{
  background-color: var(--bg);
  color: var(--accent);
}

/* Optional: make footer content use the same container width when present */
.footer .container{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
/* small-screen tweak */
@media (max-width:480px){
  .footer{font-size:12px;padding:14px 12px}
  .footer .container{flex-direction:column;gap:6px}
}


.timeline {
  position: relative;
  padding-left: 30px;
  margin: 20px 0;
}

.timeline-item {
  position: relative;
  margin-bottom: 25px;
  padding: 15px;
  background: var(--card);
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

/* De 'dot' op de lijn */
.timeline-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  z-index: 1;
}

.timeline-item:hover {
  background: var(--border);
  cursor: pointer;
  border-color: var(--accent);
}

.timeline-item strong {
  display: block;
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: 5px;
}

.timeline-item .tag {
  display: inline-block;
  background: var(--accent);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Skills tags styling */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.skills .tag {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: 0.3s;
}

.skills .tag:hover {
  background: var(--accent);
  color: #000;
}
/* De Grid-layout */
.cv-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* Werk krijgt iets meer ruimte dan opleiding */
  gap: 40px;
  align-items: start;
}

/* Specifieke kleur voor Werkervaring tags (bijv. Groen/Cyaan) */
.work-section .tag {
  background: #00d4ff;
  color: #000;
}

/* Specifieke kleur voor Opleiding tags (bijv. Paars/Lila) */
.edu-section .tag {
  background: #bb86fc;
  color: #000;
}

/* Mobiele weergave */
@media (max-width: 850px) {
  .cv-grid {
    grid-template-columns: 1fr;
  }
}
/* De hoofdlijn */
.single-timeline {
  position: relative;
  padding-left: 30px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  margin-left: 10px;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.3s ease;
}

/* Bolletje op de lijn */
.timeline-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent); /* Default wit */
  z-index: 2;
}

/* Hover effect */
.timeline-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.timeline-item strong {
  display: block;
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 5px 0;
}
/* --- LINKEDIN STYLE TIMELINE --- */

.timeline-group{
  position:relative;
  margin-bottom:35px;
  padding-left:20px;
}

/* Bedrijfsnaam */
.timeline-company{
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:12px;
  color:var(--fg);
}

/* Rollen binnen bedrijf */
.timeline-role{
  position:relative;
  padding:12px 16px;
  margin-bottom:10px;
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  transition:0.25s ease;
}

.timeline-role:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--accent);
}

/* bolletje op lijn */
.timeline-role::before{
  content:"";
  position:absolute;
  left:-27px;
  top:18px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}

/* datum */
.timeline-role span{
  display:block;
  font-size:0.8rem;
  opacity:.7;
  margin-top:4px;
}
.type-work .timeline-role::before{
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}

.type-edu .timeline-role::before{
  background:var(--accent-2);
  box-shadow:0 0 8px var(--accent-2);
}
@keyframes blink { 50% { opacity: 0; } }
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Zorg dat partikels niet buiten de hero vallen */
}
#hero-preview{
  min-height: auto;
}

/* Alle directe kinderen van hero die tekst bevatten moeten naar voren */
.hero h1, 
.hero p, 
.hero .meta, 
.hero .cta {
  position: relative; /* Z-index werkt alleen op gepositioneerde elementen */
  z-index: 2; /* Hoger dan de background */
}
/* HERO PORTFOLIO LAYOUT */

#heroHome{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap:60px;
  align-items:center;
  min-height:70vh;
  padding:40px 0;
}

#heroHome article:first-child{
  max-width:520px;
      margin: auto;
}

#heroHome article:last-child{
  display:flex;
  justify-content:center;
}

.fotoJurjen{
  width:100%;
  max-width:420px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
  object-fit:cover;
}
@media (max-width: 900px){

  #heroHome{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
  }

  #heroHome article:first-child{
    max-width:100%;
  }

  .fotoJurjen{
    max-width:300px;
  }

}
.campaign-text {
  max-width: 700px;
  margin: auto;
  line-height: 1.6;
}

.campaign-text h2 {
  margin-top: 0;
}

.campaign-text h3 {
  margin-top: 1.5rem;
}

.campaign-text ul {
  padding-left: 1.2rem;
}
/* --- Horizontal Scroller voor Projecten --- */
.horizontal-scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;          /* Maakt horizontaal scrollen mogelijk */
  padding: 18px 0;           /* Boven/onder padding, links/rechts laten we vrij voor overflow */
  margin: 0 18px;            /* Lijn uit met de rest van je layout */
  
  /* Smooth scrolling en snapping */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Voor soepel scrollen op iOS */
  
  /* Verberg scrollbars voor een strakke UI */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.horizontal-scroller::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}

/* Zorg dat de kaarten binnen de scroller een vaste breedte houden en niet krimpen */
.horizontal-scroller .card {
  flex: 0 0 clamp(260px, 40vw, 340px);         /* Vaste breedte van 340px, krimpt of groeit niet */
  scroll-snap-align: start;  /* Zorgt dat de kaart netjes links uitlijnt na het scrollen */
}

/* Voor kleinere mobiele schermen maken we de kaarten ietsje smaller zodat je hint dat er meer te scrollen is */
@media (max-width: 480px) {
  .horizontal-scroller .card {
    flex: 0 0 280px;
  }
}
@media (max-width:600px){

.timeline{
padding-left:15px;
}

.timeline-role{
padding:10px;
}

}