body {
     font-family: Arial, sans-serif;
     background: #ffffff;
     font-family: Arial, sans-serif;
     color: black;
     font-size: 14px;
     overflow-x: hidden;
 }

 /* ---------- OVERLAY ---------- */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(3px);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 900;
 }

 .overlay.active {
     opacity: 1;
     visibility: visible;
 }

 /* ---------- SIDEBAR ---------- */
 .sidebar {
     background: #071125;
     width: 250px;
     height: 100vh;
     position: fixed;
     top: 0;
     left: 0;
     padding: 2rem 1rem;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     transition: transform 0.3s ease;
     z-index: 1000;
 }


 /* ------------ side bar for mobile -------- */
 @media (max-width: 768px) {
     body.no-scroll {
         height: 100vh;
         overflow: hidden;
     }

     .sidebar {
         width: 50vw;
     }
 }

 .sidebar h2 {
     margin-bottom: 2rem;
 }

 .sidebar a {
     color: white;
     text-decoration: none;
     margin: 10px 0;
     font-size: 2vh !important;

 }

 .sidebar a:hover {
     color: #0d6efd;
 }

 /* ---------- DESKTOP (default visible) ---------- */
 @media (min-width: 769px) {
     .sidebar {
         transform: translateX(0);
     }

     .sidebar.closed {
         transform: translateX(-290px);
     }

     .main {

         margin-left: 250px;
         padding: 4rem;
         transition: margin-left 0.3s ease;
     }

     .sidebar.closed~.main {
         margin-left: 0;
     }

     .overlay {
         display: none;

     }
      .sidebar a{
        font-size: small !important;
     }
     
 }

 /* ---------- MOBILE (default hidden) ---------- */
 @media (max-width: 768px) {
     .sidebar {
         transform: translateX(-100%);
     }

     .sidebar.open {
         transform: translateX(0);
     }

     .main {
         margin-left: 0;
         padding: 2rem;
     }

     .sidebar a {
         font-size: x-small;
         font-family: 'Times New Roman', Times, serif;
     }
 }

 /* ---------- TOGGLE BUTTON ---------- */
 .toggleBtn {
     position: fixed;
     top: 1rem;
     left: 1rem;
     font-size: 1rem;
     background: #0d6efd;
     color: white;
     border: none;
     padding: 0.5rem 0.8rem;
     border-radius: 8px;
     cursor: pointer;
     z-index: 1100;
     transition: all 0.3s ease;
 }

 @media (max-width: 768px) {
     .toggleBtn {
         right: 1rem;
         left: auto;
     }
 }

 .main {
     font-family: 'Times New Roman', Times, serif;
     display: grid;
     justify-content: center;
 }

 .main nav ul li {
     text-align: center;
     list-style: none;
     font-family: "algerian";
     font-size: large;
 }

 .main h1 {
     text-align: center;
     font-family: "algerian";
     font-size: xx-large;
 }

 .main h4 {
     text-align: center;
 }

 .sidebar {

     font-family: "algerian";
     font-size: large;
 }

 .sidebar h2 img {
     width: 5rem;
     height: 5rem;
     border-radius: 50%;
 }

 .main_content {
     display: grid;
     place-items: center;
 }

 .logout {
     background: #e74c3c;
     border: none;
     margin-top: -5px;
     padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
     font-size: 2rem;

 }

 .logout:hover {
     background: #c0392b;
     transform: scale(1.05);
     color: white !important;
 }

 summary {
     margin: 10px;
 }

 @media print {


     .toggleBtn {
         display: none;
     }

 }