main {
  padding-top: 0;
  text-align: center;
}

#theme-toggle {
  font-size: 22px;
}

.hero {
  background: linear-gradient(360deg, var(--background-hero) 12%, rgba(17, 99, 200, 1) 90%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  height: 90vh;
}

.hero h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
}

.buttondiensten {
  display: flex;
  align-self: center;
  justify-self: center;
}

/* Animaties */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

.delay-1 {
  animation-delay: 0.3s;
}

.delay-2 {
  animation-delay: 0.6s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Design tokens ===== */
:root{
  --muted: #5b6b88;
  --brand-2: #0b5bd3;    /* donkerder blauw */
  --ring: rgba(31,111,235,.25);
  --shadow: 0 10px 30px rgba(11,18,32,.08);
}

img {
  max-width:100%;
  display:block
}

h1,h2,h3 {
  line-height:1.2;
  margin:0 0 .5rem
}

p {
  margin:.25rem 0 0
}

.dion-sec-head {
  margin:0 0 28px
}

.dion-sec-head p {
  color:var(--muted)
}


/* ===== Cards / items ===== */
.dion-card, .dion-service, .dion-project, .contact-card{
  background:var(--card-background);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  width: 27vw;
  border:1px solid #e8eefc;
  transform:translateY(8px);
  opacity:0;
  animation: dion-fadeUp .8s ease forwards;
  transition: box-shadow .2s ease, transform .2s ease;
}

.contact-card a{
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
}


@media (max-width:768px){
  .dion-card, .dion-service, .dion-project, .contact-card {
    width: 85vw;
    align-self: center;
  } 
}

.dion-project-img {
  border-radius: var(--radius);
  margin-bottom: 12px;
  object-fit: cover;
}

  #projecten .project-container{
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden; /* verticale scroll blokkeren */
    scroll-behavior: auto;
    padding: 1rem 3rem;
    width: 100%;
    box-sizing: border-box;
    cursor: grab;
  }

    #diensten .diensten-container, #over-ons .over-ons-container {
    display: flex;
    gap: 24px;
    scroll-behavior: auto;
    width: 100%;
    box-sizing: border-box;
  }

  .diensten-text, .over-ons-text {
    margin-bottom: 16px;
  }

@media (max-width:768px){
  #projecten .project-container, #diensten .diensten-container, #over-ons .over-ons-container, #contact .contact-container {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  
}

  #projecten .project-container::-webkit-scrollbar {
    height: 8px;
  }
  #projecten .project-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 999px;
  }

.scroll-buttons {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

@media (max-width:768px){
  .scroll-buttons {
    display: none;
  } 
}

.dion-card:nth-child(1){animation-delay:.05s}
.dion-card:nth-child(2){animation-delay:.15s}
.dion-card:nth-child(3){animation-delay:.25s}

.dion-service:nth-child(1){animation-delay:.05s}
.dion-service:nth-child(2){animation-delay:.15s}
.dion-service:nth-child(3){animation-delay:.25s}

.dion-project:nth-child(1){animation-delay:.05s}
.dion-project:nth-child(2){animation-delay:.15s}
.dion-project:nth-child(3){animation-delay:.25s}

/* icons / thumbs */
.dion-icon {
  width:48px;height:48px;display:grid;place-items:center;
  border-radius:12px;background:linear-gradient(145deg,var(--bg-soft),#fff);
  margin-bottom:10px; font-size:22px;
  box-shadow:inset 0 0 0 1px #e7edff, 0 6px 16px rgba(31,111,235,.08);
}

.dion-service:hover, .dion-project:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(11,18,32,.12)
}

/* ===== Testimonial ===== */
.dion-testimonial{
  background:var(--card-background);
  border:1px solid #e8eefc;
  border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
  animation:dion-fadeUp .8s ease .1s forwards; opacity:0; transform:translateY(8px);
}

.stars {
  letter-spacing:.25rem;
  color:#ffb400;
  margin-bottom:8px
}

.dion-form label{display:flex;flex-direction:column;font-weight:600}
.dion-form label span{font-weight:600;margin-bottom:6px}
.dion-form input,
.dion-form textarea{
  border:1px solid #d9e4ff;background:#fff;border-radius:12px;
  padding:12px 14px;font:inherit;outline:none;
  transition:box-shadow .2s,border-color .2s, transform .15s ease;
}
.dion-form input:focus,
.dion-form textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 6px var(--ring);
}
.dion-full{grid-column:1/-1}
.dion-actions{display:flex;gap:12px;margin-top:6px}

@media (max-width:800px){
  .dion-form{grid-template-columns:1fr}
}

/* ===== Buttons ===== */
.dion-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem; padding:12px 18px; border-radius:999px; font-weight:700;
  color:#fff;background:linear-gradient(180deg,var(--brand),var(--brand-2));
  border:0; cursor:pointer; transition: transform .15s ease, filter .2s;
  box-shadow:0 10px 20px rgba(31,111,235,.25);
}
.dion-btn:hover{transform:translateY(-1px); filter:saturate(1.1)}
.dion-btn:active{transform:translateY(0)}
.dion-btn--ghost{
  color:var(--brand); background:transparent; border:1px solid rgba(31,111,235,.35);
  box-shadow:none;
}
.dion-btn--ghost:hover{background:rgba(31,111,235,.06)}
.dion-btn--secondary{
  background:linear-gradient(180deg,#23c55e,#16a34a);
  box-shadow:0 10px 20px rgba(34,197,94,.22);
}

/* ===== Animations ===== */
@keyframes dion-fadeUp{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes dion-shimmer{
  0%{transform:translateX(0) rotate(18deg)}
  100%{transform:translateX(-120%) rotate(18deg)}
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .dion-card,.dion-service,.dion-project,.dion-testimonial{animation:none;opacity:1;transform:none}
  .dion-thumb::after,.dion-shot::after{animation:none}
}


/* Contact sectie */
.contact-container {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px auto 0 auto; /* centreren */
  padding: 0 3rem;          /* ruimte aan de zijkant */
  max-width: 100%;
  box-sizing: border-box;
}

.contact-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-self: center;
}