/* =========================================================
   WHITE GOLD MARBLES
   GLOBAL NAVBAR
========================================================= */

#navbar-container {
  position: relative;
  z-index: 9999;
}


/* =========================================================
   NAVBAR
========================================================= */

#navbar-container .wg-navbar {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 9999;

  background: red;

  border-bottom: 1px solid rgba(150, 101, 35, 0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

}


/* =========================================================
   NAV LINKS
========================================================= */

#navbar-container .wg-nav-link {

  color: #2b2118 !important;

  text-decoration: none;

  transition:
    color .3s ease;

}


#navbar-container .wg-nav-link:hover {

  color: #966523 !important;

}


/* =========================================================
   ACTIVE LINK
========================================================= */

#navbar-container .wg-nav-link.active {

  color: #966523 !important;

}


#navbar-container .wg-nav-link.active::after {

  background: #966523 !important;

}


/* =========================================================
   PRODUCTS
========================================================= */

#navbar-container .wg-products-trigger {

  color: #2b2118 !important;

}


#navbar-container .wg-products-trigger:hover {

  color: #966523 !important;

}


/* =========================================================
   DROPDOWN
========================================================= */

#navbar-container .wg-products-dropdown {

  background: rgba(255, 253, 249, .98);

  border: 1px solid rgba(150,101,35,.12);

  box-shadow:
    0 20px 45px rgba(40,30,20,.12);

}


#navbar-container .wg-dropdown-link {

  color: #2b2118 !important;

}


#navbar-container .wg-dropdown-link:hover {

  color: #966523 !important;

  background: #f7f1e7 !important;

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

#navbar-container .wg-nav-contact {

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #8b5c21 0%,
      #b4874c 50%,
      #8d6128 100%
    ) !important;

  border: 1px solid #966523 !important;

}


#navbar-container .wg-nav-contact:hover {

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #a8732e 0%,
      #c49a5d 50%,
      #966523 100%
    ) !important;

}


/* =========================================================
   SCROLLED NAVBAR
========================================================= */

#navbar-container .wg-navbar.scrolled {

  background:
    rgba(248, 246, 241, .96) !important;

  box-shadow:
    0 8px 30px rgba(40, 30, 20, .08);

  border-bottom:
    1px solid rgba(150, 101, 35, .12) !important;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

#navbar-container .wg-mobile-menu-btn span,
#navbar-container .wg-menu-icon span {

  background: #2b2118 !important;

}


/* =========================================================
   MOBILE MENU
========================================================= */

#navbar-container .wg-mobile-menu {

  background:
    rgba(248, 246, 241, .98) !important;

}


#navbar-container .wg-mobile-menu .wg-nav-link {

  color: #2b2118 !important;

}


/* =========================================================
   MOBILE PRODUCT MENU
========================================================= */

#navbar-container .wg-mobile-products-menu {

  background: #f2ede4 !important;

  border-color:
    rgba(150, 101, 35, .12) !important;

}


#navbar-container .wg-mobile-products-menu a {

  color: #5a4022 !important;

}


#navbar-container .wg-mobile-products-menu a:hover {

  color: #966523 !important;

}


/* =========================================================
   WHITE GOLD MARBLES
   NAVBAR
========================================================= */

#navbar {
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}


/* =========================================================
   DEFAULT — HERO OVERLAY
========================================================= */

#navbar .nav-link {
  color: #ffffff !important;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

#navbar .nav-link:hover {
  color: #d4b477 !important;
}


/* Products arrow */
#navbar .products-nav-button span {
  color: #ffffff;
  transition: color 0.3s ease;
}

#navbar .products-nav-button:hover span {
  color: #d4b477;
}


/* =========================================================
   ACTIVE PAGE
========================================================= */

#navbar .nav-active {
  color: #d4b477 !important;
  position: relative;
}

#navbar .nav-active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -7px;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    #c9a96b,
    transparent
  );
}


/* =========================================================
   SCROLLED NAVBAR
========================================================= */

#navbar.navbar-scrolled {
  background-color: #fbf9f5 !important;

  border-bottom:
    1px solid rgba(212, 175, 55, 0.15);

  box-shadow:
    0 4px 20px rgba(26, 23, 20, 0.04);
}


/* Dark text after scroll */

#navbar.navbar-scrolled .nav-link {
  color: #1a1714 !important;
}

#navbar.navbar-scrolled .nav-link:hover {
  color: #966523 !important;
}


/* Products arrow after scroll */

#navbar.navbar-scrolled
.products-nav-button span {
  color: #1a1714;
}

#navbar.navbar-scrolled
.products-nav-button:hover span {
  color: #966523;
}


/* Active after scroll */

#navbar.navbar-scrolled .nav-active {
  color: #966523 !important;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

#navbar #menuBtn {
  color: #ffffff !important;

  background: transparent;
  border: none;

  cursor: pointer;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

#navbar #menuBtn:hover {
  color: #d4b477 !important;
}

#navbar.navbar-scrolled #menuBtn {
  color: #1a1714 !important;
}

#navbar.navbar-scrolled #menuBtn:hover {
  color: #966523 !important;
}


/* =========================================================
   DROPDOWN
========================================================= */

#navbar .group > div {
  border-color: rgba(214, 204, 188, 0.6);
}

#navbar .group > div a {
  color: #574b3d !important;
}

#navbar .group > div a:hover {
  color: #966523 !important;
  background: #f7f3eb !important;
}


/* =========================================================
   MOBILE MENU
========================================================= */

#navbar #mobileMenu {
  background: #fbf9f5 !important;
  color: #2a241e !important;

  border-color:
    rgba(150, 101, 35, 0.12);
}

#navbar #mobileMenu a,
#navbar #mobileMenu button {
  color: #2a241e !important;
}

#navbar #mobileMenu a:hover,
#navbar #mobileMenu button:hover {
  color: #966523 !important;
}


/* Mobile active */

#navbar #mobileMenu .nav-active {
  color: #966523 !important;
}


/* =========================================================
   LOGO
========================================================= */

#navbar #logoImage {
  transition:
    transform 0.4s ease,
    opacity 0.3s ease;
}

#navbar #logoImage:hover {
  transform: scale(1.04);
}