@import url(https://fonts.googleapis.com/css?family=Bitter);

*{
    margin: 0;
    padding: 0;
}
:root {
    --seablue: #F1FAEE;
    --navbar-height: 70px; /* pas aan aan je echte navbarhoogte */
    --sea-600: #014F86;   /* diep oceaanblauw */
    --sea-400: #2A9D8F;   /* zeegroen accent */
    --sea-200: #A8DADC;   /* zacht aqua */
    --sea-50:  #F1FAEE;   /* schelpwit */
}
body {
    font-family: "Exo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1rem, 4vw, 1.25rem);
}
.hidden--text{
    opacity: 0.0;
}
/* Hero section */
.hero-image {
    background: url("../images/hero.jpg") center/cover no-repeat;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.hero-text h1 {
    font-size: clamp(2.7rem, 5vw, 4rem);
    color: #fff;
    margin-bottom: 0.5rem;
}

.hero-text h3 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    /*font-style: italic;*/
    /*font-family: "Edu NSW ACT Cursive", cursive;*/
    color: #fff;
}
/* Checklist */
.checklist {
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    column-count: 1;
    column-gap: 2rem;
}

.checklist li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

.checklist li::before {
    content: "\F26E";
    position: absolute;
    font-family: "bootstrap-icons";
    left: -1rem;
    top: 0;
    /*color: #4CAF50;*/
    /*font-weight: bold;*/
}
.checklist--diensten {
    font-family: "Exo", sans-serif;
    margin-bottom: 2rem;
    list-style: none;
    padding-left: 0;
    column-count: 1;
    column-gap: 2rem;
}

.checklist--diensten li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.75rem;
}

.checklist--diensten li::before {
    content: "\F26E";
    position: absolute;
    font-family: "bootstrap-icons";
    left: -1rem;
    top: 0;
}

/* 2 kolommen op grote schermen */
@media (min-width: 992px) {
    .checklist {
        column-count: 2;
    }
}

/*Diensten*/
.center-wrapper {
    display: flex;
    justify-content: center;   /* Horizontaal centreren */
    /*align-items: center;       !* Verticaal centreren *!*/
    min-height: 50vh;
    margin-top: 5rem;/* Volledige hoogte van viewport */
}
.card-img-top { height: 300px; object-fit: cover; }
.card-title{
    color: var(--sea-600);
}
.card-text {
    color: #334;
}

.card-footer {
    background-color: white;
}
.card-hover{
    transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
/* Sea button */
.btn-sea{
    --btn-bg: var(--sea-600);
    --btn-bg-hover: #013b64;
    --btn-text: #fff;

    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 999px;
    padding: .6rem 1.1rem;
    font-weight: 600;
    letter-spacing: .2px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-sea:hover,
.btn-sea:focus{
    background: var(--btn-bg-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(1,79,134,.25);
}

/*Over mij*/
.object-fit-cover {
    object-fit: cover;
}

/*Contact*/

/* Optioneel: afgeronde hoeken alleen links */
.horizontal-card img {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

/* Op kleine schermen: afgeronde hoeken bovenaan */
@media (max-width: 767.98px) {
    .horizontal-card img {
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        border-bottom-left-radius: 0;
    }
}
.horizontal-card {
    min-height: 400px;
    /*background: red;*/
}
.horizontal-card-container{
    margin-top: 4rem;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    padding-top: 0.25rem; /* kleine buffer */
}
.section-block {
    padding: 2rem 0;
    border-bottom: 1px solid #dee2e6;
}

h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.card-footer{
    border-top: none !important;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
.otro-blockquote{
    font-size: 1rem;
    width:80%;
    margin:50px auto;
    font-family:Open Sans;
    font-style:italic;
    color: #555555;
    padding:1.2em 30px 1.2em 75px;
    /*border-left:8px solid #78C0A8 ;*/
    line-height:1.6;
    position: relative;
    /*background:#EDEDED;*/
}

.otro-blockquote::before{
    font-family:Arial;
    content: "\201C";
    color:#78C0A8;
    font-size:4em;
    position: absolute;
    left: 10px;
    top:-10px;
}

.otro-blockquote::after{
    content: '';
}

.otro-blockquote span{
    display:block;
    color:#333333;
    font-style: normal;
    /*font-weight: bold;*/
    margin-top:1em;
}


@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}