/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 13 2026 | 21:05:03 */
/* Custom Menu Icon Styling */
.custom-menu-icon {
    border-radius: 5px;
    background-color: #1E9ED8;
    width: 45px;
    padding: 10px;
    cursor: pointer;
    z-index: 1100;
}

.custom-menu-bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
}

/* Add hover effect for menu icon */
.custom-menu-icon:hover {
    background-color: #1E5190; /* Orange from logo */
}

/* Custom Dropdown Menu Styling */
.custom-menu-dropdown {
    display: none;
    background-color: #fff;
    color: #333;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1000;
    padding: 20px;
    text-align: left;
}

.custom-menu-dropdown .custom-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-menu-dropdown .custom-menu-header h2 {
    font-size: 24px;
    font-weight: bold;
    color: #0155FF;
    margin-bottom: 20px;
}

/* Custom Close Button Styling */
.custom-close-btn {
    font-size: 36px;
    color: #333;
    cursor: pointer;
}

/* Custom Menu List Styling */
.custom-menu-dropdown ul {
    list-style-type: none;
    padding: 0;
}

.custom-menu-dropdown ul li {
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    display: block;
    justify-content: space-between;
    align-items: center;
    position: relative;
}



.custom-menu-dropdown ul li a {
    color: #333;
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    width: 85%;
}

/* Hover effect for menu links */
.custom-menu-dropdown ul li a:hover {
    color: #1E9ED8; /* Blue from logo */
}

/* Active menu item */
.custom-menu-dropdown ul li.active a {
    color: #FF7300; /* Orange from logo */
}

/* Custom Dropdown Icon (Arrow) with Circle */
.custom-menu-dropdown ul li .custom-arrow-container {
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    margin-left: 10px;
    float: right;
}

.custom-menu-dropdown ul li .custom-arrow {
    width: 14px;
    height: 14px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/130/130906.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.custom-menu-dropdown ul li .custom-arrow.open {
    background-image: url('https://cdn-icons-png.flaticon.com/512/130/130906.png');
}

.custom-menu-dropdown ul li .custom-arrow.close {
    background-image: url('https://cdn-icons-png.flaticon.com/512/130/130884.png');
}

/* Custom Submenu Links */
.custom-submenu-links {
    display: none;
    list-style-type: none;
    padding-left: 20px;
    margin-top: 10px;
}

.custom-submenu-links li {
    margin-bottom: 10px;
}

/* Ensure font size is smaller for submenu links */
.custom-submenu-links li a {
    font-size: 18px !important;  /* Set smaller font size for submenu links */
    margin-top: 10px; /* Add margin at the top for spacing */
}

/* Custom Small Links Section */
.custom-small-links {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
}

.custom-small-links a {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
}

/* Hover effect for small links */
.custom-small-links a:hover {
    text-decoration: underline;
    color: #1E5190; /* Blue from logo */
}

/* Custom Button Styling at the Bottom */
.custom-signup-btn {
    background-color: #1E5190;
    color: white;
    text-decoration: none;
    padding: 20px 40px;
    display: block;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

.custom-signup-btn:hover {
    background-color: #1E9ED8; /* Blue from logo */
}

/* Ensure custom submenu shows when parent is clicked */
.custom-menu-dropdown ul li.active .custom-submenu-links {
    display: block;
}





.card {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 0 15px 0 0; /* Only top-right corner is rounded */
    display: flex;
    align-items: flex-end;
}

.card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area */
    background-color: white; /* Sets the image background to white */
    transition: transform 0.3s ease; /* Smooth zoom transition */
    z-index: 0; /* Ensure the image is behind the content */
}

.card:hover .card-img {
    transform: scale(1.1); /* Zoom the image on hover */
    color: #1E9ED8;
}

.overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    background-color: #1E9ED8;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    padding-left: 20px;
    z-index: 1; /* Ensure the overlay stays on top */
    transition: background-color 0.3s ease;
}

/* Hover effect: change background color only */
.card:hover .overlay {
    background-color: #1E5190; /* Add blue color on hover */
}

.overlay img {
    width: 30px;
    margin-right: 20px;
}

.overlay h3 {
    font-family: poppins;
    font-size: 16px;
    margin: 0;
    font-weight: 600;
    margin-left: 20px;
    color: white;
}




.wpcf7 input.wpcf7-date {
    width: 100%;
    padding: 15px;
    margin-bottom: 0px;
    font-size: 16px;
    background-color: #F3F3F3;
    color: #888888 !important; /* Ensure this color applies */
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    font-weight: normal;
}

.wpcf7 input.wpcf7-date::placeholder {
    color: #888888 !important; /* Force placeholder color */
    opacity: 1 !important;
}

.wpcf7 input.wpcf7-date::-webkit-datetime-edit {
    color: #888888 !important;
}

.wpcf7 input.wpcf7-date::-webkit-calendar-picker-indicator {
    opacity: 0.5; /* You can adjust the appearance of the calendar picker */
}

.wpcf7 input.wpcf7-date::-webkit-inner-spin-button {
    display: none; /* Hide the spin button */
}
      



textarea.cf7-full-width {
    width: 100%;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width */
	background-color:#F3F3F3;
}

