/* contact form style's */
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: #f4f4f4;
            border-radius: 5px;
        }

        .contact-form label {
            display: block;
            margin-bottom: 8px;
        }

        .contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #006eb6; /* Standaard randkleur */
    border-radius: 5px;
    box-sizing: border-box; /* Zorg ervoor dat padding en border worden opgenomen in de totale breedte en hoogte */
    resize: vertical;
    transition: all 0.3s ease; /* Vloeiende overgang voor randkleur bij focus */
}

.contact-form input:focus, 
.contact-form textarea:focus {
    border-color: #004d80; /* Donkerdere kleur voor de rand bij focus */
    outline: none; /* Verwijdert de standaard outline */
    box-shadow: 0 0 5px #006eb6; /* Voeg een subtiele schaduw toe voor visuele feedback */
}

        .contact-form button {
            padding: 10px 20px;
            background-color: #006eb6;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .contact-form button:hover {
            background-color: #004d80;
            transform: scale(1.1);
        }

        /* ---------------------------------------------------------------------- */


        .row.banner {
            background-image: url('https://sharpprojects.nl/wp-content/uploads/2023/03/Denso-Weesp-20.jpg');
            /* background-image: url('https://sharpprojects.nl/wp-content/uploads/2023/03/Denso-Weesp-20.jpg'); */
            height: 75vh;
            width: 100%;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        h1 {
            margin: 0;
            color: #006eb6;
            font-size: 60px;
            text-transform: uppercase;
            font-family: "Montserrat", sans-serif;
        }
        .row.banner .title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .row.pagetitle {
            background-color: #006eb6;
            padding: 50px;
            text-align: center;
            color: white;
            font-family: "Montserrat", sans-serif;
        }
        .row.pagetitle h2 {
            margin: 0;
        }
        .row.pagetitle p {
            margin-bottom: 0;
        }
        body {
            margin: 0;
        }
        .contentwrapper {
            max-width: 1440px;
            margin: 0 auto;
        }
        /* .logo img {
            height: 100px;
        } */


        .header{
            position: sticky;
            z-index: 9999999;
            top: 0;
            background-color: white;
        }

        .header .contentwrapper {
            display: flex;
            justify-content: space-between;
            height: 100px;
            padding: 0 15%;
        }
        .header .contentwrapper > .logo {
            display: flex;
            align-items: center;
        }

        .menu-items {
            align-items: center;
            display: flex;
            margin-right: 60px;
            gap: 20px;

            font-family: Montserrat, Arial, Helvetica, sans-serif;
        }
        .menu-items > a {
            text-decoration: none;
            color: #333333;
            font-size: 15px;
            position: relative; /* Nodig voor het positioneren van het pseudo-element */
            transition: all 0.2s ease;
        }
        
        .menu-items > a:after {
            content: '';
            position: absolute;
            width: 100%; /* De volledige breedte vanaf het begin */
            height: 2px;
            background-color: #006eb6;
            bottom: -3px; /* Plaats het streepje net onder de tekst */
            left: 0; /* Start vanaf het begin van de link */
            transform: scaleX(0); /* Begin met een breedte van 0 */
            transform-origin: center; /* Laat het streepje vanuit het midden groeien */
            transition: transform 0.2s ease;
        }
        
        .menu-items > a:hover:after {
            transform: scaleX(1.1); /* Laat het streepje groeien naar volledige breedte */
        }
        .menu-items > a:hover {
            text-decoration: none;
            color: #006eb6;
            
        }



        /* Standaard menu-items en logo grootte */




.logo img {
    width: 275px;
    margin-left: 60px;
    transition: all 0.2s ease;
}

/* Kleine aanpassingen voor gescrollde toestand */
.scrolled .menu-items a {
    font-size: 13px; /* Kleinere font-size als gescrold is */
}

.scrolled .logo img {
    width: 225px; /* Kleinere logo-grootte als gescrold is */
}

h3 {
            font-family: "Montserrat", sans-serif;
            color: #006eb6;
        }

        /* Standaard stijl voor grotere schermen */
        .intro-text {
            padding: 75px 30px;
        }
        .intro-text .contentwrapper {
            display: flex;
            justify-content: space-between;
            gap: 50px;
        }
        .intro-text .contentwrapper .image {
            background-image: url('https://sharpprojects.nl/wp-content/uploads/2023/03/Denso-Weesp-20.jpg');
            background-size: cover;
            background-position: center; /* Zorgt ervoor dat het midden van de afbeelding zichtbaar is */
            
            width: calc(50% - 25px);
        }
        .intro-text .contentwrapper .text {
            width: calc(50% - 25px);
            padding: 50px 0;
            font-family: "Montserrat", sans-serif;
        }
        .intro-text .contentwrapper .text h3 {
            font-family: "Montserrat", sans-serif;
            color: #006eb6;
        }

        .mobile-friendly{
            /* top: -65px; */
            top: -0px;
        }

        /* Media query voor middelgrote schermen en kleiner (bijv. tablets en telefoons) */
        @media (max-width: 768px) {
            .intro-text .contentwrapper {
                flex-direction: column;
                gap: 0px; /* Pas aan indien nodig */
            }
            .intro-text .contentwrapper-reverse {
                flex-direction: column-reverse !important;
                gap: 0px; /* Pas aan indien nodig */
            }
            .intro-text .contentwrapper .image,
            .intro-text .contentwrapper .text {
                width: 100%; /* Zorg ervoor dat beide elementen de volledige breedte gebruiken */
            }
            .intro-text .contentwrapper .image {
                height: 200px; /* Pas de hoogte aan voor kleinere schermen indien nodig */
            }
            .intro-text .contentwrapper .text {
                padding: 10px 0; /* Pas padding aan indien nodig */
            }
            .intro-text .contentwrapper h3 {
                padding: 0px 30px; /* Pas padding aan indien nodig */
            }
            .intro-text .contentwrapper p {
                padding: 0px 30px; /* Pas padding aan indien nodig */
            }

            .mobile-friendly{
                top: -35px;
            }
        }


        .image-banner {
            /* background-image: url('https://sharpprojects.nl/wp-content/uploads/2019/06/projectstoffering04.jpg'); */
            background-image: url('https://sharpprojects.nl/wp-content/uploads/2019/06/projectstoffering04.jpg');
            background-size: cover;
            background-position: center;
            padding: 200px;
            overflow: hidden;
            position: relative;
            text-align: center;
            color: white;
            font-family: "Montserrat", sans-serif;
        }
        .image-banner:after {
            content: '';
            position: absolute;
            height: 200px;
            width: 125%;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            border-radius: 50%;
        }
        .image-banner:before {
            content: '';
            position: absolute;
            height: 200px;
            width: 125%;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            border-radius: 50%;
        }

        .images {
            padding: 75px 30px;
        }
        .images h3 {
            text-align: center;
            font-size: 40px;
            margin: 0 0 30px;
        }
        .images .contentwrapper {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 50px;
        }
        .images .contentwrapper .image {
            /* background-image: url('https://sharpprojects.nl/wp-content/uploads/2023/03/Denso-Weesp-20.jpg'); */
            background-size: cover;
            width: calc(50% - 25px);
            height: 470px;
        }


        .images .contentwrapper .image:nth-child(1) {
            background-image: url('../img/ontwikkelkaart.jpeg');
        }
        
        .images .contentwrapper .image:nth-child(2) {
            background-image: url('../img/impressieAmbachtsezoom.png');
        }
        
        .images .contentwrapper .image:nth-child(3) {
            background-image: url('../img/Luchtfoto_Ambachtsezoom.jpeg');
        }
        
        .images .contentwrapper .image:nth-child(4) {
            background-image: url('../img/Luchtfoto_Ambachtsezoom_kavels.jpeg');
        }
        /* .images .contentwrapper .image:nth-child(1) {
            background-image: url('https://sharpprojects.nl/wp-content/uploads/2019/06/projectstoffering04.jpg');
        }
        
        .images .contentwrapper .image:nth-child(2) {
            background-image: url('https://sharpprojects.nl/wp-content/uploads/2023/03/Denso-Weesp-20.jpg');
        }
        
        .images .contentwrapper .image:nth-child(3) {
            background-image: url('https://sharpprojects.nl/wp-content/uploads/2019/06/projectstoffering04.jpg');
        }
        
        .images .contentwrapper .image:nth-child(4) {
            background-image: url('https://sharpprojects.nl/wp-content/uploads/2023/03/Denso-Weesp-20.jpg');
        } */



        /* Footer secties */
        .footer {
            padding: 75px 0;
            background-color: #1e1e1e;
        }

        .footer .contentwrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 50px;
            font-family: "Montserrat", sans-serif;
        }

        .footer .contentwrapper .contentblock {
            flex: 1 1 calc(25% - 50px); /* 4 blokken naast elkaar met een gat van 50px */
            color: #006eb6;
        }

        .footer .contentwrapper .contentblock.three {
            flex: 1 1 calc(50% - 50px); /* 2 blokken naast elkaar, maar dit blok beslaat nu twee blokken */
        }

        .footer .contentwrapper .contentblock h3 {
            font-size: 15px;
            margin: 0 0 28px;
        }

        .footer .contentwrapper .contentblock p {
            display: flex;
            gap: 10px; /* Voeg ruimte toe tussen de items */
            margin: 5px 0;
            padding: 0; /* Verwijder padding indien nodig */
        }

        .footer .contentwrapper .contentblock i {
            color: #717171;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .footer .contentwrapper .contentblock a {
            color: white;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.2s ease;
            /* line-height: 1.5; Pas de regelhoogte aan op basis van de lettergrootte */
        }

        .footer .contentwrapper .contentblock a:hover {
            color: #006eb6;
        }

        .footer .contentwrapper .contentblock .logo > img {
            width: 400px;
            height: auto;
        }


        .scroll-to-top {
            /* background-color: #004d80; */
            background-color: #006eb6;
            color: white;
            border: none;
            padding: 10px 16px;
            cursor: pointer;
            font-size: 18px;
            border-radius: 50px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            transition: all 0.2s ease;
            display: none; /* Verbergen totdat gescrold */
        }
        

        /* Standaard hamburger icon */
