header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000; /* Adjust as needed */
  
  }
  
  .content { height: 2000px; /* Example content height to test scrolling */ 
  padding: 20px; 
  background-color: #f4f4f4;
  }
  
  html, body {
  height: 100%;
  margin: 0;
  }
  
  
          * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
          }
  
          body {
              font-family: Arial, sans-serif;
              line-height: 1.6;
              background: #f4f5f7;
              padding: 20px;
          }
  
          .create-task-btn {
              position: fixed;
              top: 20px;
              right: 20px;
              background: #0052cc;
              color: white;
              border: none;
              padding: 12px 24px;
              border-radius: 4px;
              cursor: pointer;
              font-size: 14px;
              transition: background 0.3s;
              z-index: 100;
          }
  
          .create-task-btn:hover {
              background: #0747a6;
          }
  
          .modal {
              display: none;
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0,0,0,0.5);
              z-index: 1000;
          }
  
          .modal-content {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: white;
              padding: 20px;
              border-radius: 8px;
              width: 90%;
              max-width: 500px;
          }
  
          .close-modal {
              position: absolute;
              right: 20px;
              top: 20px;
              font-size: 24px;
              cursor: pointer;
              color: #172b4d;
          }
  
          .form-group {
              margin-bottom: 15px;
          }
  
          .form-group label {
              display: block;
              margin-bottom: 5px;
              font-weight: bold;
              color: #172b4d;
          }
  
          .form-group input,
          .form-group textarea,
          .form-group select {
              width: 100%;
              padding: 8px;
              border: 1px solid #dfe1e6;
              border-radius: 4px;
              font-size: 14px;
          }
  
          .form-group textarea {
              height: 100px;
              resize: vertical;
          }
  
          .submit-btn {
              background: #0052cc;
              color: white;
              border: none;
              padding: 10px 20px;
              border-radius: 4px;
              cursor: pointer;
              font-size: 14px;
              transition: background 0.3s;
          }
  
          .submit-btn:hover {
              background: #0747a6;
          }
  
          .kanban-board {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 20px;
              margin-top: 40px;
          }
  
          .column {
              background: #f4f5f7;
              border-radius: 8px;
              padding: 15px;
              min-height: 400px;
          }
  
          .column h2 {
              color: #172b4d;
              font-size: 18px;
              margin-bottom: 15px;
              padding-bottom: 10px;
              border-bottom: 2px solid #dfe1e6;
          }
  
          .task-card {
              background: white;
              padding: 15px;
              border-radius: 6px;
              margin-bottom: 10px;
              cursor: move;
              box-shadow: 0 1px 3px rgba(0,0,0,0.1);
              border-left: 4px solid;
              transition: all 0.3s ease;
          }
  
          .task-card:hover {
              transform: translateY(-2px);
              box-shadow: 0 3px 6px rgba(0,0,0,0.15);
          }
  
          .task-card.high-priority { border-left-color: #ff5630; }
          .task-card.medium-priority { border-left-color: #ffab00; }
          .task-card.low-priority { border-left-color: #36b37e; }
  
          /* Column-specific card colors */
          #todo .task-card { background: #ffffff; }
          #inProgress .task-card { background: #deebff; }
          #done .task-card { background: #e3fcef; }
          #backlog .task-card { background: #fff7e6; }
  
          .task-card h3 {
              color: #172b4d;
              font-size: 16px;
              margin-bottom: 8px;
          }
  
          .task-card p {
              color: #5e6c84;
              font-size: 14px;
              line-height: 1.4;
          }
  
          .complete-btn {
              background: #36b37e;
              color: white;
              border: none;
              padding: 5px 10px;
              border-radius: 3px;
              margin-top: 10px;
              cursor: pointer;
              transition: background 0.3s;
          }
  
          .complete-btn:hover {
              background: #2d9669;
          }
  
          .column.drag-over {
              background: #ebecf0;
              border: 2px dashed #0052cc;
          }