/*
    background: #fcfcfc;
    foreground: #222121;
    accent1:#b200f6;
    accent2:#820baf;
    accent3:#521668;
    lime-green:#4cff00b5
    title-font:Montserrat Light Alt1;
    title-font-weight: 300;
    title-font-style: normal;

    subtitle-font:Questrial;
    subtitle-font-weight: 300;
    subtitle-font-style: normal;
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Verbergt de standaard browser-outline wanneer een h1 de focus krijgt */
h1:focus {
    outline: none;
}

body {
    /*font-family: "Lato", sans-serif;
    font-weight: 400;*/
    /*font-family: "Montserrat Light Alt1", sans-serif;*/
    font-family: "Questrial", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    /*color: #777;*/
    /*color: #fff;*/
    color: #222121;
    padding: 30px;
}
.main-content {
    background-color: #f4f4f4; /* Optioneel: lichte achtergrond voor contrast */
    padding: 5rem 0; /* Geeft ruimte boven en onder de kaarten */
}
.header {
    position: relative;
    height: 95vh;
    /*background-image: linear-gradient(to right bottom, #fcfcfc, #4cff00b5),url(images/P365GlassBox_Web.webp);*/
    /*background-image: url(images/P365GlassBox_Web.webp);*/
    background-image: var(--header-background-image, url(images/P365GlassBox_Web.webp));
    background-size: cover;
    background-position: top;
    /*https: //bennettfeely.com/clippy/*/
    /*clip-path: polygon(0 5vh, 100% 0, 100% 90vh, 0 100%);*/
}

.heading-primary {
    color: azure;
    text-transform: uppercase;
    backface-visibility: hidden;
}
.heading-primary-main {
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 16px;
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    /*
    animation-delay: 3s;
    animation-iteration-count:3;

*/
}

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 20px;
    animation:moveInRight 1s ease-out;

}

.text-box {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.logo-box {
    position: absolute;
    top: 40px;
    left: 40px;
}

.logo{
    height:50px;
}

@keyframes moveInLeft {
    0% {
        opacity:0;
        transform:translateX(-100px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* De nieuwe container voor de kaarten */
.card-container {
    display: flex; /* Activeert Flexbox */
    justify-content: center; /* Centreert de kaarten horizontaal op de pagina */
    flex-wrap: wrap; /* Zorgt dat kaarten onder elkaar springen op kleine schermen */
    gap: 40px; /* De ruimte tussen de kaarten */
    padding: 50px; /* Wat ruimte rondom de hele container */
    width: 100%;
}
/* De 'card' container */
.card {
    width: 350px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    /*overflow: hidden;*/
    /* Start onzichtbaar en naar beneden verplaatst */
    opacity: 0;
    transform: translateY(50px);
    /* Vloeiende overgang voor als de class wordt toegevoegd */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    display: flex;
    flex-direction: column;
}

/* NIEUW: De container voor de afbeelding */
.card-image-container {
    /* Deze padding creëert de ruimte rondom de afbeelding */
    padding: 15px;
}

.card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* De opeenvolgende vertraging met transition-delay */
.card:nth-child(1).is-visible {
    transition-delay: 0.3s;
}

.card:nth-child(2).is-visible {
    transition-delay: 0.5s;
}

.card:nth-child(3).is-visible {
    transition-delay: 0.7s;
}

.card:nth-child(4).is-visible {
    transition-delay: 0.9s;
}

/* De afbeelding in de kaart */
.card-image {
    width: 100%;
    display: block; /* Voorkomt een kleine witte ruimte onder de afbeelding */
    transition: transform 0.4s ease-out;
    /* Geef de afbeelding zelf afgeronde hoeken */
    border-radius: 10px;
}
/* Als je over de .card zweeft, pas dit toe op de .card-image */
.card:hover .card-image {
    /* Zoom de afbeelding in naar 105% van zijn grootte */
    transform: scale(1.05);
}

/* De container voor de tekst en knop */
.card-content {
    padding: 20px;
    /* Bestaande flex-eigenschappen */
    display: flex;
    flex-direction: column;
    /* --- VOEG DEZE REGEL TOE --- */
    /* Vertel dit blok om de resterende ruimte in de .card op te vullen */
    flex-grow: 1;
}

/* NIEUW: De wrapper voor de tekst */
.card-text-wrapper {
    flex-grow: 1; /* DE MAGISCHE REGEL: Dit element groeit en vult alle vrije ruimte op */
}
/* NIEUW: Styling voor de titel in de kaart */
.card-heading {
    font-size: 1.3rem; /* Iets groter dan de normale tekst */
    color: #222121; /* De door jou opgegeven kleur */
    margin-bottom: 10px; /* Creëert ruimte tussen de titel en de paragraaf */
}
/* De tekst in de kaart */
.card-text {
    color: #222121; /* De door jou opgegeven kleur */
    font-size: 16px;
    line-height: 1.6; /* Iets meer regelafstand voor leesbaarheid */
    margin-bottom: 25px; /* DEZE REGEL ZORGT VOOR DE RUIMTE BOVEN DE KNOP */
}

/* De knop */
.card-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Vloeiende overgang voor de hover-staat */
}

    .card-button:hover {
        background-color: #0056b3; /* Donkerdere kleur als je eroverheen zweeft */
    }

/* De @keyframes regel voor de animatie */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px); /* Beginpositie (50px naar beneden en onzichtbaar) */
    }

    to {
        opacity: 1;
        transform: translateY(0); /* Eindpositie (volledig zichtbaar op de uiteindelijke plek) */
    }
}

