.active {
  color: var(--bruin) !important;
}


.nav .socials-img {
  margin-left: -6px;
}

.nav .socials-img img {
  display: block;
  width: 18px;
}

/* Header Styling */
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: black;
  position: absolute;
  top: 30px;
  left: 2.5vw;
  width: 95vw;
}

.logo img {
  width: 25px;
  color: black;
}

/* Hamburger Menu Button */
.menu_menuButton__1VC0v {
  font-family: "open-sans", Arial, Helvetica, sans-serif;
  align-items: center;
  background-color: var(--accent);
  border: none;
  border-radius: 39px;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 1rem;
  gap: 6px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.188rem;
  padding: 6px 16px 6px 10px;
  text-decoration: none;

}

/* Navigation Menu */
.nav {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.nav .cta {
  padding: 10px 20px;
  transition: all 0.3s ease;
  color: white;
  margin-top: 0px;
}


.nav .cta:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.nav div {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  z-index: 10;

}

.nav a {
  text-decoration: none;
  font-size: 1em;
  transition: all 0.3s ease;
}

.nav a:hover {
  text-decoration: underline;
  transition: all 0.3s ease;
}


.nav .active {
  font-weight: 700;
}


/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.dropdown-arrow {
  font-size: 0.6em;
  transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg, white);
  list-style: none;
  margin: 0;
  padding: 12px 0 8px 0;
  min-width: 180px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 100;
  color: black;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 0.95em;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.05);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.close-btn {
  display: none;
}


#hamburger {
  display: none;
}

.language {
  display: flex;
  flex-direction: row;
  gap: 10px;
}


@media (max-width: 950px) {
  .menu_menuButton__1VC0v {
    display: flex;
  }

  .nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease;
  }

  /* Social icons zwart op mobiel */
  .social-icons img {
    content: url('https://staging.bramvandenbunder.be/assets/img/icons/facebook-zwart.svg');
  }
  .social-icons a[aria-label="LinkedIn"] img {
    content: url('https://staging.bramvandenbunder.be/assets/img/icons/linkedin-zwart.svg');
  }

  /* Contact knop wit op mobiel */
  .nav .cta.btn {
    color: white !important;
    background: var(--accent, #7c5e48);
    border: none;
  }

  .nav div {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 10;
    flex-direction: column;
  }

  .nav.active {
    right: 0;
    display: flex;
    gap: 30px;
  }

  .nav.active a {
    font-size: 1.5em;
    color: black;
  }

  .nav.active a:hover {
    font-size: 1.5em;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 3.5rem;
    color: var(--zwart);
    cursor: pointer;
    display: block;
    z-index: 11;
  }

  .menu_menuButton__1VC0v {
    position: fixed;
    top: 30px;
    right: 2.5vw;
    z-index: 10;
  }

  .social-icons {
    flex-direction: row !important;
  } 

  #hamburger {
    display: flex;
  }

  .language {
    margin-top: 100px;
  }
  
  .dropdown:hover .dropdown-menu {
  display:flex;
}

  .mobile {
    display: block;
  }

          .nav .dropdown-toggle {
            display: none;
        }

        .nav .dropdown-arrow {
            display: none;
        }

        .nav .dropdown-menu {
        position: relative;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 0;
        list-style: none;
        top: unset;
        text-align: center;
                display: flex;
        flex-direction: column;
        gap: 20px;
        }

        .nav .dropdown-menu li {
            list-style: none;
        }

        .nav .dropdown-menu li a {
            padding: 0.2rem 0;
            display: inline;
        }
}