h1, h2, h3, h4, h5, h6 {
  color: orange;
}
.container-header {
  background-color: orange;
  background-image: none;
}

/*begin topbanner met logo en menu*/
/* Centreer alles in de header  in de topbanner met het logo*/
.container-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.container-header .grid-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.container-header .navbar-brand,
.container-header .brand-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
}

/* Forceer de werkelijke grootte van het logo-plaatje in de topbanner */
.container-header img {
    height: auto !important;
    width: 600px !important; /* Pas dit getal aan (bijv. 200px, 250px of 300px) om het logo groter te maken */
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Maak de menu-items groter en geef ze een eigen kleur */
.container-header .mod-menu.nav li.nav-item a {
    font-size: 24px !important; /* Pas dit getal aan (bijv. 16px, 18px, 20px) voor de grootte */
    color: #712F21 !important; /* Vervang deze kleurcode door jouw gewenste kleur*/
    font-weight: 500 !important; /* Maak het eventueel iets dikker (bold/semi-bold) */
    padding: 10px 15px !important; /* Ruimte rondom de menu-items */
}

/* Optioneel: kleur en stijl veranderen als je met de muis over een menu-item gaat (hover) */
.container-header .mod-menu.nav li.nav-item a:hover {
    color: #ffffff !important; /* De kleur wanneer je er met de muis overgaat */
}
/* einde topbanner met logo en menu

/*begin FOOTER MENU
/* 1. Achtergrondkleur en hoogte (compact) forceren */
footer.footer.container-fluid,
.container-footer,
.container-footer.footer.container-fluid {
    background-color: orange !important; /* Vervang #222222 door jouw gewenste kleur */
    background-image: none !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 2. Uitlijning van de inhoud in de footer */
.container-footer .grid-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* 3. Module-achtergrond transparant maken */
.container-footer .mod-menu {
    background-color: transparent !important;
}

/* 4. Tekstgrootte, kleur en padding van de menu-items */
.container-footer .mod-menu.nav li.nav-item a {
    font-size: 24px !important;     /* Pas dit aan voor een grotere of kleinere tekst */
    color: #712F21 !important;     /* Tekstkleur van de menu-items (bijv. wit) */
    padding: 5px 5px !important;  /* Ruimte rondom de links */
}

/* 5. Hover-kleur wanneer je met de muis over een menu-item gaat */
.container-footer .mod-menu.nav li.nav-item a:hover {
    color: #ffffff !important;     /* Vervang dit door jouw gewenste hover-kleur */
}
/*einde footer menu*/

/*begin aanpassing contact formulier*/

/* Maak de paginatitel van de contactpagina kleiner en zwart */
.com-contact__container .page-title, 
.com-contact h1 {
    font-size: 1.1rem !important;
    color: #000000 !important;
    font-weight: normal !important;
}
/* einde aanpassing conbtactformulier*/