/* 
 Theme Name:     Divi Child
 Author:         DiviChild
 Author URI:     https://mijnvoorbeeldsite.be/eurinstal/
 Template:       Divi
 Version:        v.01
 Description:   A Child Theme built using the elegantmarketplace.com Child theme maker
Developed by Andrew Palmer for Elegant Marketplace www.elegantmarketplace.com Free to use and duplicate as many times as you like
 Wordpress Version: 5.9.12
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */

/* tijdelijk verborgen items */
.tijdelijk-verborgen {
	display: none !important;
}



/* Sticky Contact Button */
#sticky-section {
    position: fixed;
    top: 45vh;
    right: 50px;
    z-index: 9999999;
    height: 50px;
    width: 50px;
/*  overflow: hidden;*/
    border-radius: 30px;
    background-color: #d82c2e;
/*	background-color: #AE1C22;*/
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    display: flex;
/*  align-items: center; */
    padding: 0;
}

.sticky-button-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    color: #ffffff;
    text-decoration: none;
    padding: 0;
    position: relative;
}

.sticky-item.sticky-img {
    z-index: 2;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(45deg, #bb2026, #aa1c21);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.3s ease-in-out, margin-left 0.3s ease-in-out, border 0.1s ease;
	box-sizing: border-box;
	border: 5px solid transparent;
	transform: translate(2.5px, -2.5px);
}

.sticky-item.sticky-img img {
    width: 60%;
    height: auto;
	transition: width 0.3s ease-in-out;
}

.sticky-item.sticky-email {
    z-index: 1;
    white-space: nowrap;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    opacity: 0;
    max-width: 0;
    padding-right: 0;
	padding-left: 15px;
    transition: opacity 0.3s ease-out, max-width 0.3s ease-out, padding-right 0.3s ease-out; /* Alle te animeren eigenschappen */
    flex-grow: 1;
    min-width: 0;
	margin-right: 5px;
}

#sticky-section:hover {
    width: 225px;
}

#sticky-section:hover .sticky-img {
    border: 5px solid white;
}

#sticky-section:hover .sticky-item.sticky-email {
    opacity: 1;
/*	height: 100%;*/
    max-width: 100%;
   /* padding-right: 10px; */
}

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


#menu-main-nav li + li {
    margin-left: 20px;
}

#menu-main-nav li:last-child > a {
/*    border: 2px solid #000;*/
	border: 2px solid #d23941;
    border-radius: 8px;
    padding: 14px 24px !important;
	color: #d23941 !important;
}

/* pijl naast geselecteerde menu nav */

/* Styling voor de pijl die verschijnt bij hover */
#menu-main-nav li:not(.current-menu-item):not(:last-child) > a::before {
    content: ''; /* Leeg content attribuut */
    width: 10px;
    height: 10px;
    background-image: url('http://mijnvoorbeeldsite.be/eurinstal/wp-content/uploads/2025/10/image-64.png'); /* JOUW SVG URL */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    
    opacity: 0; /* Standaard onzichtbaar */
    transform: translateX(-10px); /* Begin iets naar links verschoven */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Soepele animatie */
}

/* De pijl verschijnt en beweegt naar rechts bij hover */
#menu-main-nav li:not(.current-menu-item):not(:last-child) > a:hover::before {
    opacity: 1; /* Wordt zichtbaar */
    transform: translateX(0); /* Schuift naar zijn normale positie */
}

/* Belangrijke correctie/aanvulling voor de <a> tags zelf */
#menu-main-nav li:not(.current-menu-item):not(:last-child) > a {
    display: inline-flex; /* Nodig voor correcte positionering van ::before */
    align-items: center; /* Centreert de tekst en pijl verticaal */
    /* Optioneel: voeg hier andere basisstijlen toe voor normale links */
    /* color: #333; */
    /* text-decoration: none; */
}


/* --- Bestaande regels voor de reeds geselecteerde (huidige) pagina --- */

