#navbar-main {
  background-color: transparent;
}

#CollapsingNavbar {
  margin-right: 100px;
}


.navbar-brand img {
  /* filter: brightness(0) invert(1); */
  margin-left: 10px;
  margin-top: 10px;
}








/* ================================
   Navbar Scroll + Hover Behavior
   ================================ */

/* Initially hidden navbar */
#navbar-main {
  opacity: 0;
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0);
  transform: translateY(-10px);
  transition:
    opacity var(--trans-speed) ease,
    visibility var(--trans-speed) ease,
    transform var(--trans-speed) ease,
    background-color var(--trans-speed) ease;
  backdrop-filter: blur(6px);

}

/* When visible (scroll down) */
#navbar-main.visible {
  opacity: 1;
  visibility: visible;
  background-color: var(--navbar-bg);
  transform: translateY(0);
}

/* When near the top */
#navbar-main.top {
  opacity: 0.2;
  visibility: visible;
  background-color: var(--navbar-bg);
  transform: translateY(0);
}

/* Hover while near the top */
#navbar-main.top:hover {
  opacity: 1;
}



/* ================================
   Navbar Brand (Logo) Color Filters
   ================================ */



.navbar-brand img {
  /* filter: brightness(0) saturate(100%) invert(32%) sepia(13%) saturate(998%) hue-rotate(58deg) brightness(90%) contrast(86%); */

  transition: filter 0.4s ease, transform 0.3s ease;

  filter: brightness(0) saturate(100%) invert(46%) sepia(10%) saturate(980%) hue-rotate(145deg) brightness(70%) contrast(90%);

}

.navbar-brand:hover img {
  filter: brightness(0) saturate(100%) invert(46%) sepia(10%) saturate(1200%) hue-rotate(145deg) brightness(95%) contrast(100%);
  transform: scale(1.01);
}


/* Menu Link colours */

.navbar-nav .nav-link {
  color: var(--main-color);
  font-family: var(--body-font-sans);
}




@media (max-width: 768px) {

  .navbar-brand img {
    max-width: 220px;
    height: auto;
  }



  body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }


  /* Prevent AOS transform overflow on mobile */
  html,
  body {
    overflow-x: hidden;
  }

  /* Optional — ensure all AOS elements stay contained */
  [data-aos] {
    overflow-x: clip;
    /* modern browsers */
  }


}