:root{
  --blue:#1c84c6;
  --blue-dark:#2563eb;
  --blue-light:#60a5fa;
  --dark:#172028;
  --white:#ffffff;
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(28,132,198,.15);
  --shadow:rgba(0,0,0,.06);
}

html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  scroll-behavior:smooth;
}
#navbarNav, .navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Override Bootstrap default toggle breakpoint */
@media (max-width: 1350px) {
  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: block !important;
  }
  .navbar-expand-lg .collapse.show {
    display: block !important;
  }
}

@media (min-width: 1351px) {
  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
  }
}

body{
  font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,#f0f7ff 0%,#e3f0ff 100%);
  min-height:100vh;
  color:var(--dark);
}

/* Navbar */
.navbar-glass{
  background:#00336D;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.navbar-brand small{
  color:var(--white);
  font-weight:600;
}
.nav-link{
  color:var(--white)!important;
  font-weight:500;
  border-radius:14px;
  margin:0 4px;
  padding:8px 16px!important;
  transition:all .3s ease;
}
.nav-link:hover,
.nav-link.active{
  background:rgba(255,255,255,.15);
  color:var(--white)!important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* Navbar toggler (mobile hamburger → X animation) */
.navbar-toggler-bar{
  width:24px;
  height:2px;
  background:var(--white);
  display:block;
  margin:5px 0;
  border-radius:2px;
  transition:all .3s;
}
.navbar-toggler:hover .navbar-toggler-bar{
  height:3px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(2){
  opacity:0;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(3){
  transform:-rotate(45deg) translate(5px,-5px);
}

/* Welcome Card */
.welcome-card{
  background:var(--glass-bg);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:2rem;
  box-shadow:0 8px 32px var(--shadow);
}
.welcome-card h1{
  color:var(--dark);
  font-weight:700;
}
.welcome-card h3{
  color:var(--dark);
  font-weight:600;
}

/* List item glass */
.list-item-glass{
  background:rgba(28,132,198,.05);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:.85rem 1.25rem;
  margin-bottom:.75rem;
  color:var(--dark);
  display:flex;
  align-items:center;
  transition:all .3s ease;
}
.list-item-glass:hover{
  background:rgba(28,132,198,.12);
  transform:translateX(5px);
}
.list-item-glass i{
  color:var(--blue);
  margin-right:10px;
  font-size:1.1em;
}

/* Link glass */
.link-glass{
  background:rgba(28,132,198,.1);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:.8rem 1.2rem;
  margin-bottom:.6rem;
  color:var(--dark);
  text-decoration:none;
  display:block;
  transition:all .3s ease;
}
.link-glass:hover{
  background:var(--blue);
  color:var(--white);
  transform:translateX(6px);
  box-shadow:0 6px 16px rgba(28,132,198,.2);
}

/* Footer */
.footer-glass{
  background:var(--glass-bg);
  backdrop-filter:blur(15px);
  border-top:1px solid var(--glass-border);
}

/* Profile Info Rows */
.profile-user-info.row {
  background:rgba(28,132,198,.04);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding: 1rem 1.25rem;
}
.profile-user-info.row > div[class*="col-md-4"],
.profile-user-info.row > div[class*="col-md-8"]{
  padding:.35rem .5rem;
  border-bottom:1px solid rgba(28,132,198,.10);
}
.profile-user-info.row > div[class*="col-md-8"]:last-child,
.profile-user-info.row > div[class*="col-md-8"] + div[class*="col-md-4"]:last-child{
  border-bottom:0;
}
.profile-info-name {
  color: var(--dark);
  font-weight: 600;
  font-size: 0.95rem;
}
.profile-info-value {
  color: var(--dark);
  font-weight: 500;
  font-size: 0.95rem;
}