/* 🌐 contents were moved to MS_Styles.css */
/* THEME COLOR #B1ABAB Grey , try //FFD966, B1ABAB*/
/* font color #961A1A -> 961A1A*/
:root {
    --brand-color: #B1ABAB;
    --bs-navbar-active-color: #961A1A;
}


#lganjHeader {
  background-color:   #B1ABAB;
  color: #961A1A;
  font-size: 24px;
  padding: 1px;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
 // z-index: 1000; /* ensures it stays above other content */
}







/* Menu in header */

/* Navbar background */
/* Base navbar styling */
/* Navbar container */
.navbar {
  background-color: var(--brand-color); /* your brand color */
  padding: 0.5rem 1rem;                 /* balanced padding */
}

/* Navbar toggler (hamburger button) */
.navbar-toggler {
  border: none;                         /* remove border */
}
.navbar-toggler-icon {
  /* Bootstrap default icon, you can override with your own SVG if desired */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2896,26,26,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Collapsible container */
.navbar-collapse {
  justify-content: flex-end;            /* push menu items to right */
}

/* Nav list */
.navbar-nav {
  display: flex;
  gap: 0.5rem;                          /* spacing between items */
  margin: 0;
  padding: 0;
}

/* Nav items */
.navbar-nav .nav-item {
  margin: 0;
  padding: 0;
}

/* Nav links */
.navbar-nav .nav-link {
  font-size: 14px !important;           /* force 12px font size */
  color: #961A1A !important;            /* theme color */
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;             /* compact spacing */
  line-height: 1.2;
  transition: color 0.2s ease;
}

/* Hover effect */
.navbar-nav .nav-link:hover {
  color: yellow !important;             /* hover color */
  text-decoration: underline;
}

/* Active link */
.navbar-nav .nav-link.active {
   color: #961A1A !important;   /* Bootstrap active color variable */
}



/* body */


body {
  background-color:   #B1ABAB;
  color: #961A1A;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
//  padding-top: 140px;
}

/* footer */

footer {
  background-color:   #B1ABAB;
  color: white;
  padding: 2px;
  font-size: 14px;
}


.w3-container {
  background-color:   #B1ABAB; 
  color: #961A1A;
  font-size: 16px;
}

.w3-card {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #961A1A;
}

#w3card1
{
    color: #961A1A
}
#w3card2
{
    color: #961A1A
}
#w3card3
{
    color: #961A1A
}

 ul {
      list-style: none;
      padding: 0;
    }
    li {
      margin: 10px 0;
    }
    i {
      color: #961A1A; /* matches your header branding */
      margin-right: 8px;
    }
    .note {
      margin-top: 20px;
      font-size: 14px;
      color: #555;
      border-top: 1px solid #ccc;
      padding-top: 10px;
    }

/* 🆔 ID-Based Styling */

/* Override Bootstrap's default .btn-primary */
.btn-primary {
  background-color: #961A1A!important;   /* your preferred background */
  border-color: #961A1A!important;       /* match border */
  color: #fff!important;                 /* text color */
}

/* Optional: hover/focus states */
.btn-primary:hover,
.btn-primary:focus {
  background-color: #A81E1E;   /* darker shade on hover */
  border-color: #A81E1E;
  color: #fff;
}