/* Tekst vet maken voor de huidige pagina */
#menu-main-nav .current-menu-item > a {
    font-weight: bold;
    display: inline-flex; /* Zorg dat dit ook inline-flex is voor consistente uitlijning */
    align-items: center;
}

#menu-main-nav li.current-menu-item > a:hover {
	color: black !important;
	opacity: 1 !important;
}

/* Pijl toevoegen aan de huidige pagina (altijd zichtbaar) */
#menu-main-nav .current-menu-item > a::before { /* Gebruik ::before voor consistentie */
    content: ''; /* Leeg content attribuut */
    width: 10px;
    height: 10px;
    background-image: url('http://mijnvoorbeeldsite.be/eurinstal/wp-content/uploads/2025/10/image-64.png'); /* JOUW SVG URL */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    
    opacity: 1; /* Altijd zichtbaar */
    transform: translateX(0); /* Altijd op normale positie */
    /* Geen transition hier als het altijd zichtbaar is, tenzij je een fade-in wilt bij pagelading */
}

/* --- Bestaande regels voor de "Contact" pagina als deze actief is --- */
#menu-main-nav li:last-child.current-menu-item > a {
    /*background-color: black;*/ /* Standaard achtergrondkleur als actief, maar niet gehovered */
	background-color: #B7252D;
    color: white !important;
    font-weight: 500;
    
/*    border: 1px solid black;*/
	border: 1px solid #d23941;
    border-radius: 8px;
    padding: 14px 24px;
    
    transition: background-color 0.3s ease; /* Voeg een soepele overgang toe voor de achtergrondkleur */
}

/* HOVER-staat voor de "Contact" pagina wanneer deze ACTIEF is */
#menu-main-nav li:last-child > a:hover {
    /* background-color: rgba(0, 0, 0, 0.7); /* De gewenste achtergrondkleur met 0.7 opaciteit bij hover */
	background-color: rgba(183, 37, 45, 1) !important;
    color: white !important; /* Tekstkleur blijft wit bij hover */
	border-color: transparent;
    /* eventueel andere hover stijlen hier, bijv. border-color: rgba(0,0,0,0.7); */
}

/* Zorg ervoor dat de pijl wordt VERWIJDERD voor de "Contact" pagina als deze actief is */
#menu-main-nav li:last-child.current-menu-item > a::before {
    content: none;
    width: 0;
    margin-right: 0;
}

/* --- Zorg ervoor dat de "Contact" link (als hij NIET actief is) GEEN pijl krijgt bij hover --- */
/* Dit wordt al afgedekt door de :not(:last-child) in de hover selector bovenaan. */
/* Mocht je toch problemen hebben, kun je expliciet een regel toevoegen: */
#menu-main-nav li:last-child > a:hover::before {
   /* opacity: 0 !important;*/
    transform: translateX(-10px) !important;
}


#menu-main-nav li:last-child.current-menu-item > a:hover {
/*	background-color: black !important; */
	background-color: #b7252d !important;
	color: white !important;
	opacity: 1 !important;
}



#usp-row {
	width: 80% !important;
	max-width: 1343px !important;
	display: flex;
	justify-content: center;
}

#usp-row .usp-column {
	width: 303px;
	height: 130px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	overflow: visible !important;
	margin: 0;
}

#usp-row .usp-column.et_pb_column_2 {
    margin: auto;
}


/*
selector {
  width: 303px !important;
  height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

@media only screen and (max-width: 1280px) {
  selector {
    width: 250px !important;
  }
}
*/








.alinea-img img {
	object-fit: cover;
}








#main-content p a {	
  text-decoration: none;
  color: #0157A2;
  transition: all 0.3s ease !important;
}

#main-content p a:hover {
  color: #2ea3fc;
}

#main-content article .entry-content .et-l--post .et_pb_section_0 .et_pb_row_0 .et_pb_column_0 .et_pb_text_0 .et_pb_text_inner .wp-block-code .rank-math-breadcrumb p a {
	color: #000000 !important;
}