.bts-container {
    background-color: white;
}
.bts-container {
    border-radius: 50px 0px 0px 0px;
    margin-top: -80px !important;
    margin-bottom: 20px !important;
    padding: 10px;
    color: white !important;
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
    text-align: center; 
    background-color: #1E9ED8;
    width: 100%;
    
}

@media (max-width: 768px) {
    .bts-container{
    font-size: 30px;
}
}
 
 
@media (max-width: 480px) {
    .bts-container{
    font-size: 20px !important; 
}
}
 .bts-aanmeldformulier-title{
     text-align: center;
     color: #1E5190;
     
 }

@media (max-width: 768px) {
    .bts-aanmeldformulier-title{
    font-size: 30px;
}
}
 
 
@media (max-width: 480px) {
    .bts-aanmeldformulier-title{
    font-size: 20px;
}
}    

/* General Row Styling */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  
    width: 100%; /* Ensure rows take up full container width */
    box-sizing: border-box;
}

/* Full-width Row Styling for Submit Button */
.form-row.full-width {
    width: 100%;
    
    padding: 0;
    box-sizing: border-box; /* Ensure padding and borders are included */
}

/* Styling for three columns of 33.33% for desktop and tablet */
.form-row.three-cols .form-column {
    flex: 1 1 calc(33.33% - 20px);
    min-width: 0; /* Prevent overflow */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .form-row.three-cols .form-column {
        flex: 1 1 calc(33.33% - 20px); /* Ensure consistent three-column layout on tablets */
    }
}
@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
    }
    .form-row > * {
        flex: 1 1 100% ;
        margin-right: 0; /* Remove margin for better alignment */
    }
}

/* Only for two columns of 50% (like First Name and Last Name) */
.form-row.two-cols .form-column {
    flex: 1 1 calc(50% - 10px);
}

/* General Form Wrapper Styling */
.wpcf7 {
    width: 100%;
    margin: 0 auto;
    background-color: rgba(249, 249, 249, 0.8); /* Semi-transparent background color */
    padding: 20px;
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border-radius: 10px; /* Optional: adds rounded corners */
}


/* Input Fields Styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select {
    width: 100%;
    padding: 15px;
    margin-bottom: 0px;
    font-size: 16px;
    background-color: #F3F3F3;
    color: #888888;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    font-weight: normal;
	
}

/* Placeholder Text Styling */
.wpcf7 input::placeholder,
.wpcf7 select::placeholder {
    color: #888888;
    opacity: 1; /* Ensure placeholder is visible */
}

/* Dropdown Styling */
.wpcf7 select {
    
    appearance: none; /* Remove default dropdown icon */
    padding-right: 40px; /* Space for the custom arrow */
    position: relative;
    background-color: #F3F3F3;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5z"/></svg>'); /* SVG arrow */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Position arrow to the right */
    color: 888888;
}

/* Submit Row Styling */
/* Submit Row Styling */
.submit-row {
    width: 100% !important; /* Ensure container is also full width */
    margin: 0; /* Remove margin for alignment */
    padding: 0;
    box-sizing: border-box; /* Include padding and borders in width calculations */
}

.submit-row input[type="submit"] {
    flex: 1 1 100%; /* Allow the button to fill the entire width of the parent */
    max-width: 100%; /* Prevent the button from exceeding the parent width */
}

/* Submit Button Styling */
form.wpcf7-form input[type="submit"] {
    width: 100% !important;
    padding: 15px !important;
    background-color: #1E5190 !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: none !important;
  
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    box-sizing: border-box !important;
    display: block !important;
    
}

/* Button Hover Styling */
.wpcf7 input[type="submit"]:hover {
    background-color: #00cc00; /* Darker green on hover */
}

/* WhatsApp Button Styling for CF7 */
.whatsapp-button-container {
    text-align: center !important;
    margin-top: -20px !important;
}

.whatsapp-link {
    display: inline-flex !important;
    align-items: center !important;
    color: #ffa500 !important; /* Orange color for text */
    text-decoration: none !important; /* Remove underline */
    font-weight: bold !important;
    font-size: 1.1em !important; /* Slightly larger font size */
    transition: color 0.3s ease !important;
    line-height: 1.5 !important;
}

.whatsapp-link:hover {
    color: #ff8c00 !important; /* Darker orange on hover */
}

.whatsapp-icon-container {
    display: inline-block;
    vertical-align: middle;
}

.whatsapp-icon {
    width: 15px !important; /* Increased size for better visibility */
    height: 15px !important;
    margin-right: 5px !important; /* Add space between icon and text */
}

/* Mobile Styles */
@media (max-width: 767px) {
    .whatsapp-link { font-size: 0.9em !important;}
    
}


@media (max-width: 468px) {
    .bts-form-row {
        display: flex;
        flex-direction: column;
    }

    .bts-form-column {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .bts-three-cols .bts-form-column,
    .bts-two-cols .bts-form-column {
        flex: 1 1 100% !important;
    }
}

input::placeholder {
    color: #888888 !important;
}

.bts-form-row {
        gap: 20px; /* Default gap for larger screens */
    }

    /* Media query for mobile devices */
    @media (max-width: 768px) {
        .bts-form-row {
           
            gap: 0px; /* Smaller gap for mobile devices */
        }