* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  color: white;
  scroll-behavior: smooth;
}



header {
background-color: #2c080d; /* Donkerrood/paars */
padding: 5px 0;
position: sticky;
top: 0;
z-index: 999;
width: 100%;
}


/* DESKTOP NAV: flex, met responsive gap */
.desktop-nav {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* zorg dat het niet overloopt */
gap: clamp(2rem, 5vw, 8rem); /* responsive gap */
padding: 1rem;
overflow-x: hidden;
}


.main-nav a {
color: white;
text-decoration: none;
font-size: 18px;
text-transform: uppercase;
font-family: 'merge one', sans-serif;
}

/* -------------------- DESKTOP NAV -------------------- */
.desktop-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 8rem;
padding: 1rem;
}

.desktop-nav .logo {
display: flex;
flex-direction: column;
align-items: center;
}

.desktop-nav img {
height: 60px;
}

.desktop-nav a {
position: relative;
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 1.5rem;
padding: 0.5rem 0;
font-weight: 500;
}

/* Hover underline effect */
.desktop-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background-color: rgb(255, 255, 255);
transition: width 0.3s ease;
}

.desktop-nav a:hover::after {
width: 100%;
}


/* -------------------- MOBILE NAV -------------------- */
.mobile-nav {
display: none;
padding: 1rem;
background-color: #2c080d; /* zorg voor contrast met zwarte menu-bg */
}

.mobile-header {
display: flex;
justify-content: center; /* logo in het midden */
align-items: center;
position: relative;
}

.mobile-nav .logo {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.mobile-nav img {
height: 30px;
}

.hamburger {
position: absolute;
right: 0;
font-size: 2rem;
cursor: pointer;
color: white;
}

.mobile-menu {
display: none;
flex-direction: column;
padding-top: 1rem;
background-color: #2c080d;
text-align: right;
}

.mobile-menu a {
padding: 0.5rem 1rem;
text-decoration: none;
color: white;
}

.mobile-menu.active {
display: flex;
}

/* -------------------- SWITCH ON SMALL SCREENS -------------------- */
@media (max-width: 1120px) {
.desktop-nav {
  display: none;
}

.mobile-nav {
  display: block;
}
}