/* =================================
   BASE
================================= */
:root{
     --mussan-primary:#1a435a;
     --mussan-primaryhover:#18394d;
     --mussan-black:#111111;
     --mussan-grey:#f5f6f7;
     --brand-accent: #2a90b8;
    /* ocean teal */
     --brand-accent-press: #237a9a;
    /* iets donkerder voor hover/active */
     --on-accent: #ffffff;
    /* section diensten moest wegens undefined vars, had geen zin om aan te passen. */
     --Zwartekleur3:#ffffff;
     --purpleblue:#1a435a;
}

 *{
    box-sizing:border-box
}
 html,body{
    height:100%
}
 body{
     background:#fff;
     font-family:'Montserrat',sans-serif;
     font-weight:400;
     color:#222;
     line-height:1.7;
     margin:0;
}
 h1,h2,h3,h4{
     font-family: 'El Messiri', sans-serif;
     font-weight:700;
     color:var(--mussan-primary);
     letter-spacing:.5px;
     line-height:1.2;
     margin:0 0 .75em;
}
h5,h6 {
     font-family:'Montserrat',sans-serif !important;
}
.footer-title{
  font-family: 'Montserrat',sans-serif !important;
}
.process-compact h3 {
    font-family: 'Montserrat', sans-serif !important;
}
 .container{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px
}
 .section{
    padding:80px 0
}


/*=======================*/
/*       BUTTONS         */
/*=======================*/

 .btn-cta-primary{
     background: var(--mussan-primary);
     color: #fff;
     border-radius: 8px;
     padding: 12px 16px;
     font-weight: 800;
     text-decoration: none;
     display:inline-flex;
     align-items:center;
     gap:8px;
     border: 1px solid rgba(0,0,0,.0);
     box-shadow: 0 12px 28px rgba(26,67,90,.22);
     transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
 .btn-cta-primary:hover{
     filter: saturate(1.02) brightness(1.02);
     color: white;
     background-color: var(--mussan-primaryhover);
}
 .btn-cta-primary:active{
     transform: translateY(0);
     box-shadow: 0 8px 18px rgba(26,67,90,.20);
}
 .btn-cta-ghost{
     border:1px solid var(--mussan-primary);
     color: var(--mussan-primary);
     border-radius: 8px;
     padding: 12px 16px;
     text-decoration:none;
     display:inline-flex;
     align-items:center;
     gap:8px;
     background: transparent;
     transition: background .2s ease, color .2s ease, transform .12s ease;
}
 .btn-cta-ghost:hover{
     background: rgba(26,67,90,.06);
     border-color: rgba(26,67,90,.06);
}
/* --- Knop "Bekijk alle projecten" --- */
 .btn-view-all2{
     display:inline-flex;
     align-items:center;
     gap:10px;
     padding:12px 16px;
     border-radius:10px;
     border:1px solid rgba(26,67,90,.25);
     color: var(--mussan-primary);
     background:#fff;
     text-decoration:none;
     font-weight:800;
     box-shadow:0 6px 16px rgba(0,0,0,.06);
}
 .btn-view-all2:hover{
     background: var(--mussan-grey);
}
 .btn{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:.5rem;
     padding:12px 18px;
     border-radius:10px;
     border-radius: 6px !important;
     font-weight:700;
     text-decoration:none;
     transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
 .btn-primary{
     background:var(--mussan-primary);
     border-color: var(--mussan-primary);
     color:#fff;
     box-shadow:0 12px 28px rgba(26,67,90,.25);
}
 .btn-primary:hover{
     background-color: var(--mussan-primaryhover);
     border-color: var(--mussan-primaryhover);
}
 .btn-primary:active{
     background-color: var(--mussan-primaryhover) !important;
     border-color: var(--mussan-primaryhover) !important;
}
 .btn-ghost{
     background:rgba(255,255,255,.14);
     border:1px solid rgba(255,255,255,.5);
     border-radius: 6px;
     color:#fff;
}

/* =========================
   BUTTONS (gecentraliseerd)
   Gebruikt variabelen:
   --mussan-primary, --mussan-primaryhover, --mussan-grey
========================= */

/* Basis knop */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* Variants */
.btn-primary{
  background: var(--mussan-primary);
  border-color: var(--mussan-primary);
  border-radius: 6px;
  color:#fff;
  box-shadow: 0 12px 28px rgba(26,67,90,.25);
}
.btn-primary:hover{
  background-color: var(--mussan-primaryhover);
  border-color: var(--mussan-primaryhover);
}

.btn-ghost{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 6px;
  color:#fff;
}

/* CTA-link in service cards */
.card-cta{
  display:inline-flex;
  align-items:center;
  font-weight:700;
  text-decoration:none;
  color: var(--mussan-primary);
}
.card-cta:hover{ text-decoration: underline; }

/* Portfolio “Bekijk alles” (service2) */
.btn-view-all2{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px;
  border:1px solid rgba(26,67,90,.25);
  color: var(--mussan-primary); background:#fff; text-decoration:none; font-weight:800;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.btn-view-all2:hover{ background: var(--mussan-grey); }

/* Footer accent knop (optioneel) */
.footer .btn-accent{
  background: var(--brand-accent);
  color: #123e55;
}
/*=======================*/
/*       BUTTONS         */
/*         END           */
/*=======================*/