html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.menubar{
  background-color: black; 
  max-width:100%;
}

body {
  /*margin-bottom: 60px;*/
  background-image: url('/Images/forestbridge.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

/*div.bgimg, */
div.container.img, main {
  /*background-color: black;*/
  margin-left: 25px;
  margin-right: 25px;
  min-height: 100%;
}

/*div.menubar, div.img {
  max-width: 2000px;
  margin-left: 25px;
  margin-right: 25px;
}*/

a.navbar-brand {
  font-family: "Raleway", sans-serif;
  font-weight: bolder;
  width: stretch;
  color:white;
}

footer{
  text-align:center;
  height: 60px;
}

.modal-content {
  background-color: #fff !important;
  color: #000 !important;
}

  .modal-content label,
  .modal-content .form-text,
  .modal-content .form-control {
    color: #000 !important;
  }

.glass-nav {
  background: rgba(25, 30, 25, 0.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.navbar-brand img {
  vertical-align: middle;
}

.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  margin: 0 0.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

  .nav-link:hover,
  .nav-link.active {
    color: #fff !important;
    transform: translateY(-1px);
  }

.navbar-text b {
  color: #fff;
}

.navbar .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

  .navbar .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
  }

.navbar-toggler-icon {
  filter: invert(1);
}
.hover-underline:hover {
  text-decoration: underline;
  color: #fff;
}

.profile-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.3rem;
  transition: all 0.2s ease;
}

  .profile-icon:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
  }


:root {
  --accent: #2ecc71; /* change this to #1abc9c or #00bcd4 for blue */
}

/* Frosted Glass Navbar */
.glass-nav {
  background: rgba(15, 20, 15, 0.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}

/* Brand glow */
.glow-text {
  text-shadow: 0 0 8px var(--accent);
}

.logo-glow {
  filter: drop-shadow(0 0 4px var(--accent));
}

/* Nav Links */
.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  letter-spacing: 0.4px;
  margin: 0 0.6rem;
  position: relative;
  transition: all 0.25s ease;
}

  .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
  }

  .nav-link:hover,
  .nav-link.active {
    color: #fff !important;
    text-shadow: 0 0 6px var(--accent);
  }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 60%;
    }

/* Profile + Logout */
.profile-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--accent);
  font-size: 1.4rem;
  transition: all 0.2s ease;
}

  .profile-icon:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-2px);
  }

.logout-btn {
  border-color: rgba(255, 255, 255, 0.4);
}

  .logout-btn:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

/* Navbar toggler on dark bg */
.navbar-toggler-icon {
  filter: invert(1);
}



:root {
  --accent1: #00b894; /* left glow color  */
  --accent2: #00cec9; /* middle glow color */
  --accent3: #0984e3; /* right glow color  */
}

/* Frosted glass base */
.glass-nav {
  background: rgba(15, 20, 15, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  transition: background 0.3s ease;
}

  /* Glowing accent strip underneath */
  .glass-nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
    box-shadow: 0 0 10px var(--accent2);
  }

/* Brand glow */
.glow-text {
  text-shadow: 0 0 6px var(--accent1);
}

.logo-glow {
  filter: drop-shadow(0 0 4px var(--accent2));
}

/* Nav links */
.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  letter-spacing: 0.4px;
  margin: 0 0.6rem;
  position: relative;
  transition: all 0.25s ease;
}

  .nav-link:hover,
  .nav-link.active {
    color: #00ffae !important;
    text-shadow: 0 0 8px #00ffae;
  }

/* Profile + Logout icons */
.profile-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--accent2);
  font-size: 1.4rem;
  transition: all 0.2s ease;
}

  .profile-icon:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-2px);
  }

.logout-btn {
  border-color: rgba(255, 255, 255, 0.4);
}

  .logout-btn:hover {
    background-color: var(--accent1);
    border-color: var(--accent1);
    color: #fff;
  }

/* Navbar toggler icon */
.navbar-toggler-icon {
  filter: invert(1);
}


.logout-link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
}

  .logout-link:hover {
    background-color: var(--accent1);
    color: #fff;
    text-shadow: 0 0 6px var(--accent1);
    transform: translateY(-1px);
  }




.logout-text {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.2s ease;
}

  .logout-text:hover {
    color: var(--accent2);
    text-shadow: 0 0 8px var(--accent2);
    transform: translateY(-1px);
  }

  .logout-text:active {
    color: var(--accent3);
    text-shadow: 0 0 5px var(--accent3);
  }