/*UPDATED 20/10 01:00 */

@import url('satoshi.css');

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Satoshi-Regular;
    margin: 0; /* Remove default body margin */
    overflow-y: scroll; /* Ensure body can scroll */
}

header {
    position: fixed; /* Make the header stick to the top */
    top: 0;
    width: 100%; /* Ensure it spans the entire width */
    z-index: 10; /* Ensure it appears above other elements */
    background-color: rgba(255, 255, 255, 0); /* Optional: Add a slight background color */
    font-family: Satoshi-Medium;
}

.navcontainer {
    padding: 10px 20px; /* Adjust padding to fit your layout */
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
}


.nav {
    display: flex;
    justify-content: center; /* Center the entire navbar */
    align-items: center; /* Center items vertically */
    width: 100%; /* Full width */
    position: relative; /* Required for nav-right positioning */
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
}

.nav-left {
    position: absolute;
    left: 0;
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
}

.nav-right {
    position: absolute;
    right: 0;
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
}

.nav-left,
.nav-right {
    display: flex;
}

.nav-left a,
.nav-right a {
    text-decoration: none;
    color: #000; /* Link color */
    margin: 0 1rem; /* Space between links */
    padding: 0.5rem; /* Padding for better click area */
    border-radius: 2rem;
    background-color: white;
}

.nav-mid {
    display: flex;
    justify-content: center; /* Center the logo horizontally */
    flex: 1; /* Allow the logo to take available space */
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
}

.nav-mid img {
    height: 3.5rem; /* Set the logo height */
    object-fit: contain; /* Ensure the image fits well */
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
    background-color: white;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.2rem;
    border-radius: 1rem;
}

/* Dropdown styles */
.dropdown {
    display: none; /* Hidden by default */
    flex-direction: column; /* Stack items vertically */
    background-color: rgba(255, 255, 255, 0); /* Background color for dropdown */
    position: absolute; /* Positioning the dropdown */
    top: 68px; /* Adjust according to your navbar height */
    left: 0;
    right: 0;
    padding: 1rem 0; /* Padding for dropdown */
    opacity: 0; /* Start invisible */
    transform: translateY(-10px); /* Start with a slight upward shift */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Animation for opacity and transform */
    background-color: white;
    margin: 1%;
    border-radius: 1rem;
}

.dropdown.active {
    display: flex; /* Show dropdown when active */
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move into place */
    align-items: center;
}

.dropdown a {
    width: 90%; /* Ensure the background color covers full width */
    padding: 0.5rem 1rem; /* Padding for dropdown links */
    margin: 1%;
    color: #000; /* Link color */
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
    background-color: #f9f9f8;
    font-size: 1.3rem;
    border-radius: 1rem;
}

.dropdown a:hover {
    width: 90%; /* Ensure the background color covers full width */
    padding: 0.5rem 1rem; /* Padding for dropdown links */
    margin: 1%;
    color: #000; /* Link color */
    text-decoration: none;
    transition: background-color 0.3s ease; /* Smooth transition for hamburger icon color */
    background-color: #e6e6e6;
    font-size: 1.3rem;
    border-radius: 1rem;
}

/* Hamburger icon */
.nav-toggle {
    display: none; /* Hidden by default */
    cursor: pointer; /* Pointer on hover */
    transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
}

.banner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Ensure banner stays behind overlapping content */
}

#bannerVideo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire div */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.179); /* Dark transparent overlay */
    color: white;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 2em;
}

h4 {
    font-size: 1em;
}

.wrapper1 {
    color: white;
    background-color: #151515;
    position: relative;
    border-top-left-radius: 1rem; /* Radius for the top-left corner */
    border-top-right-radius: 1rem; /* Radius for the top-right corner */
    margin-top: -13%; /* Adjust this value to control overlap */
    z-index: 2; /* Ensure wrapper1 is on top of the banner */
    padding: 50px 20px; /* Adjust padding for content spacing */
}

