:root {
       --bg-light: #f8fafc;
       --bg-dark: #0f172a;
       --card-light: #ffffff;
       --card-dark: #1e293b;
       --text-light: #1f2937;
       --text-dark: #e5e7eb;
       --primary: #4f46e5;
       --success: #198754;
       --danger: #dc3545;
       --info: #0dcaf0;
       --warning: #ffc107;
       --secondary: #6c757d;
       --dark: #212529;
       --accent-color: #c8102e;

   }

   body {
       font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
       line-height: 1.7;
       color: #333;
       background-color: var(--bg-light);
       transition: background-color 0.3s, color 0.3s;
   }


   body.dark-mode {
       background-color: var(--bg-dark);
       color: var(--text-dark);
   }

   body.dark-mode .card {
       background-color: var(--card-dark);
       color: var(--text-dark);
       border-color: #374151;
   }

   body.dark-mode .text-muted {
       color: #9ca3af !important;
   }

   .navbar {
       background-color: var(--primary-color);
   }

   #wrapper {
       display: flex;
       flex: 1;
   }

   #sidebar {
       width: 250px;
   }

   #content {
       flex: 1;
       padding: 20px;
   }

   .carousel .carousel-item img {
       width: 100%;
       height: 300px;
       object-fit: cover;
       margin: auto;
   }

   .carousel {
       width: 100%;
       margin: auto;
   }

   .gradient-bg {
       background: linear-gradient(45deg, #0d6efd 0%, rgb(214, 185, 58) 100%);
       background-size: cover;
       background-repeat: no-repeat;
   }

   #global-loader {
       position: fixed;
       inset: 0;
       background: rgba(255, 255, 255, 0.96);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 9999;
       transition: opacity 0.3s ease, visibility 0.3s ease;
   }

   #global-loader.show {
       display: flex;
       opacity: 1;
       visibility: visible;
   }

   #global-loader.hidden {
       display: none;
       opacity: 0;
       visibility: hidden;
   }

   .loader-content {
       text-align: center;
       font-family: system-ui, -apple-system, sans-serif;
       color: #333;
   }

   .loader-logo {
       width: 56px;
       height: auto;
       margin-bottom: 12px;
   }

   .spinner {
       width: 42px;
       height: 42px;
       border: 4px solid #e0e0e0;
       border-top-color: #0d6efd;
       border-radius: 50%;
       animation: spin 0.9s linear infinite;
       display: block;
       margin: 0 auto 10px;
   }

   .loader-text {
       font-size: 0.95rem;
       opacity: 0.8;
   }



   .hero {
       background: linear-gradient(rgba(0, 48, 135, 0.9), rgba(0, 48, 135, 0.9)), url('https://picsum.photos/id/1015/1920/600') center/cover no-repeat;
       color: white;
       padding: 110px 0 80px;
   }

   .section-title {
       color: var(--primary-color);
       border-bottom: 3px solid var(--accent-color);
       padding-bottom: 12px;
       margin-bottom: 35px;
   }

   .card {
       border: none;
       border-radius: 14px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
       transition: box-shadow 0.3s;
       transition: all 0.3s ease;

   }

   .card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   }

   .toc ul {
       max-height: 70vh;
       overflow-y: auto;
   }

   footer {
       background-color: #f8f9fa;
   }

   .important-note {
       background-color: #fff3cd;
       border-left: 5px solid #ffc107;
   }


   .section-title {
       font-weight: 700;
       margin-bottom: 1rem;
   }

   .stat-box {
       text-align: center;
       padding: 1.5rem;
   }

   .stat-box h3 {
       font-weight: 700;
       color: var(--primary);
   }

   .faculty-img {
       width: 120px;
       height: 120px;
       object-fit: cover;
       border-radius: 50%;
       border: 2px solid var(--primary);
   }

   .career-card .card-title {
       font-size: 1.25rem;
   }

   .career-card ul {
       font-size: 0.95rem;
   }

   .filter-btn {
       margin-right: 0.5rem;
       margin-bottom: 0.5rem;
   }

   .modal-content {
       border-radius: 14px;
   }

   body.dark-mode .modal-content {
       background-color: var(--card-dark);
       color: var(--text-dark);
   }

   body.dark-mode .close {
       color: var(--text-dark);
   }

   .skill-mapping {
       font-size: 0.9rem;
   }

   .skill-mapping .badge {
       margin: 0.2rem;
   }

   /* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
   @media screen and (min-width: 601px) {
       .navbar-brand {
           font-size: 14px;
       }
   }

   /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
   @media screen and (max-width: 600px) {
       .navbar-brand {
           font-size: 10px;
       }
   }

   @media (max-width: 768px) {
       #sidebar {
           display: none;
       }

       #sidebar.show {
           display: block;
       }
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }