html {
            scroll-behavior: smooth;
            scroll-padding-top: 140px; /* Aangepast naar realistische waarde */
        }

        :root {
            --cone-blue: #1F2937;
            --mist-white: #F5F7F9;
            --pale-sky: #CBD8DC;
            --slate-fog: #9BAEB5;
            --warm-taupe: #D8D2CC;
            --takje-steen: #A8C2D3;
        }

        .font-playlist { font-family: 'Josefin Sans', cursive; }
        .font-josefin { font-family: 'Josefin Sans', sans-serif; }

        .bg-cone-blue { background-color: var(--cone-blue); }
        .bg-mist-white { background-color: var(--mist-white); }
        .bg-pale-sky { background-color: var(--pale-sky); }
        .bg-slate-fog { background-color: var(--slate-fog); }
        .bg-warm-taupe { background-color: var(--warm-taupe); }
        .bg-takje-steen { background-color: var(--takje-steen); }

        .text-cone-blue { color: var(--cone-blue); }
        .text-slate-fog { color: var(--slate-fog); }

        .hero-gradient {
            background: #FFFFFF;
        }
        .grijsig {
            background: rgba(245, 247, 249, 0.95);
        }

        .bgwit {
            background: #FFFFFF;
        }

        .quote-card {
            background: linear-gradient(145deg, var(--mist-white), var(--pale-sky));
            box-shadow: 0 10px 25px rgba(108, 155, 165, 0.1);
        }

        .service-card {
            background: #FFFFFF;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(108, 155, 165, 0.08);
        }
        
        .service-card-taupe {
            background: var(--warm-taupe);
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(108, 155, 165, 0.08);
        } 

        .service-card:hover {
            /*transform: translateY(-5px);*/
            box-shadow: 0 15px 35px rgba(108, 155, 165, 0.15);
        }

        .testimonial-card {
            background: var(--mist-white);
            border-left: 4px solid var(--cone-blue);
        }

        .section-divider {
            height: 3px;
            background: linear-gradient(to right, var(--cone-blue), var(--takje-steen), var(--cone-blue));
            margin: 2rem auto;
            width: 100px;
        }

        .logo-container {
            filter: drop-shadow(0 4px 8px rgba(108, 155, 165, 0.2));
        }

        nav a {
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: var(--cone-blue);
        }

        .floating-nav {
            backdrop-filter: blur(10px);
            background-color: rgba(245, 247, 249, 0.95);
        }

        .service-image {
            height: 90%;
            width: 90%;
            object-fit: cover;
            object-position: center;
            border-radius: 0.75rem;
            aspect-ratio: 1/1;
        }

        /* Dropdown styling */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: rgba(245, 247, 249, 0.98);
            backdrop-filter: blur(10px);
            border: 1px solid var(--pale-sky);
            border-radius: 0.5rem;
            box-shadow: 0 10px 25px rgba(108, 155, 165, 0.15);
            min-width: 250px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-menu a {
            display: block;
            padding: 0.75rem 1rem;
            color: #374151;
            text-decoration: none;
            border-bottom: 1px solid var(--pale-sky);
            transition: all 0.2s ease;
        }

        .dropdown-menu a:last-child {
            border-bottom: none;
        }

        .dropdown-menu a:hover {
            background-color: var(--pale-sky);
            color: var(--cone-blue);
            padding-left: 1.25rem;
        }

        .dropdown-arrow {
            transition: transform 0.3s ease;
        }

        .dropdown:hover .dropdown-arrow {
            transform: rotate(180deg);
        }

        .btn-beige {
            background-color: var(--warm-taupe);
            color: #374151;
        }
        .borderbottombeige{
            border-bottom: 1px Solid var(--warm-taupe);
        }
        .btn-beige:hover {
            background-color: #C8C2BC;
            color: #1f2937;
        }
        ul li i.fa-check,
        ul li i.fa-arrow-right {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: var(--cone-blue);
            border-radius: 50%;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }

        ul li i.fa-check::before,
        ul li i.fa-arrow-right::before {
            content: "";
        }
        .tekstwit {
            color: var(--mist-white);
        }
        
        .home-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.75rem;
    aspect-ratio: 4/3; /* Breder dan hoog */
}

    /* Mobile menu styles */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 80px; /* Kleiner voor mobiel */
    }

    #mobileMenuPanel {
        max-width: 85vw;
    }

    .mobile-nav-link {
        transition: all 0.2s ease;
    }

    .mobile-nav-link:hover {
        padding-left: 1.25rem;
    }
}