.menu-toggle {
    display: none; /* Verborgen op grotere schermen */
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
    margin-right: 20px;
}

.menu-toggle .bar {
    background-color: #006eb6;
    height: 3px;
    width: 25px;
    margin: 3px 0;
    transition: 0.3s;
}

/* Geanimeerde hamburger naar kruis */
.menu-toggle.active .bar1 {
    transform: rotate(-45deg) translate(-8px, 8px);
}

.menu-toggle.active .bar2 {
    opacity: 0; /* Verberg de middelste balk */
}

.menu-toggle.active .bar3 {
    transform: rotate(45deg) translate(-5px, -5px);
}



        /* Media queries voor verschillende schermgroottes */
        @media (max-width: 1455px) {
            .footer {
                padding: 75px 40px;
            }
        }

        @media (max-width: 1100px) {
            .header .contentwrapper {
                padding: 0 0px !important;
            }
        }
        @media (max-width: 1000px) {
            .footer .contentwrapper .contentblock {
                flex: 1 1 calc(50% - 50px); /* 2 blokken naast elkaar */
            }
        }

        @media (min-width: 769px) {
            .scroll-to-top:hover {
                background-color: white;
                color: #006eb6;
                border: #006eb6 1px solid;
                transform: scale(1.2);
            }
        }

        @media (max-width: 768px) {

            .scroll-to-top:active {
                background-color: white;
                color: #006eb6;
                border: #006eb6 1px solid;
                transform: scale(1.2);
            }


            .menu-items {
        display: none !important;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: white;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); */


    }

    .menu-items.active {
        display: flex !important;
        flex-direction: column;
        margin: -1px 0 !important;
    }

    .menu-toggle {
        display: flex; /* Tonen op kleinere schermen */
        align-self: center;
    }
    
    .menu-items {
        display: none;
        flex-direction: column;
        text-align: center;
    }

    /* .menu-items.active {
        display: flex;
    } */

    .menu-items > a {
        font-size: 18px;
        padding: 15px;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
    }

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


            .footer .contentwrapper .contentblock {
                flex: 1 1 100%; /* 1 blok per regel */
            }

            .footer .contentwrapper .contentblock .logo > img {
                width: 300px;
                height: auto;
            }

            .image-banner {
                padding: 100px;
            }

            /* .header .logo img {
                width: 140px;
                height: auto;
                margin-left: 10px;
            } */

            .menu-items {
                align-items: center;
                display: flex;
                margin-right: 20px;
                gap: 10px;
            }


            .menu-items > a {
                font-size: 16px !important;
            }

            .logo img {
                width: 235px;
                margin-left: 10px;
            }
            /* Kleine aanpassingen voor gescrollde toestand */
            .scrolled .menu-items a {
                /* font-size: 10px; Kleinere font-size als gescrold is */
            }

            .scrolled .logo img {
                width: 205px; /* Kleinere logo-grootte als gescrold is */
                margin-left: 10px;
            }


            .header .contentwrapper {
                display: flex;
                justify-content: space-between;
                height: 75px;
                padding: 20px 0
            }


            .intro-text {
                padding: 15px 10px;
            }



            .images {
                padding: 35px 10px;
            }
            .images .contentwrapper {
                display: flex;
                flex-direction: column; /* Zorgt ervoor dat de items onder elkaar komen */
                gap: 15px;
            }
        
            .images .contentwrapper .image {
                background-size: cover;
                width: 100%; /* De afbeelding neemt nu de volledige breedte in */
                height: 200px; /* Je kunt deze aanpassen als je wilt */
            }
        
            .images .contentwrapper .image:nth-child(1) {
                background-image: url('../img/ontwikkelkaart.jpeg');
            }
        
            .images .contentwrapper .image:nth-child(2) {
                background-image: url('../img/impressieAmbachtsezoom.png');
            }
        
            .images .contentwrapper .image:nth-child(3) {
                background-image: url('../img/Luchtfoto_Ambachtsezoom.jpeg');
            }
        
            .images .contentwrapper .image:nth-child(4) {
                background-image: url('../img/Luchtfoto_Ambachtsezoom_kavels.jpeg');
            }


            .images h3 {
                font-size: 20px;
                margin: 0 0 20px;
            }


            

        }


.message{
    text-align: center;
    padding: 20px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
}
.success-message{
    color: green;
}
.success-error{
    color: red;
}