#main-content article .entry-content .et-l--post .et_pb_section_0 .et_pb_row_0 .et_pb_column_0 .et_pb_text_0 .et_pb_text_inner .wp-block-code .rank-math-breadcrumb p a:hover {
	color: #333333 !important;
}

.btn-algemeen {
	font-size: 16px !important;
	cursor: pointer !important;
	transition: background-color 0.3s ease, border-color 0.3s ease !important;
	color: #ffffff;
	padding-left: 32px !important;
	padding-right: 32px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	font-family: "Galano Grotesque", sans-serif !important;
    font-weight: 500 !important;
	box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2) !important;
}

/* Selecteer je button, bijvoorbeeld met een class of type
.btn-algemeen,
.btn-algemeen:hover,
.btn-algemeen:focus,
.btn-algemeen:active {
  background: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  cursor: default !important;
}
 */

.btn-blauw {
	color: #ffffff !important;
    border-radius: 8px!important;
	background-color: #55ABE5!important;
	border: 2px solid #55abe5;
}

.btn-rood {
	color: #ffffff !important;
	border: 2px solid #d23941;
    border-radius: 8px !important;
	background-color: #D23941 !important;
}

.btn-transparant {
	border: 2px solid #ffffff;
    border-radius: 8px;
	background-color: transparent;
}

.btn-transparant-zwart {
	border-color: #000000 !important;
	color: #000000 !important;
}


.btn-blauw:hover {
    background-color: #3A8BC3!important;
	border: 2px solid #3a8bc3;
}

.btn-rood:hover {
    background-color: #B7252D !important;
	border: 2px solid #B7252D;
}

.btn-transparant:hover {
    border: 2px solid #d6d6d6;
}

.btn-transparant-zwart:hover {
    border: 2px solid #505050 !important;
}

.rode-link div p span a {
	color: #BF1E26 !important;
}

/* breadcrumbs */
.wp-block-code {
	border: none;
	font-family: "Galano Grotesque", sans-serif !important;
	padding: 0;
	font-size: 19.2px;
	color: #000000;
}

.wp-block-code a {
	text-decoration: none;
	font-family: "Galano Grotesque", sans-serif !important;
	font-weight: 700;
	color: #000000;
}

.wp-block-code .separator {
	font-family: "Galano Grotesque", sans-serif !important;
	font-weight: 700;
}

.wp-block-code .last {
	font-family: "Galano Grotesque", sans-serif !important;
	font-weight: 300;
}

/* Verwijder de standaard padding/margin van de pre en code tags */
.et_pb_text_inner pre.wp-block-code,
.et_pb_text_inner pre.wp-block-code code {
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important; /* Voorkom overflow door nowrap indien nodig */
    background-color: transparent !important; /* Als de code-block een achtergrond heeft */
}

/* Specifieke styling voor de p-tag in de breadcrumb */
.rank-math-breadcrumb p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex; /* Gebruik flexbox voor betere controle over spacing */
    align-items: center; /* Lijn items verticaal uit */
}

/* Voor de separator zelf */
.rank-math-breadcrumb .separator {
    padding: 0 4px !important; /* Pas deze waarde aan voor de gewenste kleine horizontale ruimte */
    margin: 0 !important;
    display: inline-block; /* Zorg dat de span als een blokje behandeld kan worden voor padding */
}

/* Voor de links en laatste span in de breadcrumbs */
.rank-math-breadcrumb a,
.rank-math-breadcrumb .last {
    margin: 0 !important;
    padding: 0 !important;
}



/*
 * projecten carousel
*/

.carousel-container {
	/* background-color: pink; */
}

.carousel-container .et_pb_module_inner {
	
}

.carousel-container .et_pb_module_inner .dtq-carousel {
	
}

.carousel-container .et_pb_module_inner .dtq-carousel .slick-list {
	
}

.carousel-container .et_pb_module_inner .dtq-carousel .slick-list .slick-track {
	/* height: 100% !important; */
}

