:root{
  --krijn-red:#ED1C24;

  /* Neutrals (warm) */
  --bg: #FAF9F7;          /* pagina-achtergrond */
  --surface: #FFFFFF;     /* kaarten */
  --nav: #ffffff;         /* navbar achtergrond */
  --border: rgba(29,27,27,.10);

  /* Text */
  --text: #1D1B1B;
  --muted: rgba(29,27,27,.70);

  /* Shadow */
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

body{
  background: var(--bg);
  color: var(--text);
  padding-top: 120px; /* ruimte voor fixed navbar */
}

/* jouw navbar CSS */
.navbar-container {
    margin-top: 0.4rem;
}
.navbar-custom {
    background: var(--nav);
    padding: 10px;
    border-radius: 15px;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}


.navbar-brand img {
    height: 30px;
}
.navbar-nav {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100%;
}
.nav-item .nav-link {
    color: #212529;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 10px;
    transition: background 0.3s ease-in-out;
}
.hero{
  background: linear-gradient(180deg, rgba(237,28,36,.06), rgba(237,28,36,0));
  border-radius: 24px;
}
.nav-item .nav-link.active {
    background: rgba(0, 0, 0, 0.04);
    color: #000000;
    border-radius: 10px;
    box-shadow: none;
    font-weight: 700;
}
.nav-item .nav-link.active::after {
    content: ".";
    color: #ED1C24;
}

@media (max-width: 991px) {
    .navbar-custom {
        width: 95%;
        padding: 10px;
    }
    .navbar-brand img {
        height: 30px;
    }
    .navbar-nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}


/*---HERO VIDEO---*/
.hero-video-bg {
  height: 450px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 3rem;
}

/* Pseudo-element voor video als achtergrond */
.hero-video-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: black;
  pointer-events: none;
}

.hero-video-bg::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  border-radius: 12px;
  pointer-events: none;
}

/* Echte video als background: positioneer als kind */
.hero-video-bg video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 12px;
  pointer-events: none;
}

.hero-overlay-content {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 20px;
  color: white;
}

.hero-overlay-content{
  max-width: 620px;
}

.hero-overlay-content h1{
  font-weight: 800;
}

.hero-overlay-content p{
  color: rgba(255,255,255,.82);
}

.card-soft{
  transition: transform .15s ease, box-shadow .15s ease;
}

a .card-soft:hover{
  transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hero-video-bg {
        height: 250px;
    }
}
/* END HERO*/


/* bestaande helpers */
.card-soft{
  background: var(--surface);
  border-radius: 15px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.hero{
  background: var(--surface); /* gewoon wit */
  border-radius: 10px;
}

.badge-soft{
  background:rgba(237,28,36,.10);
  color:var(--krijn-dark);
  border:1px solid rgba(237,28,36,.20);
}

/*Button's*/
.btn-krijn{
  background: #1D1B1B !important;
  border-color: #1D1B1B !important;
  color: #fff !important;
  border-radius: 14px;
  padding: .55rem .9rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.btn-krijn:hover{ filter:brightness(.95); }

.btn-krijn-ghost{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 14px;
  padding: .55rem .9rem;
}
.btn-krijn-ghost:hover{
  background: rgba(0,0,0,.03) !important;
}

/*END-button's*/

/*-Links-*/
a{ color: var(--text); }
a:hover{ color: var(--text); }

.badge-soft{
  background: rgba(0,0,0,.04);
  color: var(--text);
  border: 1px solid var(--border);
}
/*End links*/


/*SOCIAL MEDIA LINKS*/
.social-link {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--krijn-dark);
  border: 1px solid rgba(0,0,0,.08);
  transition: all .15s ease;
}

.social-link:hover {
  background: rgba(237,28,36,.08); /* krijn-rood, zacht */
  border-color: rgba(237,28,36,.25);
  color: var(--krijn-dark);
}

.social-link i {
  font-size: 1.2rem;
}
/*END SOCIAL MEDIA LINKS*/

.border-soft{
  border:1px solid rgba(0,0,0,.06);
}


/*FOOTER*/
/* Footer (Krijn) – warm, rustig, rood alleen als accent */
.footer-cstm{
  background: var(--nav);              /* #F3F1EE uit je palette */
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 15px;

  width: 90%;
  max-width: 1280px;
  margin: 24px auto 18px auto;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  text-align: left;
}

.footer-cstm p{
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.footer-left{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Juridische links */
.footer-links{
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-links a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.footer-links a:hover{
  color: var(--text);
}

.footer-sep{
  margin: 0 6px;
  opacity: .5;
}

/* Icons */
.footer-cstm .social-icons{
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-cstm .social-icons a{
  color: var(--text);
  opacity: .80;
  font-size: 1.35rem;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}

.footer-cstm .social-icons a:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px){
  .footer-cstm{
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
}
@media (max-width: 768px){
  .footer-left{
    align-items: center;
  }

  .footer-links{
    text-align: center;
  }
}

/*END FOOTER*/