html {
    scroll-behavior: smooth;
}
body {
    background-color: rgb(239, 234, 226); /* Background color for the entire page */
    font-family: 'Poppins', sans-serif; /* Applying the new font */
}
.icon {
    width: 30px;  /* Smaller width for the icons */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image fits within the set width */
}


/* Section Background Color */
.section-background {
    background-color:  rgb(239, 234, 226); /* Ensure the section background is wheat */
}

/* Other CSS styles remain unchanged */
.hero_bg_box {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.hero_bg_box .img-box {
    width: 100%;
    height: 100%;
    filter: blur(2px);
}

.hero_bg_box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
}

/* Color theming */
.bg-primary-yellow {
    background-color: #fabd0b;
}

.bg-primary-blue {
    background-color: #84bad5;
}

.text-white {
    color: white;  
}

.text-black {
    color: black;
}

/* Button hover effects */
.hover-bg-yellow:hover {
    background-color: #e2a800;
}

.hover-bg-blue:hover {
    background-color: #6fa8d1;
}

.hover-bg-black:hover {
    background-color: #333;
    color: white;
}

/* Card hover effects */
.card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Styling for Gratis Proefles Button */
.btn-proefles {
    background-color: darkblue;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: bold;
    transition: background-color 0.3s ease;

}

.btn-proefles:hover {
    background-color: #6fa8d1;
    color: grey;
}

/* Hero Section Styling */
.hero-text {
    font-size: 3.5rem; /* Adjusted font size for the main title */
    font-weight: 700; /* Bold */
    font-family: 'Poppins', sans-serif; /* Apply the Poppins font */
}

.hero-subtext {
    font-size: 1.5rem; /* Adjusted the font size for the subtitle */
    margin-top: 1rem;
}

.hero-buttons {
    margin-top: 3rem;
}

/* Header Transparency */
header {
    position: absolute;
    width: 100%;
    z-index: 10;
    backdrop-filter: blur(2px);
}

.logo {
    width: 70px; /* Adjust size as needed */
    height: auto;
}

.header-title {
    font-size: 2.25rem; /* Increased size for header text */
    font-weight: bold;
}

html {
    scroll-behavior: smooth;
}

.addm {
    margin: .5rem 0px;
}
/* Ensure the menu is hidden on larger screens */
#menu {
display: block; /* Hide by default */
}

/* Show the menu when toggled */
#menu.active {
display: block; /* Show the menu */
}

/* Adjust mobile menu styles */
#mobile-menu {
display: none; 
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95); /* White background for dropdown */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
    z-index: 20; /* Ensure it sits above other content */
}



/* Contact Form Styles */
form input, form textarea {
transition: border-color 0.3s;
}

form input:focus, form textarea:focus {
border-color: #fabd0b; /* Focus border color */
outline: none; /* Remove default outline */
}

/* Optional: Add shadow effect on input fields */
form input, form textarea {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Zoom in animation for the image */
.img-box img {
width: 100%;
height: auto;
animation: zoomIn 5s ease-in-out forwards;
}

@keyframes zoomIn {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}

/* Text and buttons animation */
/* .hero-text, */
.hero-subtext {
opacity: 0; /* Ensure starting opacity is 0 */
animation: slideInRight 1s ease-out forwards;
}

.hero-buttons button.bg-primary-yellow {
opacity: 0; /* Start with opacity 0 */
animation: slideInLeft 1.5s ease-out forwards;
}

.hero-buttons button.bg-primary-blue {
opacity: 0; /* Start with opacity 0 */
animation: slideInRight 1.5s ease-out forwards;
}

/* Keyframes for sliding in */
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(100%); /* Start off-screen */
}
100% {
opacity: 1;
transform: translateX(0); /* End in place */
}
}

@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-100%); /* Start off-screen */
}
100% {
opacity: 1;
transform: translateX(0); /* End in place */
}
}
/* Update package animations for slower effect */
.card {
opacity: 0;
transform: translateY(20px); /* Start slightly below */
transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Slower transition */
}

.card.animate {
opacity: 1; /* Show the card */
transform: translateY(0); /* Move to original position */
}

/* Keeping the keyframes the same */
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes slideInBottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Fade in and slide up animation */
.fade-slide {
opacity: 0; /* Start hidden */
transform: translateY(20px); /* Start below */
transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transition effect */
}

.fade-slide.animate {
opacity: 1; /* Show the element */
transform: translateY(0); /* Move to original position */
}
@media (max-width: 600px) {
    /* .flexicon {
        flex-direction: row; /* Keep icons in a row on smaller screens */
     */

/* Header Title */
.header-title {
font-size: 1.70rem; /* Smaller font size on mobile */
}

.text-overlay {
max-width: 300px; /* Set max width for the overlay */
margin: 0 auto; /* Center the text overlay */
text-align: center; /* Center align text */
position: absolute; /* Ensure it sits over the image */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Adjust position */
top: 50%; /* Center vertically */
transform: translate(-50%, -50%); /* Center both vertically and horizontally */
}

.hero-text {
font-size: 2rem; /* Adjust font size for better readability */
}

.hero-subtext {
font-size: 1.2rem; /* Adjust subtitle font size */
}

.hero-buttons {
flex-direction: column; /* Stack buttons vertically */
margin-top: 1rem; /* Add space above the buttons */
}

.hero-buttons button {
width: 100%; /* Make buttons full width */
margin-bottom: 0.5rem; /* Space between buttons */
}
/* Adjust the Logo Size */
.logo {
width: 50px; /* Smaller logo on mobile */
}

/* Adjust Container Padding */
.container {
padding-left: 0.5rem; /* Less padding on mobile */
padding-right: 0.5rem; /* Less padding on mobile */
}

/* Card adjustments for mobile */
.card {
margin-bottom: 1rem; /* Space between cards on mobile */
}

/* Ensure flex items stack vertically on mobile */
nav ul {
flex-direction: column; /* Stack navigation items */
align-items: center; /* Center items */
}

/* Adjust the buttons in the hero section to be full width */
.hero-buttons button {
width: 100%; /* Full width buttons */
margin-bottom: 0.5rem; /* Space between buttons */
}
/* Show the hamburger menu */
.md\:hidden {
display: block; /* Show hamburger button on mobile */
}
#menu {
display: none; /* Hide by default */
}

#mobile-menu.active {
display: flex; /* Show mobile menu when toggled */
background-color: transparent; /* No background color */
box-shadow: none; /* Remove shadow */
}


/* Link styles for mobile menu */
#mobile-menu ul li a {
color: black; /* Change link color to black */
padding: 1rem; /* Add padding for touch targets */
}
.relative {
margin-top: 40px; /* Adjust margin for better spacing */
margin-bottom: 40px;
}

#hid{
display: none;
}
h3 {
font-size: 1.5rem; /* Adjust heading size for mobile */
}

p {
font-size: 1rem; /* Adjust paragraph size for mobile */
}

.text-white {
text-align: center; /* Center text on mobile */
}

.absolute {
position: relative; /* Change position to relative for mobile */
}

/* Add some background and padding for mobile box */
.mobile-box {
background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
border-radius: 0.5rem; /* Rounded corners */
padding: 20px; /* Padding inside the box */
}

#mybutton {
    position: relative;
    left: 8px;
}

}

.bg-babyblue {
background-color: #A0D3E8; /* Adjust this value to match your button's baby blue color */
}