:root{
    --paars:#3d1041;
    --paars-hover: #662280; 
    
    --lavendel:#dbc3dd;
    --lavendel-hover: #fbeeff;
}
body{
    font-family:'Ledger',serif; 
    background-color:var(--lavendel);
    color:#2d2d2d;
}

.logo-mask {
    width: min(40vw, 180px);
    aspect-ratio: 158.3688 / 53.363338; /* uit je viewBox */
    background-color: var(--paars);

    -webkit-mask-image: url('../img/vrouwenzaken.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url('../img/vrouwenzaken.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


.logo-hero.vertical {
    display: flex;
    flex-direction: column;   /* stapel logo boven tekst */
    align-items: center;      /* horizontaal centreren */
    text-align: center;
    gap: 0.5rem;
}

.logo-mask-hero {
    width: min(40vw, 360px);
    aspect-ratio: 158.3688 / 53.363338; /* uit je viewBox */
    background-color: #FFF;

    -webkit-mask-image: url('../img/vrouwenzaken.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url('../img/vrouwenzaken.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* NAVBAR */
.navbar{
    background:#fff;
    font-family:'Ledger',serif;
}
.navbar .nav-link{
    color:var(--paars);
}
.navbar .nav-link:hover{
    color:var(--paars);
}

/* HERO (dynamisch schalen) */
.hero{
    background:url("../img/vrouwenzaken-HeaderBG-min.jpg") center center no-repeat;
    background-size:cover;
    position:relative;
    width:100%;
    min-height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
}
.hero .hero-inner{
    position:relative;
    z-index:2;
}
.hero h1{
    font-size:3.5rem;
    color:#fff;
}
.hero h1 .vrouwen{font-family:'Ledger',serif;}
.hero h1 .zaken{font-family:'Qwitcher Grypen',cursive;font-weight:400;}

.hero p {
    font-size: 2.5rem;
}

.section-title{
    font-family: 'Ledger', serif;
    font-size:2.4rem;
    font-weight:700;
    color:var(--paars);
    margin-bottom:1rem;
}


/* Buttons HERO */
.btn {
    margin:0.5rem;
}


.btn-success {
    font-family:'Ledger',serif;
    color: var(--paars);
    background-color: var(--lavendel);
    border-color: var(--lavendel);
}
.btn-success:hover {
    color: var(--paars);
    background-color: var(--lavendel-hover);
    border-color: var(--lavendel-hover);
}

.btn-success:focus
{
    color: var(--paars);
    background-color: var(--lavendel);
    border-color: var(--lavendel);
}


.btn-secondary {
    font-family:'Ledger',serif;
    color: #fff;
    background-color: var(--paars);
    border-color: var(--paars);
}

.btn-secondary:hover {
    color: #fff;
    background-color: var(--paars-hover);
    border-color: var(--paars-hover);
}

.btn-secondary:focus {
    color: #fff;
    background-color: var(--paars);
    border-color: var(--paars);
}

.card{border-radius:10px;}
blockquote p{
    font-family: 'Ledger', serif;
    font-size:1.6rem;
    color:var(--paars);
}


/* lagere banner */
.hero.article {
    min-height: 25vh;
}

/* Zorgt dat images mooi schalen en dezelfde hoogte/aspect houden */
.card-img-top{
    width: 100%;
    aspect-ratio: 4 / 5;   /* oogt als je voorbeeld; pas aan naar wens */
    object-fit: cover;     /* snijdt bij zonder vervormen */
    display: block;
}

/* optioneel: subtiele hover */
.card:hover .card-img-top{
    transform: scale(1.02);
    transition: transform .3s ease;
    filter: brightness(1.1);
}

.card-body a {
    color: inherit;            /* Neemt de tekstkleur van de parent over */
    text-decoration: none;     /* Verwijdert het blauwe lijntje */
}

.card-body a:hover {
    color: inherit;            /* Blijft neutraal bij hover */
    text-decoration: none;
}

.card-body a i {
    color: #0a66c2; /* LinkedIn-blauw */
}
.card-body a {
    text-decoration: none;
    color: inherit;
}

.card-body a.btn-secondary {
    color: #FFFFFF;important          /* Neemt de tekstkleur van de parent over */
    text-decoration: none;     /* Verwijdert het blauwe lijntje */
}

.blockquote-footer {
    background: inherit;
}

footer{
    background:var(--paars);color:#fff;padding:40px 0;
}
footer a{color:#FFF;text-decoration:none;}
footer a:hover{text-decoration:underline;}


/* Algemene icoonopmaak */
.vz-icon {
    width: 90px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 1rem;
    background-color: #fff;       /* kleur van het icoon */
    display: block;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Specifieke iconen */
.vz-icon-verbinding {
    -webkit-mask-image: url('../img/verbinding.svg');
    mask-image: url('../img/verbinding.svg');
}

.vz-icon-inspiratie {
    -webkit-mask-image: url('../img/inspiratie.svg');
    mask-image: url('../img/inspiratie.svg');
}

.vz-icon-resultaat {
    -webkit-mask-image: url('../img/resultaat.svg');
    mask-image: url('../img/resultaat.svg');
}

/* Kleurvariaties (optioneel, bijv. voor hover) */
footer .vz-icon:hover {
    background-color: #dbc3dd; /* lichtlila accent */
}

.py-4.my-4 {
    padding-bottom: 0.5rem !important;
}

.mb-0.footer {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-size: x-small;
    margin: auto;
}




.card.footer {
    border-color: var(--paars);
}

.card-body.footer {
    color: #fff;
    background-color: var(--paars);  
    
}




/* XS - Mobiel klein (tot 575px) */
@media (max-width: 575.98px) {

    .logo-hero {
        visibility: hidden;

    }
    .logo-vrouwen {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }
    .logo-zaken {
        font-size: 1.9rem;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero p {
        font-size: 1.5rem;
    }
    .btn-lg {
        font-size: 1rem;
        padding: 0.5rem 1.2rem;
    }
}

/* SM - Mobiel groot (576–767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .logo-vrouwen {
        font-size: 1.6rem;
    }
    .logo-zaken {
        font-size: 2.1rem;
    }
    .hero h1 {
        font-size: 2.6rem;
    }
    .hero p {
        font-size: 1.1rem;
    }
}

/* MD - Tablets (768–991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .logo-vrouwen {
        font-size: 1.8rem;
    }
    .logo-zaken {
        font-size: 2.3rem;
    }
    .hero h1 {
        font-size: 3rem;
    }
    .hero p {
        font-size: 1.2rem;
    }
    .section-title {
        font-size: 2rem;
    }
}

/* LG - Laptops (992–1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .logo-vrouwen {
        font-size: 2rem;
    }
    .logo-zaken {
        font-size: 2.5rem;
    }
    .hero h1 {
        font-size: 3.2rem;
    }
}

/* XL - Desktops (1200–1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero h1 {
        font-size: 3.6rem;
    }
    .section-title {
        font-size: 2.2rem;
    }
}

/* XXL - Grote schermen (1400px en breder) */
@media (min-width: 1400px) {
    .hero h1 {
        font-size: 4rem;
    }
    .section-title {
        font-size: 2.5rem;
    }
}