/* Styling voor de nieuwe sectie-kop */
.section-heading {
    text-align: center; /* Centreert de tekst */
    font-size: 2.5rem; /* Maakt de tekst groter en krachtiger */
    color: #333; /* Een donkere, goed leesbare kleur */
    margin-bottom: 3rem; /* Creëert ruimte tussen de kop en de kaarten */
    /* Beginstaat voor de 'animate on scroll' animatie */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    /* De 'zichtbare' staat die door JavaScript wordt getriggerd */
    .section-heading.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* ============================================= */
/* === AANPASSINGEN VOOR AI AGENTS PAGINA === */
/* ============================================= */

/* 1. CORRECTIE TEKSTKLEUR */
/* We overschrijven de algemene body kleur specifiek voor de main content. */
.main-content {
    background-color: #fcfcfc; /* Iets helderder dan f4f4f4 voor een frisser effect */
    color: #222121; /* Jouw gewenste donkere tekstkleur */
    padding: 5rem 0;
}

    /* Zorg ervoor dat alle standaard paragrafen en lijsten binnen main-content de juiste kleur erven */
    .main-content p,
    .main-content li {
        color: #222121;
    }

    /* Titels binnen de main-content ook een donkere kleur geven */
    .main-content .section-heading,
    .main-content .heading-tertiary {
        color: #333; /* Iets zachter dan puur zwart voor een premium look */
    }


/* 2. KRANTENKOLOM LAYOUT */
/* Een container om de content te centreren en een maximale breedte te geven. */
/* Dit voorkomt extreem brede kolommen op 4K schermen. */
.container {
    max-width: 1200px; /* Een prettige leesbreedte */
    margin: 0 auto; /* Centreert de container */
    padding: 0 2rem; /* Geeft wat ruimte aan de zijkanten op kleinere schermen */
}

/* De class die de kolommen creëert */
.content-columns {
    column-count: 2; /* Standaard 2 kolommen voor desktop */
    column-gap: 40px; /* Ruimte tussen de kolommen */
}

    .content-columns p {
        margin-bottom: 1.5rem; /* Zorgt voor ruimte tussen paragrafen in de kolommen */
    }

/* Media Query voor responsiviteit: */
/* Op schermen kleiner dan 992px (tablets en kleiner), gaan we terug naar 1 kolom. */
@media (max-width: 992px) {
    .content-columns {
        column-count: 1;
    }
}