.hero {
  height: 80vh;
  background: url('marmer.jpg') no-repeat center center / cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.overlay {
  background-color: rgba(255, 255, 255, 0.7); 
  padding: 2rem;
  border-radius: 1rem;
  backdrop-filter: blur(4px); 
  max-width: 90%;
  border: 6px solid rgba(111, 94, 94, 0.2); 
  box-shadow: 0 6px 20px rgba(111, 94, 94, 0.1);
   opacity: 0;
  transform: translateY(-20px);
  animation: fadeSlideIn 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logonew {
  max-width: 200px;
  margin-bottom: 1rem;
}

.h1new {
  font-family: 'sklow', cursive;
  font-size: 3rem;
  color: #e4e4e4 !important;
  margin: 1rem 0;
  text-align: center;
} 


.subtitle {
  font-size: 1.25rem;
  color: #e4e4e4;
  margin-bottom: 0.5rem;
  text-align: center;
}

.address {
  font-size: 1rem;
  color: #e4e4e4;
  text-align: center;
}


.button-wrapper {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* ruimte tussen knoppen */
}

.custom-button {
  background-color: green !important; /* oudroze */
  color: white !important;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(216, 167, 177, 0.3);
}

.custom-button:hover {
  background-color: #c28a96; /* iets donkerder roze */
  transform: translateY(-2px);
}

.button-animate {
  opacity: 0;
  transform: scale(0.95);
  animation: fadeScaleIn 1s ease-out forwards;
  animation-delay: 1s; /* na de overlay verschijnt dit iets later */
}

/* Animatie zelf */
@keyframes fadeScaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


.darkText{
	color: #333333 !important;
}

h2 {
	color: #ffffff !important;
	}
h3 {
	color: #333333 !important;
}

.merken{
	background-color:#fff; 
	padding:50px 50px 40px;	
}

@media only screen and (max-width: 479px) {
	h2 {
		font-size: 34px;
		line-height: 48px;
	}
}

@font-face {
  font-family: 'sklow';
  src: url('../fonts/sklow.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.fontaerens {
	font-family: 'sklow';
}

h2 {
  font-family: 'sklow';
}

h5 {
  
  color: #ffffff; 
}


#Side_slide {
	background-color: #ffffff;
	border-color: #ffffff;
}
#Side_slide, #Side_slide .search-wrapper input.field, #Side_slide a:not(.action_button), #Side_slide #menu ul li.submenu .menu-toggle {
	color: #333333;
}

#Top_bar .responsive-menu-toggle, #Header_creative .creative-menu-toggle, #Header_creative .responsive-menu-toggle {
	color: #333333;
}

body, ul.timeline_items, .icon_box a .desc, .icon_box a:hover .desc, .feature_list ul li a, .list_item a, .list_item a:hover, .widget_recent_entries ul li a, .flat_box a, .flat_box a:hover, .story_box .desc, .content_slider.carouselul li a .title, .content_slider.flat.description ul li .desc, .content_slider.flat.description ul li a .desc, .post-nav.minimal a i {
	color: #333333;
}

.menuicoontjes{
	padding: 11px 5px 10px 12px;
	line-height: 19px;
	
}
.a_menuicoontjes{
	color:  black;
    text-decoration: none;
}

.a_menuicoontjes:hover{
	color: green
}

#Top_bar #logo {
	padding-top: 30px;
	padding-bottom: 10px;
}

.homeadjust{
	padding-top: 100px !important; 
	padding-bottom: 50px !important;;
}

.image_frame img {
  border-radius: 8px;
  
  transition: transform 0.3s ease;
}

.image_frame img:hover {
  transform: scale(1.03);
}

/* === Fotobalk: rand verwijderen rond afbeeldingen === */
.image_frame {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 45px 40px;
    max-width: 850px;
    margin: 40px auto 0 auto; 
}
.brand-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-item img {
    max-height: 45px;        /* Alles mooi gelijk */
    width: auto;
    filter: grayscale(0%);
    transition: transform .2s ease;
}

.brand-item img:hover {
    transform: scale(1.05);
}

#merken .section_wrapper {
    margin-bottom: 60px; /* of 80/100px indien je meer ruimte wilt */
}

/* --- Mobile menu: actieve item zichtbaar maken --- */

#Side_slide #menu ul li.current-menu-item > a,
#Side_slide #menu ul li.current_page_item > a,
#Side_slide #menu ul li.current-menu-parent > a,
#Side_slide #menu ul li.current-page-parent > a,
#Side_slide #menu ul li.current-menu-ancestor > a,
#Side_slide #menu ul li.current-page-ancestor > a,
#Side_slide #menu ul li.current_page_ancestor > a {
    color: green !important;        /* zelfde groen als elders op de site */
    font-weight: 600;               /* mag je weglaten als je dat niet mooi vindt */
}

/* Optioneel: ook hover in het groen i.p.v. wit */
#Side_slide a:not(.action_button):hover,
#Side_slide #menu ul li.hover > a,
#Side_slide #menu ul li:hover > a {
    color: green !important;
}