/* Base Navbar styling */

#mainNav {
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, padding 0.2s ease-in-out;
  background-color: transparent;
  padding: 15px 0;
  color: #ffffff;
  z-index: 1030;
}

/* Nav links default (Transparent header) */

#mainNav .navbar-nav .nav-link {
  font-size: 1.15rem;
  color: #ffffff;
  transition: color 0.2s ease-in-out;
}

#mainNav .navbar-nav .nav-link:hover, #mainNav .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.8);
}

/* Logo default size */

#mainNav .navbar-brand img {
  width: 180px;
  height: auto;
  transition: width 0.2s ease-in-out;
}

/* Toggler default (White for transparent background) */

#mainNav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s ease-in-out;
}

#mainNav .navbar-toggler-icon {
  width: 1.2em;
  height: 1.2em;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: background-image 0.2s ease-in-out;
}

/* Scrolled (navbar-shrink), Mobile Menu Open (menu-open) & Bootstrap Collapse States */

#mainNav.navbar-shrink, #mainNav.menu-open, #mainNav:has(#navbarNav.show), #mainNav:has(#navbarNav.collapsing) {
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  padding: 10px 0;
}

#mainNav.navbar-shrink .navbar-brand img, #mainNav.menu-open .navbar-brand img, #mainNav:has(#navbarNav.show) .navbar-brand img, #mainNav:has(#navbarNav.collapsing) .navbar-brand img {
  width: 110px;
}

#mainNav.navbar-shrink .navbar-nav .nav-link, #mainNav.menu-open .navbar-nav .nav-link, #mainNav:has(#navbarNav.show) .navbar-nav .nav-link, #mainNav:has(#navbarNav.collapsing) .navbar-nav .nav-link {
  color: var(--primary, #01821e) !important;
}

#mainNav.navbar-shrink .navbar-nav .nav-link:hover, #mainNav.menu-open .navbar-nav .nav-link:hover, #mainNav.navbar-shrink .navbar-nav .nav-link:focus, #mainNav.menu-open .navbar-nav .nav-link:focus, #mainNav:has(#navbarNav.show) .navbar-nav .nav-link:hover, #mainNav:has(#navbarNav.show) .navbar-nav .nav-link:focus {
  color: #1a1a1a !important;
}

#mainNav.navbar-shrink .navbar-toggler, #mainNav.menu-open .navbar-toggler, #mainNav:has(#navbarNav.show) .navbar-toggler, #mainNav:has(#navbarNav.collapsing) .navbar-toggler {
  border-color: rgba(1, 130, 30, 0.4);
}

#mainNav.navbar-shrink .navbar-toggler-icon, #mainNav.menu-open .navbar-toggler-icon, #mainNav:has(#navbarNav.show) .navbar-toggler-icon, #mainNav:has(#navbarNav.collapsing) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%281, 130, 30, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Responsiveness */

@media (max-width: 768px) {
  #mainNav {
    padding: 8px 0;
  }
}

@media (max-width: 768px) {
  #mainNav .navbar-brand img {
    width: 55px;
  }
}

@media (max-width: 768px) {
  #mainNav.navbar-shrink .navbar-brand img, #mainNav.menu-open .navbar-brand img, #mainNav:has(#navbarNav.show) .navbar-brand img, #mainNav:has(#navbarNav.collapsing) .navbar-brand img {
    width: 50px;
  }
}

@media (max-width: 768px) {
  #mainNav .navbar-toggler-icon {
    width: 1em;
    height: 1em;
    background-size: 100% 100%;
  }
}

@media (max-width: 768px) {
  #mainNav .navbar-collapse {
    margin-top: 10px;
    padding-top: 10px;
  }
}

@media (max-width: 768px) {
  #mainNav .navbar-collapse .nav-link {
    padding: 8px 0;
  }
}