/* Global Font Styling */
   body {
       font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
       font-size: 1.1rem;
       /* Slightly bigger font */
   }

   .pagetitle {
       font-family: 'Trebuchet MS', sans-serif;
       font-weight: 800;
       font-size: 2.5rem;
       /* Bigger font size */
       color: rgb(51, 51, 51);
       padding-left: 5vw;
       margin-top: 10px;
   }

   /* Sidebar and Main Content Styling */
   #sidebarCard {
       padding: 20px;
       background-color: #f8f9fa;
       border-radius: 8px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       display: none;
       /* Hide the sidebar by default */
       position: fixed;
       /* Ensure it's above content */
       top: 0;
       left: 0;
       height: 100vh;
       width: 80%;
       z-index: 1050;
       overflow-y: auto;
       transition: transform 0.3s ease-in-out;
   }

   #sidebarCard.active {
       display: block;
       /* Show the sidebar when active */
   }

   #menuToggle {
       display: block;
       position: fixed;
       top: 10px;
       left: 10px;
       z-index: 1100;
       background-color: #007bff;
       color: white;
       border: none;
       border-radius: 5px;
       padding: 10px;
       cursor: pointer;
   }

   @media (min-width: 768px) {
       #menuToggle {
           display: none;
           /* Hide menu button on larger screens */
       }

       #sidebarCard {
           display: block;
           position: static;
           height: auto;
           width: 100%;
       }

   }


   /* Sidebar and Main Content Styling */
   #sidebarCard {
       padding: 20px;
       background-color: #f8f9fa;
       border-radius: 8px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       margin-top: 15vh;
       /* Moves the menu card slightly down */
   }

   #sidebarCard h5 {
       text-align: center;
       font-size: 1.8rem;
       /* Bigger font for the menu title */
       font-weight: bold;
   }

   #sidebarCard .nav-link {
       font-size: 1.1rem;
       /* Adjust font size */
       padding: 10px 15px;
       border-radius: 5px;
       transition: background-color 0.3s ease;
   }

   #sidebarCard .nav-link:hover {
       background-color: #e9ecef;
   }

   /* Main Content Styling */
   .card {
       width: 90%;
       /* Make cards take full width */
       margin-bottom: 3vw;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   }

   .card:hover {
       box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   }

   .container {
       padding: 20px 20px;
   }