:root {
      --primary-color: #4f46e5;    /* Indigo */
      --text-main: #1e293b;        /* Slate 800 */
      --text-muted: #64748b;       /* Slate 500 */
      --bg-hover: #f1f5f9;         /* Slate 100 */
      --bg-dropdown: #ffffff;      /* White */
      --border-color: #e2e8f0;    /* Slate 200 */
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
      --transition-fast: 0.2s ease;
    }
    
    /* Nav Base Styling */
nav {
      display: block;
      background-color: var(--bg-dropdown);
      border-bottom: 1px solid var(--border-color);
      margin-left: 55px;
    }
    
    /* Main Navigation Menu List */
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center; /* Vertically align items */
    }
    
    /* List Item Container */
    nav ul li {
      position: relative;
    }
    
    /* Links Styling */
    nav ul li a {
      display: block;
      padding: 16px 24px;
      color: var(--text-main);
      font-family: system-ui, -apple-system, sans-serif;
      font-weight: 500;
      font-size: 14px;
      text-decoration: none;
      transition: color var(--transition-fast), background-color var(--transition-fast);
    }
    
    /* Main Menu Hover State */
    nav ul li a:hover {
      background-color: var(--bg-hover);
      color: var(--primary-color);
    }
    
    /* Dropdown Menu Styling */
    nav ul li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: var(--bg-dropdown);
      min-width: 200px;
      z-index: 1000;
      border: 1px solid var(--border-color);
      border-radius: 8px; /* Smooth rounded corners */
      box-shadow: var(--shadow-lg); /* Soft floating shadow */
      padding: 6px 0;
    }
    
    /* Show Dropdown on Hover */
    nav ul li:hover > ul {
      display: block;
    }
    
    /* Dropdown Sub-Items */
    nav ul li ul li {
      width: 100%;
    }
    
    /* Dropdown Links Adjustments */
    nav ul li ul li a {
      padding: 10px 16px;
      color: var(--text-muted);
      font-weight: 400;
    }
    
    /* Dropdown Link Hover State */
    nav ul li ul li a:hover {
      background-color: var(--bg-hover);
      color: var(--primary-color);
    }
    
    nav > ul > li.logout-right {
        float: right;
        margin-left: auto; /* Pushes it away from the rest of the nav items */
    }
    
    /* Modernizing the logout link itself */
    nav > ul > li.logout-right .logout-btn {
        background-color: #ff4d4f; /* Modern red color for logout/destructive actions */
        color: #ffffff;
        padding: 10px 20px;
        border-radius: 25px; /* Creates the pill-shaped button effect */
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }
    
    /* Hover effects for a modernized feel */
    nav > ul > li.logout-right .logout-btn:hover {
        background-color: #d9383a;
        transform: translateY(-2px); /* Slight lift on hover */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Modernized Subtle Divider */
    hr {
      border: none;
      height: 1px;
      background-color: var(--border-color);
      margin: 0;
    }

/*    .logo-container img {
            width: 80px;
            margin-right: 0px;
            height: auto;
            border-radius: 4px;
    }
    h1, h2 {
	    margin-top: 5px;
        margin-left: 76px;
        color: navy;
    }
    p {
	    font-size: 18px;
        margin-top: 20px;
        margin-left: 500px;
        margin-right: 100px;
        text-align: justify;
        color: black;
    }
    main {
        width: 25%;
	    background-color: navy;
	    color: white;
    	position: fixed;  
        padding: 25px;
        margin: 8px;
        border-radius: 5px;
    }     
    .image-container {
        content: "© Watermark Text";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1000; /* Behind all content */
/*        opacity: 0.3; /* Transparent */
/*        pointer-events: none; /* Allows clicks to pass through */   
/*    }
        .userlogin-container {
	        color: white;
            margin-bottom: 50px;
	}
    form {
            width: 90%;
            background: #fff;
            padding: 10px;
            border-radius: 5px;
            margin: auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
	        color: black;	
        }
        input, textarea, select {
            width: 90%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            width: 15%;
            margin: 15px;
            margin-left: 2px;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
            .sliding-background {
                  position: fixed; /* Keeps background in place */
/*                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 20%;
                  z-index: -1; /* Puts background behind content */
/*                  background-size: cover;
                  background-position: right;
                  /* Animation: name duration timing-function delay iteration-count */
/*                  animation: slideShow 65s infinite;
            }
    .alert-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            padding: 12px;
            margin-bottom: 20px;
            border-radius: 4px;
        } */