:root {
    --kleur-olijf: #546033;
    --kleur-olijf-rgb: 84, 96, 51;
    --kleur-oker: #cc9129;
    --kleur-oker-rgb: 204,145,41;
    --kleur-rood: #f70808;
    --kleur-rood-rgb: 247,8,8;
    --kleur-zwart: #2f2e2e;
}

html {
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    /*background-color: rgba(var(--kleur-olijf-rgb), 0.001);*/
    font-family: "rooney-sans";
    color: var(--kleur-zwart);
}

h1, h2, .h1, .h2 {
    font-family: "roca", serif;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 1px;
}

h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    font-family: "roca", serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 1px;
}

.color-olijf {
    color: var(--kleur-olijf);
}

.bg-color-olijf {
    background-color: var(--kleur-olijf);
    color: white;
}

.bg-color-olijf-50 {
    background-color: rgba(var(--kleur-olijf-rgb), 0.5);
    color: white;
}

.bg-color-olijf-80 {
    background-color: rgba(var(--kleur-olijf-rgb), 0.8);
    color: white;
}

.color-oker {
    color: var(--kleur-oker);
}

.bg-color-oker {
    background-color: var(--kleur-oker);
    color: white;
}

.bg-color-oker-10 {
    background-color: rgba(var(--kleur-oker-rgb),0.1);
    color: white;
}

.bg-color-oker-80 {
    background-color: rgba(var(--kleur-oker-rgb),0.8);
    color: white;
}

.color-rood {color: var(--kleur-rood);}

.bg-color-oker, .bg-color-oker a, .bg-color-oker-80 a, .bg-color-olijf a, .bg-color-olijf-80 a {
    color: white !important;
    text-decoration: none;
}

.bg-color-oker-10 a:hover {color:var(--kleur-oker);}
.bg-color-oker a:hover, .bg-color-oker-80 a:hover {text-decoration:underline!important;}

.btn.bg-color-olijf:hover {background-color: var(--kleur-oker);color:white;}

/* ===========================================
           Header / Navbar
=========================================== */
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--kleur-oker);
}

@media (min-width: 1200px) {
    #mainNavbar {
        position: relative;
    }

        #mainNavbar .navbar-collapse {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        #mainNavbar .navbar-nav {
            flex-wrap: nowrap;
        }
}

/* ===========================================
               Missie Intro Sectie
=========================================== */

.missie-titel {
    font-size: 2.5rem;
}

.missie-tekst {
    font-size: 1.15rem;
    line-height: 1.4;
    color: #555;
}

.missie-foto-wrapper {
    max-width: 350px;
    margin: 0 auto;
}

.missie-foto {
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 991.98px) {
    .missie-foto-wrapper {
        max-width: 280px;
    }
}

@media (max-width: 767.98px) {
    .missie-titel {
        font-size: 2rem;
    }

    .missie-tekst {
        font-size: 1rem;
    }

    .missie-foto-wrapper {
        max-width: 250px;
        margin-top: 1rem;
    }
}

/* ===========================================
       Diensten Hero Sectie
=========================================== */

.diensten-hero {
    /*background-color: rgba(var(--kleur-oker), 0.1);*/
    overflow: hidden;
}

.dienst-card {
    height: 450px;
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease;
}

    .dienst-card:hover {
        transform: scale(1.02);
    }

        .dienst-card:hover .dienst-overlay {
            opacity: 0.75;
        }

        .dienst-card:hover .dienst-bg {
            transform: scale(1.1);
        }

.dienst-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.dienst-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.dienst-overlay-olijf {
    background: linear-gradient(135deg, rgba(var(--kleur-olijf-rgb), 0.85) 0%, rgba(var(--kleur-olijf-rgb), 0.6) 100%);
}

.dienst-overlay-bordeaux {
    background: linear-gradient(135deg, rgba(var(--kleur-oker-rgb), 0.85) 0%, rgba(var(--kleur-oker-rgb), 0.6) 100%);
}

.dienst-content {
    height: 100%;
    z-index: 2;
}

.dienst-titel {
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.dienst-tekst {
    font-size: 1rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.dienst-card .btn-outline-light {
    border-width: 2px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.dienst-card:hover .btn-outline-light {
    background-color: white;
    color: var(--kleur-olijf);
}

.dienst-overlay-bordeaux + .dienst-content .btn-outline-light:hover,
.dienst-card:hover .dienst-overlay-bordeaux + .dienst-content .btn-outline-light {
    color: var(--kleur-bordeaux);
}

/* Mobiel aanpassingen */
@media (max-width: 767.98px) {
    .dienst-card {
        height: 350px;
        margin-bottom: 1rem;
    }

    .dienst-titel {
        font-size: 1.75rem;
    }

    .dienst-tekst {
        font-size: 0.95rem;
    }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===========================================
   Carousel vaste verhouding (aspect-ratio)
   =========================================== */
.carousel-fixed-ratio {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    background: #eee;
}

.carousel-fixed-ratio .carousel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.carousel-fixed-ratio img {
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}

.carousel-fixed-ratio .carousel-inner {
    height: 100%;
    min-height: 200px;
}