/* Intro */
.intro {
    margin-top: 97px;
    background: url('../Images/BG.png') no-repeat;
    background-position: center bottom ;
    height: 650px;
}
 .intro .container {
    margin-top: 97px;

}

.intro .intro-content{
    padding: 5px 0;
    width: 100%;
}
.intro .intro-text {
    width: 60%;
}


/*kaartes*/
.kaartjes {
    padding: 30px 0;
}
.kaartjes h4 {
    font-weight: 600;
}
.kaartjes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.kaartjes .card p:nth-child(2) {
    margin-top: 40px;
}
.kaartjes .card p:nth-child(3) {
    margin-top: 20px;
}
.kaartjes .card p:nth-child(4) {
    margin-top: 20px;
}
.kaartjes .card p:nth-child(5) {
    margin-top: 10px;
    font-weight: bold;
}

/* diensten*/
.diensten {
    padding: 40px 0;

}
.diensten .diensten-groep {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}
.diensten .diensten-groep .diensten-groep-kop {
    padding: 20px 0;
    margin-bottom: 15px;
    position: relative;
}
.diensten .diensten-groep .diensten-groep-kop h4 {
    font-weight:  600;
    width: 95%;

} 
.diensten .diensten-groep .diensten-groep-kop i {
    position: absolute;
    right: 0;
    top: 35px;
    font-size: 1.25rem;
    cursor: pointer;
}
.diensten .diensten-groep .diensten-groep-body {
    display: none;
    width: 80%;

}
.diensten .diensten-groep .diensten-groep-body.open {
    display: block;
}
/*media Queries*/
    @media (max-width:920px) {
        .intro {
            background: url('../Images/BGsm.png') no-repeat;
            background-position: center bottom ;
            object-fit: contain;
            height: 550px;
        }
        .intro .intro-content{
            padding: 0 0;
        }
        .intro .intro-content, .intro .intro-text{
            width: 100%;
            text-align: center;
        }
        .kaartjes .kaartjes-grid {
            gap: 50px;
        }
        .kaartjes {
            padding: 50px 20px;
        }
    } 
    @media (max-width:670px) {
        .intro {
            background: url('../Images/BGxs.png') no-repeat;
            background-position: center bottom ;
            object-fit: contain;
            height: 400px;
        }
        .intro .intro-content{
            padding: 0 0;
        }
        .kaartjes .kaartjes-grid, .footer-grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    
        .kaartjes {
            padding: 30px 20px;
        }
    }
    @media (max-width:500px) {
        .intro {
            background: url('../Images/BGxxs.png') no-repeat;
            background-position: center bottom ;
            object-fit: contain;
            height: 400px;
        }
        .intro .intro-content{
            padding: 0 0;
        }
    }