/* Full Width CTA Banner */
.full-width-cta {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #f4f7fc 0%, #eef3fb 100%);
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden; /* Zorgt dat de animaties binnen het vak blijven */
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.cta-inner-content {
    position: relative;
    z-index: 2; /* Bovenop de geanimeerde cirkels */
    max-width: 800px;
}

.cta-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #c0392b; /* Donkerrood accent conform screenshot */
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.cta-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    color: #111111;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.cta-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* Cirkel-animatie achtergrond */
.circle-animation-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.animated-circle {
    position: absolute;
    border: 1px solid rgba(0, 102, 255, 0.15); /* Iets beter zichtbare blauwe rand */
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.3);
    /* Animatieduur verkort van 9s naar 4.5s voor extra snelheid */
    animation: pulseCircle 4.5s infinite ease-in-out;
}

/* 6 verschillende cirkels met kortere, overlappende delays voor een drukkere frequentie */
.circle-1 {
    width: 320px;
    height: 320px;
    left: -40px;
    top: -80px;
    animation-delay: 0s;
}

.circle-2 {
    width: 200px;
    height: 200px;
    right: 15%;
    bottom: -30px;
    animation-duration: 3.5s; /* Extra snel */
    animation-delay: 1.2s;
}

.circle-3 {
    width: 140px;
    height: 140px;
    left: 20%;
    bottom: 15px;
    animation-duration: 5s;
    animation-delay: 0.5s;
}

.circle-4 {
    width: 260px;
    height: 260px;
    right: -60px;
    top: -20px;
    animation-duration: 4s;
    animation-delay: 2.2s;
}

.circle-5 {
    width: 180px;
    height: 180px;
    left: 45%;
    top: -50px;
    animation-duration: 4.2s;
    animation-delay: 1.8s;
}

.circle-6 {
    width: 220px;
    height: 220px;
    left: 5%;
    top: 30%;
    animation-duration: 3.8s;
    animation-delay: 2.8s;
}

/* Snellere keyframe overgangen: flitsender infaden en feller op het hoogtepunt */
@keyframes pulseCircle {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    30% {
        opacity: 1; /* Sneller op volle sterkte */
    }
    60% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: scale(1.4); /* Groeit groter uit voor meer beweging */
    }
}

/* Mobiele optimalisatie */
@media (max-width: 768px) {
    .cta-title {
        font-size: 1.8rem;
    }
    .full-width-cta {
        padding: 60px 20px;
    }
    

.animated-circle {
    position: absolute;
    /* PAS DIT AAN: Van 1px naar 2px of 3px voor een dikkere lijn */
    /* PAS DIT AAN: De laatste waarde (0.15) is de opacity. Zet deze naar 0.35 of 0.50 voor meer kleurintensiteit */
    border: 2px solid rgba(0, 102, 255, 0.40); 
    
    /* OPTIONEEL: Wil je dat de cirkels een subtiele gloed (schaduw) hebben? Voeg dan deze regel toe: */
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.20);

    border-radius: 50%;
    opacity: 0;
    transform: scale(0.3);
    animation: pulseCircle 4.5s infinite ease-in-out;
}

/* Pas hier de keyframes aan zodat ze langer goed zichtbaar blijven tijdens het groeien */
@keyframes pulseCircle {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    20% {
        opacity: 1; /* Snel naar volledige zichtbaarheid */
    }
    75% {
        opacity: 0.9; /* Blijft nu veel langer goed zichtbaar (stond op 0.8 bij 60%) */
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

.logo-container *{
    background-color: #FFF!important;
}