:root {  
  --lichtgroen: #cce197;
  --donkergroen: #2F5D62;
  --roze: #e99874;
  --gebrokenwit: #FAF8F3;
  --donkergrijs: #2D2A26;
  --lichtlichtgroen: #E7F0CC;
}

.bg-roze {
    background-color: var(--roze);
}

.bg-lichtgroen {
    background-color: var(--lichtgroen);
}

.bg-donkergroen {
    background-color: var(--donkergroen);
}

.bg-gebrokenwit {
    background-color: var(--gebrokenwit);
}

.bg-zwart {
    background-color: var(--zwart);
}

.bg-lichtlichtgroen {
    background-color: var(--lichtlichtgroen);
}

.btn.btn-donkergroen {
  background-color: var(--donkergroen);
  color: var(--white);
}
.btn.btn-donkergroen:hover, .btn.btn-donkergroen:active {
  background-color: transparent;
  border-color: var(--donkergroen);
  color: var(--donkergroen);
}
.btn.btn-box-shadow.btn-donkergroen:hover, .btn.btn-box-shadow.btn-donkergroen:active {
  background: var(--donkergroen);
  color: var(--white);
}

.btn.btn-lichtgroen {
  background-color: var(--lichtgroen);
  color: var(--donkergrijs);
}
.btn.btn-lichtgroen:hover, .btn.btn-lichtgroen:active {
  background-color: transparent;
  border-color: var(--lichtgroen);
  color: var(--lichtgroen);
}

.btn.btn-box-shadow.btn-lichtgroen:hover, .btn.btn-box-shadow.btn-lichtgroen:active {
  background: var(--lichtgroen);
  color: var(--donkergrijs);
}



.btn.btn-lichtlichtgroen {
  background-color: var(--lichtlichtgroen);
  color: var(--donkergrijs);
}
.btn.btn-lichtlichtgroen:hover, .btn.btn-lichtlichtgroen:active {
  background-color: transparent;
  border-color: var(--lichtlichtgroen);
  color: var(--lichtlichtgroen);
}

.btn.btn-box-shadow.btn-lichtlichtgroen:hover, .btn.btn-box-shadow.btn-lichtlichtgroen:active {
  background: var(--lichtlichtgroen);
  color: var(--donkergrijs);
}


.text-donkergrijs, .btn-link.text-donkergrijs, a.text-donkergrijs-hover:hover {
  color: var(--donkergrijs);
}

.text-donkergroen, .btn-link.text-donkergroen, a.text-donkergroen-hover:hover {
  color: var(--donkergroen);
}

.text-lichtgroen, .btn-link.text-lichtgroen, a.text-lichtgroen-hover:hover {
  color: var(--lichtgroen);
}

.text-gebrokenwit {
    color: var(--gebrokenwit);
}

.text-outline-lichtgroen {
  -webkit-text-stroke-color: var(--lichtgroen);
}

.text-outline-donkergroen {
  -webkit-text-stroke-color: var(--donkergroen);
}

.feature-box-wrapper {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.feature-box {
    position: relative;
    overflow: hidden;
}

/* Overlay die de hele box bedekt */
.feature-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--base-color, #fff); /* fallback kleur */
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1;
}

/* Content boven overlay */
.feature-box .content-slide-up {
    position: relative;
    z-index: 2;
}

/* Hover effect */
.feature-box:hover .feature-box-overlay {
    opacity: 1;
}

/* Icon en tekst standaard */
.feature-box .feature-box-icon i,
.feature-box .feature-box-content span,
.feature-box .feature-box-content p {
    transition: color .3s ease;
}

/* Tijdens hover → wit */
.feature-box:hover .feature-box-icon i,
.feature-box:hover .feature-box-content span,
.feature-box:hover .feature-box-content p {
    color: #fff !important;
}

.feature-box .feature-box-content span,
.feature-box .feature-box-content p {
    transition: color .3s ease, opacity .3s ease;
}

.marquee-text {
    font-size: 30px;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .marquee-text {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .marquee-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .marquee-text {
        font-size: 16px;
    }
}

/* Zorgt dat slides naast elkaar blijven */
.marquee-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}


.marquee-text {
    font-size: clamp(16px, 3vw, 30px);
    white-space: nowrap;
}