.introductie {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper1 h1 {
    padding-left: 3%;
}

.containerlinks {
    width: 50%;
    padding-right: 20px;
}

.containerrecht {
    width: 50%;
    padding-right: 3%;
}

.box1 {
    z-index: 2;
    border-radius: 1rem;
    padding-top: 30%; /* Adjusted padding */
    margin: 0% 3%;
    background-size: cover; /* Ensures the image covers the entire box */
    background-position: center; /* Centers the image in the box */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit color from parent */
}

.box-h3 {
    font-family: Satoshi-Bold;
    margin-left: 2%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: hsl(346, 89%, 62%); /* Ensure the background color is set */
    color: hsl(344, 100%, 95%); /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.box-h4 {
    font-size: 1.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 2%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    background-color: hsl(344, 100%, 95%); /* Ensure the background color is set */
    color: hsl(346, 89%, 62%); /* Text color */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}

.arrow-icon {
    height: 1.5rem; /* Set height */
    width: auto; /* Maintain aspect ratio */
    margin-left: 0.5rem; /* Space between text and icon */
    fill: hsl(346, 89%, 62%); /* Change this to your desired color */
}


.wrapper2 {
    background-color: #151515;
    color: white;
    position: relative; /* Ensure position is set */
    z-index: 2; /* Higher than the banner */
}

.wrapper3 {
    background-color: #151515;
    color: white;
    text-align: center; /* Center align text */
    padding-top: 1rem;
    position: relative; /* Ensure position is set */
    z-index: 2; /* Higher than the banner */
}

.carousel {
    display: flex; /* Use flexbox to align items next to each other */
    overflow-x: auto; /* Allow horizontal scrolling */
    gap: 20px; /* Space between items */
    padding-left: 3%;
    padding-right: 3%;
}

/* Hide the scrollbar for the carousel */
.carousel::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
}

.carousel > div {
    flex: 0 0 auto; /* Prevent items from growing/shrinking */
    max-width: 300px; /* Set max width for carousel items */
    /* background-color: #fff; */ /* Background color for items */
    color: #ffffff; /* Text color */
    padding: 20px; /* Padding inside each item */
    border-radius: 1rem; /* Rounded corners */
}

.carousel h3 {
    margin: 0; /* Remove default margin */
}

.carousel a {
    display: block; /* Make link a block element */
    margin-top: 10px; /* Space above the link */
    text-decoration: none; /* Remove underline */
}

.carousel-container {
    position: relative; /* Positioning for the arrows */
    overflow: hidden; /* Hide scrollbar */
    width: 100%; /* Ensure it takes full width */
    height: 100%; /* Set height if needed */
}

/* Hide scrollbars in Firefox */
.carousel-container {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.arrow {
    background: transparent; /* Transparent background */
    border: none; /* No border */
    cursor: pointer; /* Change cursor to pointer */
    position: absolute; /* Position the buttons */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust vertical position */
    z-index: 3; /* Ensure arrows are above the carousel */
    width: 33px; /* Set fixed width for circle */
    height: 33px; /* Set fixed height for circle */
    border-radius: 50%; /* Make button circular */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: white;
}

.arrow.left {
    left: 10px; /* Adjust as needed */
}

.arrow.right {
    right: 10px; /* Adjust as needed */
}

.arrow-icon {
    fill: #ffffff; /* Color for the arrows */
    width: 24px; /* Size of the arrows */
    height: 24px; /* Size of the arrows */
    margin: 0; /* Remove default margins */
    display: block; /* Ensure it behaves as a block element */
}


.box2 {
    z-index: 2;
    border-radius: 1rem;
    padding-top: 13rem;
    margin: 2% 0.7% 0% 3%; /* Space between the boxes */
    background-color: #fff; /* Set background color for boxes */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit color from parent */
    flex: 1; /* Ensure both boxes take equal space */
    background-size: cover; /* Ensure the image covers the box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
}

.box3 {
    z-index: 2;
    padding-bottom: 10rem;
    padding-top: 1%;
    margin: 2% 3% 0% 0.7%; /* Space between the boxes */
    background-color: #fff; /* Set background color for boxes */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit color from parent */
    flex: 1; /* Ensure both boxes take equal space */
    background-size: cover; /* Ensure the image covers the box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
    border-radius: 1rem;
}

.h3b2 {
    font-family: Satoshi-Bold;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: hsl(310, 19%, 39%); /* Ensure the background color is set */
    color: hsl(0, 0%, 92%); /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.h4b2 {
    font-size: 1.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    background-color: hsl(0, 0%, 92%); /* Ensure the background color is set */
    color: hsl(310, 19%, 39%); /* Text color */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}

.h3b3 {
    font-family: Satoshi-Bold;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: hsl(54, 80%, 69%); /* Ensure the background color is set */
    color: #6b7e0d; /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.h4b3 {
    font-size: 1.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    background-color: #6b7e0d; /* Ensure the background color is set */
    color: hsl(54, 98%, 61%); /* Text color */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}

.wrapper4 {
    background-color: #151515;
    color: white;
    display: flex; /* Align boxes next to each other */
    justify-content: space-between; /* Space between the boxes */
    padding-bottom: 1rem;
}

/* Wrapper Background Color */
.wrapper5 {
    display: flex;
    justify-content: space-between;
    background-color: #151515; /* Updated background color */
    padding-right: 3%;
    padding-left: 3%;
    width: 100%;
    min-height: 15rem;
}

/* Left Text Box Styling */
.box5 {
    flex: 1;
    display: flex;
    align-items: center;
    padding-right: 1.5%;
}

.box5 h2 {
    color: #fff; /* Adjust text color to contrast with dark background */
    margin: 0;
}

/* Right Grid Box Styling */
.box6 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3x3 grid */
    gap: 3%;
    align-items: center;
}

/* Individual Client Logo Items with Fixed Size and Rounded Corners */
.klant-item {
    width: 100%; /* Fixed width */
    height: 100%; /* Fixed height */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Background color for the box */
    border-radius: 1rem; /* Rounded corners */
    border: solid 10px white;
}

/* Wrapper Background Color like Wrapper5 */
.wrapper6 {
    display: flex;
    justify-content: space-between; /* Align box7 and contact side by side */
    padding: 3%;
    background-color: #151515; /* Your existing background color */
    width: 100%; /* Make wrapper6 fit the full width of the page */
}

/* Box7 Styling */
.box7 {
    flex: 1; /* Take up available space */
    background-size: cover; /* Cover the whole box */
    background-position: center; /* Center the image */
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    color: #fff; /* Text color */
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.box7 > h3 {
    font-family: Satoshi-Bold;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: #553110; /* Ensure the background color is set */
    color: hsl(0, 0%, 92%); /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.box7 > h4 {
    font-size: 1.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    background-color: hsl(0, 0%, 92%); /* Ensure the background color is set */
    color: #553110; /* Text color */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}


/* Contact Form Styling */
.contact {
    flex: 1; /* Take up available space */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.contact form {
    background: #fff; /* White background for the form */
    padding: 20px; /* Padding around the form */
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.contact label {
    display: block; /* Make labels block elements */
}

.contact select {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
}

.contact input,
.contact textarea {
    width: 100%; /* Full width */
    padding: 0.5rem; /* Padding inside fields */
    margin-bottom: 15px; /* Space below fields */
    border: 1px solid #ccc; /* Border style */
    border-radius: 0.5rem; /* Rounded corners */
}

.contact button {
    padding: 10px 15px; /* Padding for the button */
    background-color: #000000; /* Button color */
    color: #fff; /* Text color */
    border: none; /* No border */
    border-radius: 0.5rem; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s; /* Transition for hover effect */
}

.contact button:hover {
    background-color: #424242; /* Darker blue on hover */
}

/* ABOUT */
.titlebanner {
    position: relative;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: #EFECE7;
    align-items: flex-start;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.titlebanner h1 {
    font-family: Satoshi-Bold;
    margin-left: 2%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 2rem;
    text-align: left;
    display: inline-block;
    margin-right: 3%;
}

.titlebanner a {
    font-size: 1.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 2%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0.3rem;
    background-color: #ffffff;
    color: black;
    display: flex;
    align-items: center;
    margin-right: 3%;
}

.sec1 {
    padding-left: 3%;
    padding-top: 1.5%;
    padding-bottom: 2%;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    z-index: 2; /* Higher z-index for visibility above the next section */
    position: relative; /* Ensure the title cutoff can overlap */
    background-color: white;
}

.sec2 {
    padding-top: 1.5%;
    margin-top: -1rem; /* Overlap the title cutoff */
    padding-top: 1rem;
    background-color: #151515; /* Background color */
    z-index: 1; /* Lower z-index than the title cutoff */
    position: relative; /* Ensure this element is positioned relative to the cutoff */
    color: #EFECE7;
    padding-bottom: 1rem;
}

.sec2 h1 {
    padding-left: 3%;
    color: #EFECE7;
}

.sec2 h4 {
    font-size: 1.3rem;
    padding-left: 1.5%;
    color: #151515;
    padding-bottom: 0.3rem;
    padding-top: 1.5%;
}

.sec2 p {
    padding-left: 1.5%;
    color: #151515;
    padding-bottom: 0.3rem;
}

.portfolio {
    display: flex; /* Use Flexbox for alignment */
    padding-left: 3%;
    padding-right: 3%;
    border-radius: 1rem; /* Optional: Add border radius to the portfolio section */
    padding-bottom: 0.6rem;
}

.portfoliolinks {
    background-size: cover; /* Cover the entire box with the image */
    background-position: center; /* Center the image */
    border-top-left-radius: 1rem; /* Rounded corners */
    border-bottom-left-radius: 1rem; /* Rounded corners */
    color: #fff; /* Text color */
    display: flex; /* Use flexbox for centering */
    width: 35%; /* Width of the portfolio link section */
    align-items: flex-start; /* Center vertically */
    padding: 1rem; /* Padding around the content */
    position: relative; /* Set position relative for the pseudo-element */
}

.portfoliolinks h3 {
    font-size: 1.5rem;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0.3rem;
    background-color: #ffffff;
    color: black;
    margin-right: 3%;
}

.portfoliorechts {
    flex: 1;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: #ffffff;
    color: #151515;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding-right: 1%;
}

.related-pages-heading {
    background-color: #151515;
    color: #EFECE7;
    padding-left: 3%;
    padding-top: 1%;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    margin-top: -1rem;
    z-index: 4;
    position: relative;
}

.wrappervid {
    color: white;
    background-color: #151515;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 3%;
}

.vid video {
    width: 100%;  /* Fit the video to the width of the screen */
    border-radius: 1rem;
    margin-top: 0.4rem;
}

.vid video::-webkit-media-controls-timeline {
    display: none;  /* Hide the progress bar in Chrome/Safari */
}


/* JOBS */

.vacatureswrap {
    background-color: #151515;
}

.vacatureswrap h1 {
    color: #EFECE7;
    padding-left: 3%;
}

.vacatures-badge {
    background-color: red;
    color: white;
    font-size: 1rem;
    border-radius: 50%;
    padding: 0.15rem 0.5rem;
    vertical-align: middle;
}

.vacature-list {
    padding: 3%;
}

.vacature-item {
    padding-bottom: 0.5rem;
}

.vacature-title {
    cursor: pointer;
    background-color: #EEECE6;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}

.vacature-description {
    display: none; /* Hidden by default */
    margin-top: 0.5rem;
    background-color: #EEECE6;
    padding: 1rem;
    border-radius: 0.5rem;
}

.vacature-description ul {
    list-style-type: square;
    list-style-position: inside;
}

.vacature-description li {
    padding-bottom: 0.2rem;
    padding-left: 0.5rem;
}

.arrowdown-icon {
    transition: transform 0.3s ease;
}

.arrowdown-icon.rotate {
    transform: rotate(90deg); /* Points right */
}

/*BLOGPOST*/

.blogbanner {
    position: relative;
    padding-top: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: #EFECE7;
    align-items: flex-start;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-size: cover; /* Ensure the image covers the box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
}

.blogbanner h1 {
    font-family: Satoshi-Bold;
    margin-left: 2%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 2rem;
    text-align: left;
    display: inline-block;
    margin-right: 2%;
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: hsl(310, 19%, 39%); /* Ensure the background color is set */
    color: hsl(0, 0%, 92%); /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.blogbanner a {
    font-size: 1.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 2%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    margin-right: 3%;
}

.blogbox {
    margin-top: -1rem;
    padding-top: 1.2rem;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-bottom: 0.5rem;
}

.blogtext {
    margin-top: 0.5rem;
    background-color: #EEECE6;
    padding: 1rem;
    border-radius: 0.5rem;
}

.blogtext h1 {
    font-family: Satoshi-Bold;
    font-size: 2rem;
    padding-bottom: 1.5rem;
}

.blogtext h2 {
    font-family: Satoshi-Bold;
    font-size: 1.5rem;
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
}

.italic {
    font-style: italic;
}

.bold {
    font-family: Satoshi-Bold;
}



/* Responsive styles */
@media (max-width: 700px) {
    .nav-left,
    .nav-right {
        display: none; /* Hide left and right sections */
        transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
    }

    .nav-mid {
        flex: 1; /* Center the logo */
        transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
    }

    .nav-toggle {
        display: block; /* Show hamburger icon */
        font-size: 2rem; /* Increase icon size */
        color: #000; /* Hamburger icon color */
        margin-left: auto; /* Push hamburger icon to the right */
        transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
        background-color: white;
        border-radius: 1rem;
        padding-bottom: 0.3rem; /* Adjust bottom padding if needed */
        padding-left: 0.5rem; /* Adjust padding on left/right for better fit */
        padding-right: 0.5rem;
    }
    

    .nav-mid img {
        height: 3rem; /* Set the logo height */
        object-fit: contain; /* Ensure the image fits well */
        transition: color 0.3s ease; /* Smooth transition for hamburger icon color */
        background-color: white;
        padding-top: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 0.2rem;
        border-radius: 1rem;
    }

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1em;
}

.wrapper1 {
    color: white;
    background-color: #151515;
    position: relative;
    border-top-left-radius: 1rem; /* Radius for the top-left corner */
    border-top-right-radius: 1rem; /* Radius for the top-right corner */
    margin-top: -7%; /* Adjust this value to control overlap */
    z-index: 2; /* Ensure wrapper1 is on top of the banner */
    padding: 3%; /* Adjust padding for content spacing */
    padding-bottom: 1rem;
}

.introductie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.wrapper1 h1 {
    padding-left: 0%;
}

.containerlinks {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
}

.containerrecht {
    width: 100%;
}

.box1 {
    z-index: 2;
    border-radius: 1rem;
    padding-top: 30%; /* Adjusted padding */
    margin: 0% 3%;
    background-size: cover; /* Ensures the image covers the entire box */
    background-position: center; /* Centers the image in the box */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit color from parent */
}

.box-h3 {
    font-family: Satoshi-Bold;
    margin-left: 2%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: hsl(346, 89%, 62%); /* Ensure the background color is set */
    color: hsl(344, 100%, 95%); /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.box-h4 {
    font-size: 1.2rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 2%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    background-color: hsl(344, 100%, 95%); /* Ensure the background color is set */
    color: hsl(346, 89%, 62%); /* Text color */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}

.arrow-icon {
    height: 1.5rem; /* Set height */
    width: auto; /* Maintain aspect ratio */
    margin-left: 0.5rem; /* Space between text and icon */
    fill: hsl(346, 89%, 62%); /* Change this to your desired color */
}


.wrapper2 {
    background-color: #151515;
    color: white;
    position: relative; /* Ensure position is set */
    z-index: 2; /* Higher than the banner */
}

.wrapper3 {
    background-color: #151515;
    color: white;
    text-align: center; /* Center align text */
    padding-top: 1rem;
    position: relative; /* Ensure position is set */
    z-index: 2; /* Higher than the banner */
}

.carousel {
    display: flex; /* Use flexbox to align items next to each other */
    overflow-x: auto; /* Allow horizontal scrolling */
    gap: 20px; /* Space between items */
    padding-left: 3%;
    padding-right: 3%;
}

/* Hide the scrollbar for the carousel */
.carousel::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
}

.carousel > div {
    flex: 0 0 auto; /* Prevent items from growing/shrinking */
    max-width: 300px; /* Set max width for carousel items */
    /* background-color: #fff; */ /* Background color for items */
    color: #ffffff; /* Text color */
    padding: 20px; /* Padding inside each item */
    border-radius: 1rem; /* Rounded corners */
}

.carousel h3 {
    margin: 0; /* Remove default margin */
}

.carousel a {
    display: block; /* Make link a block element */
    margin-top: 10px; /* Space above the link */
    text-decoration: none; /* Remove underline */
}

.carousel-container {
    position: relative; /* Positioning for the arrows */
    overflow: hidden; /* Hide scrollbar */
    width: 100%; /* Ensure it takes full width */
    height: 100%; /* Set height if needed */
}

/* Hide scrollbars in Firefox */
.carousel-container {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.arrow {
    background: transparent; /* Transparent background */
    border: none; /* No border */
    cursor: pointer; /* Change cursor to pointer */
    position: absolute; /* Position the buttons */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust vertical position */
    z-index: 3; /* Ensure arrows are above the carousel */
    width: 33px; /* Set fixed width for circle */
    height: 33px; /* Set fixed height for circle */
    border-radius: 50%; /* Make button circular */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: white;
}

.arrow.left {
    left: 10px; /* Adjust as needed */
}

.arrow.right {
    right: 10px; /* Adjust as needed */
}

.arrow-icon {
    fill: #ffffff; /* Color for the arrows */
    width: 24px; /* Size of the arrows */
    height: 24px; /* Size of the arrows */
    margin: 0; /* Remove default margins */
    display: block; /* Ensure it behaves as a block element */
}


.box2 {
    z-index: 2;
    border-radius: 1rem;
    padding-top: 13rem;
    margin: 2% 0.7% 0% 3%; /* Space between the boxes */
    background-color: #fff; /* Set background color for boxes */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit color from parent */
    flex: 1; /* Ensure both boxes take equal space */
    background-size: cover; /* Ensure the image covers the box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
}

.box3 {
    z-index: 2;
    padding-bottom: 10rem;
    padding-top: 1%;
    margin: 2% 3% 0% 0.7%; /* Space between the boxes */
    background-color: #fff; /* Set background color for boxes */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit color from parent */
    flex: 1; /* Ensure both boxes take equal space */
    background-size: cover; /* Ensure the image covers the box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
    border-radius: 1rem;
}

.h3b2 {
    font-family: Satoshi-Bold;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: hsl(310, 19%, 39%); /* Ensure the background color is set */
    color: hsl(0, 0%, 92%); /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.h4b2 {
    font-size: 1.2rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    background-color: hsl(0, 0%, 92%); /* Ensure the background color is set */
    color: hsl(310, 19%, 39%); /* Text color */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}

.h3b3 {
    font-family: Satoshi-Bold;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    background-color: hsl(54, 80%, 69%); /* Ensure the background color is set */
    color: #6b7e0d; /* Text color */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.h4b3 {
    font-size: 1.2rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    background-color: #6b7e0d; /* Ensure the background color is set */
    color: hsl(54, 98%, 61%); /* Text color */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}

.wrapper4 {
    background-color: #151515;
    color: white;
    display: flex; /* Align boxes next to each other */
    justify-content: space-between; /* Space between the boxes */
    padding-bottom: 1rem;
}

/* Wrapper Background Color */
.wrapper5 {
    display: flex;
    justify-content: space-between;
    background-color: #151515; /* Updated background color */
    padding-right: 3%;
    padding-left: 3%;
    width: 100%;
    min-height: 15rem;
}

/* Left Text Box Styling */
.box5 {
    flex: 1;
    display: flex;
    align-items: center;
    padding-right: 1.5%;
}

.box5 h2 {
    color: #fff; /* Adjust text color to contrast with dark background */
    margin: 0;
}

/* Right Grid Box Styling */
.box6 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3x3 grid */
    gap: 3%;
    align-items: center;
}

/* Individual Client Logo Items with Fixed Size and Rounded Corners */
.klant-item {
    width: 100%; /* Fixed width */
    height: 100%; /* Fixed height */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Background color for the box */
    border-radius: 1rem; /* Rounded corners */
    border: solid 10px white;
}

/* Wrapper6 Styling */
.wrapper6 {
    display: flex;
    flex-direction: column; /* Stack the boxes vertically */
    align-items: center;
    justify-content: center;
}

/* Box7 Styling */
.box7 {
    flex: 1;
    background-size: cover;
    background-position: center;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    color: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.box7 > h3 {
    font-family: Satoshi-Bold;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 2rem; /* Keep the rounded corners */
    text-align: left; /* Ensure text is left-aligned */
    display: inline-block; /* Makes the box hug the content */
    margin-right: 3%;
}

.box7 > h4 {
    font-size: 1.2rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    margin-left: 3%; /* Align the box with the left side of the parent */
    padding-left: 10px; /* Space between the text and the border */
    padding-right: 10px; /* Optional: add right padding for symmetry */
    border-radius: 0.3rem; /* Keep the rounded corners */
    display: flex; /* Use flexbox to center items */
    align-items: center; /* Center items vertically */
    margin-right: 3%;
}


/* Contact Form Styling */
.contact {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    width: 100%; /* Full width */
}

.contact label {
    display: block;
    margin-bottom: 0;
}

.contact input,
.contact textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 4px;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
}

.contact button {
    padding: 10px 15px;
    background-color: #000000;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact button:hover {
    background-color: #424242;
}

.contact form {
    background: #fff;
    padding: 0;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

}