.carousel-container .et_pb_module_inner .dtq-carousel .slick-list .slick-track .slick-slide {
	/*
	margin-left: 7px;
	width: 350px !important;
	height: 375px !important;
	border: 7px solid red !important;
	*/
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	/*
    width: 490px !important;
    height: 507px !important;
	transition: width 0.3s ease, height 0.3s ease !important;*/
}


.carousel-container .et_pb_module_inner .dtq-carousel .slick-list .slick-track .slick-slide.slick-current.slick-active.slick-center {
/*    width: 590px !important;
    height: 610px !important;*/
}
/*
.carousel-container .et_pb_module_inner .dtq-carousel .slick-list .slick-track .slick-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
*/






.ba_image_carousel_0 .dtq-carousel .slick-slide, .et-db #et-boc .ba_image_carousel_0 .dtq-carousel .slick-slide {
	/*
	padding: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	*/
}

/*
.carousel-container.carousel-container .et_pb_module_inner .dtq-carousel .slick-list .slick-track .slick-slide img {
	width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
	margin: 0!important;
	border: 1px solid red;
}
*/

/*
.ba_image_carousel_0 .dtq-carousel .slick-list,
.ba_image_carousel_0 .dtq-carousel .slick-track {
  overflow: hidden;
  box-sizing: border-box;
	width: auto !important;
  display: flex;
}

.ba_image_carousel_0 .dtq-carousel .slick-slide > div,
.ba_image_carousel_0 .dtq-carousel .slick-slide > div > div,
.ba_image_carousel_0 .dtq-carousel .slick-slide .et_pb_module_inner {
  margin-left: -10px !important;
  margin-right: -10px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
  width: calc(100% + 20px) !important;
}

.ba_image_carousel_0 .dtq-carousel .slick-slide .dtq-figure,
.ba_image_carousel_0 .dtq-carousel .slick-slide figure,
.ba_image_carousel_0 .dtq-carousel .slick-slide img {
  display: block !important;
  width: calc(100% + 20px) !important;
  max-width: none !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
  padding: 0 !important;
  height: 100% !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
}

.ba_image_carousel_0 .dtq-carousel .slick-slide {
  box-sizing: border-box !important;
	flex: 0 0 auto !important;
  display: block
}
*/






/*
selector {
  background-color: blue;
  width: 350px !important;
  height: 375px !important;
  border: 7px solid red !important;
}

selector img {
  width: 100%  !important;
  height: 100%  !important;
  object-fit: fill !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
*/

/* Algemene styling voor het formulier */
.dtq-cf7-styler {
    font-size: 16px; /* Alle fonts zijn 16px */
	font-weight: 500;
    color: #000000; /* Standaard tekstkleur zwart */
    /* max-width: 800px;  Maximale breedte voor het hele formulier */
    margin: 0 auto; /* Centreer het formulier */
}

.dtq-cf7-styler form p:nth-of-type(-n + 5) {
	display: inline-block;
	width: calc((100% - 64px) / 2);
	margin-right: 0;
	
    margin-bottom: 24px; /* Margin onder elke rij */
}

.dtq-cf7-styler form p:nth-of-type(1),
.dtq-cf7-styler form p:nth-of-type(3),
.dtq-cf7-styler form p:nth-of-type(5) {
    margin-right: 32px;
}

/* Stijl voor de labels */
.dtq-cf7-styler label {
    display: block; /* Zorgt ervoor dat labels boven de invoervelden staan */
    color: #000000; /* Labels zijn zwart */
    font-size: 16px;
    margin-bottom: 0; /* Ruimte tussen label en invoerveld */
    margin-top: 15px; /* Margin boven het label */
}

