* { box-sizing: border-box; }
 html, body { margin: 0; min-height: 100%; padding-top: 10px;}
body {
         
	font-family: Arial, Helvetica, sans-serif;
        color: #24324a;
        background:
          radial-gradient(circle at 8% 15%, rgba(255,0,128,.10), transparent 25%),
          radial-gradient(circle at 90% 80%, rgba(0,153,255,.12), transparent 27%),
          linear-gradient(135deg, #fff8fc 0%, #f5f9ff 48%, #fff 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
nav{
	position:relative;
	z-index:1000;
	max-width:1200px;
	width:calc(100% - 20px);
	margin:0 auto;
	padding:24px 0;
	display:flex;
	align-items:center;
	background: linear-gradient(to right, rgba(255,0,128,.02), rgba(255,0,128,.01));
	justify-content:space-between
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: cyan;*/
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0px 1px 10px #000;

}

.nav-logo a {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 20px;
}

.nav-item {
    color: black;
    text-decoration: none;
    padding: 5rem 5rem;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: #4f46e5; /* Accent color on hover */
}


/* Hide Hamburger Menu Icon by Default */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: black;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.nav-pill{
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.15em;
	border:1px solid rgba(139,33,69,.18);
	border-radius:999px;
	padding:10px 16px;
	background:rgba(255,255,255,.65);
	backdrop-filter:blur(8px)
}

    .colorbar {
        height: 7px;
        background: linear-gradient(90deg,#f04b3e,#f6a623,#f7df36,#4bbf73,#20a9d8,#3159b8,#8b4bb7,#ed2d84);
    }
    .page {
        width: min(1200px, calc(100% - 32px));
        margin: 0px auto;
        flex: 1;
    }
    .brand {
        text-align: center;
        margin-bottom: 24px;
    }
    .brand img {
        width: 200px;
        max-width: 55vw;
        height: auto;
        filter: drop-shadow(0 8px 12px rgba(30,45,70,.12));
    }
    .brand h1 {
        margin: 5px 0 5px;
        font-size: clamp(25px, 4vw, 22px);
        color: #e90079;
        letter-spacing: .3px;
    }
    .brand p {
        margin: 0;
        color: #667085;
        font-size: 15px;
    }
    .portal {
        max-width: 760px;
        margin: 0 auto;
        background: rgba(255,255,255,.96);
        border: 1px solid #e9edf5;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 22px 60px rgba(31,48,76,.13);
    }
    .portal-head {
        padding: 1px 1px 1px;
        text-align: center;
        background: linear-gradient(115deg, rgba(233,0,121,.06), rgba(35,156,220,.07));
        border-bottom: 1px solid #edf0f5;
    }
    .portal-head .eyebrow {
        display: inline-block;
        color: #e90079;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
    }
    .portal-head h2 { margin: 0 0 7px; font-size: 25px; color: #26344c; }
    .portal-head p { margin: 0; color: #697386; font-size: 14px; line-height: 1.55; }
   
    tr {
  	height: 20px;
    }
    td {
  	height: 20px;
    }
     .form-area { padding: 10px; }
    .fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: #39465d;
        margin: 0 0 7px;
    }
     .fields2 {
        display: grid;
        /*grid-template-columns: 1fr 1fr;*/
        gap: 18px;
    }
    label2 {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: #39465d;
        margin: 0 0 7px;
    }

    input[type=text], input[type=password] {
        width: 100%;
        height: 28px;
        border: 1px solid #d9dfeb;
        border-radius: 10px;
        padding: 0 13px;
        font-size: 16px;
        outline: none;
        background: #fbfcff;
        transition: .2s ease;
    }
    input[type=text]:focus, input[type=password]:focus {
        border-color: #e90079;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(233,0,121,.08);
    }
    .login-btn {
        width: 100%;
        height: 50px;
        margin-top: 20px;
        border: 0;
        border-radius: 10px;
        color: white;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .6px;
        cursor: pointer;
        background: linear-gradient(90deg,#e90079,#c52691);
        box-shadow: 0 9px 20px rgba(233,0,121,.20);
    }
    .login-btn:hover { filter: brightness(.97); transform: translateY(-1px); }
    .help {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid #edf0f5;
        background: #fbfcff;
    }
    .help a {
        padding: 18px 20px;
        text-align: center;
        text-decoration: none;
        color: #34518b;
        font-size: 13px;
        font-weight: 700;
    }
    .help a:first-child { border-right: 1px solid #edf0f5; }
    .help a:hover { color: #e90079; background: #fff8fc; }
      
    footer {
	display: block;
        text-align: center;
	padding: 10px 10px;
        color: #778195;
        font-size: 12px;
    }
    footer:before {
        content: "";
        display: block;
        width: 90px;
        height: 3px;
        border-radius: 3px;
        margin: 0 auto 15px;
        background: linear-gradient(90deg,#f6a623,#e90079,#239cdc);
    }

    

    
   
@media(max-width:900px) {
    .admin-nav { grid-template-columns:repeat(4,1fr); }
    .admin-tools { flex-direction:column; align-items:stretch; }
    .search-wrap { width:100%; }
}
@media(max-width:760px) {
    .admin-nav { grid-template-columns:repeat(2,1fr); }
    .admin-tools, .member-table-wrap { padding-left:18px; padding-right:18px; }
    .directory-footer { padding-left:18px; padding-right:18px; }
nav{
	padding:8px 0
}
.nav-pill{
	display:none
}
.menu-toggle {
        display: flex; /* Show hamburger icon on mobile */
    }

.nav-links {
	display: flex;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Adjust based on navbar height */
        left: -120%; /* Hidden off-screen by default */
        background-color: lightbrown;
        text-align: right;
        transition: all 0.4s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	background:var(--cream)
        /*padding: 1.5rem 0;*/
    }

    /* JavaScript will toggle this class to open the menu */
    .nav-links.active {
        left: 0; /* Slides the menu into view */
    }

    .nav-links li {
        margin: 0rem 0; /* Spacing between links on mobile */
    }
    .nav-item {
        font-size: 1.2rem;
        display: block;
        width: 100%;
    }

    /* Optional: Animated Hamburger to "X" when active */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }
        .page { width: min(100% - 20px, 760px); margin: 22px auto; }
        .fields { grid-template-columns: 1fr; }
        .form-area { padding: 24px 20px; }
        .portal-head { padding: 22px 20px 18px; }
        .help { grid-template-columns: 1fr; }
        .help a:first-child { border-right: 0; border-bottom: 1px solid #edf0f5; }
    }