/* General Styles */
body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background-color: #f8f9fa;
          color: #333;
      }
      
      .login-container {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background-color: #f8f9fa;
      }
      
      .login-card {
          width: 100%;
          max-width: 400px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      }
      
      /* Navbar Styles */
      .navbar {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      /* Card Styles */
      .card {
          border: none;
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
          margin-bottom: 20px;
      }
      
      .card-header {
          font-weight: 600;
      }
      
      /* Button Styles */
      .btn {
          padding: 8px 16px;
          font-weight: 500;
      }
      
      .btn-sm {
          padding: 5px 10px;
          font-size: 0.875rem;
      }
      
      /* Table Styles */
      .table {
          margin-bottom: 0;
      }
      
      .table th {
          font-weight: 600;
          background-color: #f8f9fa;
      }
      
      /* Responsive Styles */
      @media (max-width: 768px) {
          .login-card {
              margin: 20px;
          }
          
          .card-body {
              padding: 15px;
          }
      }
      
      /* Custom Styles */
      .subject-card {
          transition: transform 0.2s;
      }
      
      .subject-card:hover {
          transform: translateY(-5px);
      }
      
      .video-item {
          background-color: #f8f9fa;
          border-radius: 5px;
      }
      
      .remove-item {
          margin-bottom: 10px;
      }
      .video-thumbnail {
        transition: transform 0.2s;
        object-fit: cover;
    }
    .video-thumbnail:hover {
        transform: scale(1.05);
    }