/* Stijl voor alle invoervelden (text, email, tel, date, textarea) */
.dtq-cf7-styler input[type="text"],
.dtq-cf7-styler input[type="email"],
.dtq-cf7-styler input[type="tel"],
.dtq-cf7-styler input[type="date"],
.dtq-cf7-styler textarea {
    width: 100%; /* Neemt de beschikbare breedte in beslag */
    max-width: 385px; /* Maximale breedte van 385px */
    background-color: #ffffff; /* Achtergrondkleur wit */
    border: 1px solid #e0e0e0; /* Stroke 1px #e0e0e0 solid */
    border-radius: 8px; /* Afgeronde hoeken van 8px */
    height: 48px; /* Hoogte van 48px */
    box-sizing: border-box; /* Zorgt ervoor dat padding en border binnen de hoogte vallen */
    font-size: 16px;
    color: #000000; /* Tekst in de invoervelden is zwart */
    transition: border-color 0.3s ease; /* Smooth overgang bij focus */
}

/* Naam veld */
.dtq-cf7-styler form p label span.wpcf7-form-control-wrap[data-name="your-name"] input.wpcf7-form-control[type="text"] {
    padding: 12px 16px !important;
	margin-bottom: 0 !important;
}

/* Voornaam veld */
.dtq-cf7-styler form p label span.wpcf7-form-control-wrap[data-name="your-name-first"] input.wpcf7-form-control[type="text"] {
    padding: 12px 16px !important;
	margin-bottom: 0 !important;
}

/* E-mailadres veld */
.dtq-cf7-styler form p label span.wpcf7-form-control-wrap[data-name="your-email"] input.wpcf7-form-control[type="email"] {
    padding: 12px 16px !important;
	margin-bottom: 0 !important;
}

/* Telefoon veld */
.dtq-cf7-styler form p label span.wpcf7-form-control-wrap[data-name="your-tel"] input.wpcf7-form-control[type="tel"] {
    padding: 12px 16px !important;
	margin-bottom: 0 !important;
}

/* Gemeente veld */
.dtq-cf7-styler form p label span.wpcf7-form-control-wrap[data-name="your-address"] input.wpcf7-form-control[type="text"] {
    padding: 12px 16px !important;
	margin-bottom: 0 !important;
}

/* Datum veld (laatste onderhoud) - let op, de data-name voor dit veld is "date-991" volgens je HTML */
.dtq-cf7-styler form p label span.wpcf7-form-control-wrap[data-name="date-991"] input.wpcf7-form-control[type="date"] {
    padding: 12px 16px !important;
	margin-bottom: 0 !important;
}

/* Specifiek voor de textarea */
.dtq-cf7-styler form p label span.wpcf7-form-control-wrap[data-name="bericht"] textarea.wpcf7-textarea {
	height: auto; /* Laat de hoogte zich aanpassen aan de inhoud */
    min-height: 120px; /* Minimale hoogte voor het berichtveld */
    max-width: calc(385px * 2 + 24px); /* Breedte van twee velden + marge ertussen */
    padding: 12px 16px !important; /* Voorbeeld: top 12px, rechts 16px, bottom 12px, links 16px */
	margin-bottom: 0 !important;
}

/* Placeholder tekststijl */
.dtq-cf7-styler input::placeholder,
.dtq-cf7-styler textarea::placeholder {
    color: #828282; /* Placeholder is #828282 */
    font-size: 16px;
}

/* Focus stijl voor invoervelden */
.dtq-cf7-styler input[type="text"]:focus,
.dtq-cf7-styler input[type="email"]:focus,
.dtq-cf7-styler input[type="tel"]:focus,
.dtq-cf7-styler input[type="date"]:focus,
.dtq-cf7-styler textarea:focus {
    outline: none; /* Verwijder de standaard outline */
    border-color: #55ABE5; /* Verander de randkleur bij focus */
}

/* Pas de breedte van de invoervelden in een rij aan */
.wpcf7-form > p > label {
    flex: 1 1 calc(50% - 12px); /* Zorgt voor twee kolommen met 24px gap */
    max-width: 385px; /* Maximale breedte per veld in de kolommen */
}

/* Uitzondering voor de textarea (berichtveld) om de volledige breedte in te nemen */
.wpcf7-form > p:has(textarea) {
    display: block; /* Zorgt dat het berichtveld alleen staat */
}

.wpcf7-form > p:has(textarea) label {
    max-width: 100%; /* Neemt de volledige breedte in */
}

/* Voor alle tekst, email, tel, date input velden */
#contact-form .wpcf7-form-control-wrap input.wpcf7-form-control:not([type="submit"]):not([type="radio"]) {
    background-color: #ffffff !important;
}

/* Voor de textarea */
#contact-form .wpcf7-form-control-wrap textarea.wpcf7-textarea {
    background-color: #ffffff !important;
}

/* Voor select velden (als die er zouden zijn) */
#contact-form .wpcf7-form-control-wrap select.wpcf7-form-control {
    background-color: #ffffff !important;
}

#contact-form .dtq-cf7 .wpcf7-radio input[type="radio"]:not(:checked)+span:before,
#contact-form .dtq-cf7 .wpcf7-radio input[type="radio"]+span:before {
    background-color: transparent !important;
}

#contact-form .dtq-cf7 input[type="radio"] {
    background-color: transparent !important;
}

/* Stijl voor de radiobuttons */
.wpcf7-form-control-wrap[data-name="ketel-onderhoud"] {
    display: flex;
    gap: 20px; /* Ruimte tussen de radiobutton opties */
    align-items: center;
}

.wpcf7-form-control-wrap[data-name="ketel-onderhoud"] .wpcf7-list-item {
    margin-bottom: 0; /* Geen extra marge */
}

.wpcf7-list-item-label {
    font-size: 16px;
    color: #000000;
}

/* Stijl voor de submit knop */
#contact-form .wpcf7-form input.wpcf7-submit[type="submit"] {
    background-color: #55ABE5; /* Achtergrondkleur #55ABE5 */
    color: #ffffff; /* Font kleur wit */
    border: none; /* Geen rand */
    border-radius: 8px; /* Afgeronde hoeken van 8px */
    padding: 12px 24px; /* Padding van de knop */
    font-size: 16px;
    font-weight: bold; /* Optioneel: maakt de tekst dikker */
    cursor: pointer;
    width: 100%; /* Volledige breedte van het formulier */
    max-width: calc(385px * 2 + 24px); /* Totale breedte van de form */
    height: 48px; /* Hoogte van de knop */
    box-sizing: border-box;
    transition: background-color 0.3s ease; /* Smooth overgang bij hover */
	box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
}

#contact-form .wpcf7-form input.wpcf7-submit[type="submit"]:hover {
    background-color: #3a8bc3; /* Donkerdere kleur bij hover */
}

/* Specifieke aanpassingen voor de indeling van de groepen en velden */
.ketel-onderhoud-groep {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

.ketel-onderhoud-groep p {
    display: contents; /* Zorgt ervoor dat de <p> tags in de groep de flex-layout niet breken */
}

.ketel-onderhoud-groep label {
    flex: 1 1 calc(50% - 12px); /* Zorgt voor twee kolommen in de groep */
    max-width: 385px;
}

/* Styling voor de radiobuttons binnen de verborgen groep */
.wpcf7-form-control-wrap[data-name="radio-235"] {
    display: flex;
    flex-wrap: wrap; /* Voor het geval er veel opties zijn */
    gap: 15px; /* Ruimte tussen de radiobutton opties */
    align-items: center;
}

.wpcf7-form-control-wrap[data-name="radio-235"] .wpcf7-list-item {
    margin-bottom: 0;
}

/* Zorg ervoor dat de labels van de radiobuttons ook 16px zijn */
.wpcf7-list-item-label {
    font-size: 16px;
}

/* Correctie voor de dubbele voornaam veldnaam in de HTML die je gaf (your-name-first) */
/* Als je 'your-name' en 'your-name-first' in de HTML hebt, is dit nodig */
/* Anders kun je dit verwijderen */
.wpcf7-form-control-wrap[data-name="your-name-first"] input {
    width: 100%;
    max-width: 385px;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    height: 48px;
    box-sizing: border-box;
    font-size: 16px;
    color: #000000;
}