/* =========================================================
   WHITE GOLD MARBLES
   PREMIUM GLASS NAVBAR
========================================================= */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  /* =========================================
     DEFAULT / TOP STATE
     Glass effect
  ========================================= */

  background: rgba(35, 29, 23, 0.22);

  border-bottom: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);

  transition:
    background-color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    backdrop-filter 0.45s ease;
}


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

#navbar > nav {
  position: relative;
  height: 72px;
}


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

#navbar #logoImage {
  display: block;

  height: 50px;
  width: auto;

  object-fit: contain;

  transform: scale(1.08);
  transform-origin: left center;

  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}


/* =========================================================
   DEFAULT NAV LINKS
   WHITE
========================================================= */

#navbar .nav-link {
  color: #ffffff !important;

  text-decoration: none;

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


/* Hover */

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


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

#navbar .group > button {
  color: #ffffff !important;

  background: transparent;

  border: none;

  cursor: pointer;
}


/* Products hover */

#navbar .group > button:hover {
  color: #D4AF37 !important;
}


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

#navbar .group > div {
  border:
    1px solid rgba(120, 100, 75, 0.12);

  box-shadow:
    0 20px 45px
    rgba(35, 25, 15, 0.15);
}


/* =========================================================
   SCROLLED NAVBAR
========================================================= */
/* Jab navbar scroll ho tab default logo hide aur scrolled logo show ho */
#navbar.navbar-scrolled #defaultLogo {
  display: none !important;

  
}

#navbar.navbar-scrolled #scrolledLogo {
  display: block !important;
}
#navbar.navbar-scrolled {

  /* Existing ivory background */

  background:
    rgba(251, 249, 245, 0.96);

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

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

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


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

#navbar.navbar-scrolled .nav-link,
#navbar.navbar-scrolled .group > button {

  color: #1A1714 !important;
}


/* Hover */

#navbar.navbar-scrolled .nav-link:hover,
#navbar.navbar-scrolled .group > button:hover {

  color: #A47735 !important;
}


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

#navbar.navbar-scrolled #logoImage {

  transform: scale(1);
}


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

#navbar #menuBtn {

  border: none;

  background: transparent;

  color: #ffffff;

  cursor: pointer;

  outline: none;

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


#navbar #menuBtn:hover {

  color: #D4AF37;
}


/* Menu open */

#navbar #menuBtn.menu-open {

  transform: rotate(90deg);
}


/* =========================================================
   MOBILE BUTTON AFTER SCROLL
========================================================= */

#navbar.navbar-scrolled #menuBtn {

  color: #1A1714;
}


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

#navbar #mobileMenu {

  background:
    rgba(251, 249, 245, 0.98);

  color: #1A1714;

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

  box-shadow:
    0 20px 40px
    rgba(26, 23, 20, 0.10);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);
}


/* Mobile links */

#navbar #mobileMenu a,
#navbar #mobileMenu button {

  color: #1A1714;

  transition:
    color 0.25s ease;
}


#navbar #mobileMenu a:hover,
#navbar #mobileMenu button:hover {

  color: #A47735;
}


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

#navbar .nav-active {

  color: #D4AF37 !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1023px) {

  #navbar > nav {
    height: 68px;
  }


  #navbar #logoImage {

    height: 70px;

    transform: scale(1);
  }


  #navbar.navbar-scrolled #logoImage {

    transform: scale(0.94);
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 640px) {

  #navbar > nav {

    padding-left: 18px;
    padding-right: 18px;
  }


  #navbar #logoImage {

    height: 62px;
  }


  #navbar #menuBtn {

    font-size: 24px;
  }
}