.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
  }

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

  /* Session and Subtitle */
  .card .session {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .card .subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 1rem;
  }

  /* Course Details */
  .card .course-code {
    font-size: 1.25rem;
    font-weight: bold;
    color: #007bff;
  }

  .card .course-title {
    font-size: 1rem;
    font-weight: 400;
    color: #555;
    margin-bottom: 1rem;
  }

  /* File Type and Buttons */
  .card .file-type {
    font-size: 0.9rem;
    color: #555;
    margin-right: auto;
    text-align: left;
  }

  .card .btn {
    font-size: 0.9rem;
    padding: 8px 16px;
  }

  /* Custom progress bar styles */
.custom-progress-bar {
  appearance: none; /* Removes default styles */
  width: 100%;
  height: 20px; /* Increased height */
  border-radius: 10px;
  overflow: hidden;
  background-color: #e0e0e0; /* Light gray background */
}

.custom-progress-bar::-webkit-progress-bar {
  background-color: #e0e0e0; /* Background for unsupported browsers */
  border-radius: 10px;
}

.custom-progress-bar::-webkit-progress-value {
  background: linear-gradient(90deg, #00ff00, #008000); /* Gradient from light green to dark green */
  border-radius: 10px;
}

.custom-progress-bar::-moz-progress-bar {
  background: linear-gradient(90deg, #00ff00, #008000); /* Gradient for Firefox */
  border-radius: 10px;
}

.card:hover { transform: none!important; transition: none!important; }
@media (max-width: 767.98px) {
  .course-records .col-md-6 { flex:0 0 100%; max-width:100%; }
  .record-btn { margin-left:auto!important; }
}
/* New responsiveness for 570px and below */
@media (max-width: 570px) {
  .course-records .d-flex {
    flex-wrap: wrap !important;
  }
  /* Icon+heading and button stay on first line */
  .course-records .d-flex > :not(.flex-grow-1) {
    order: 1;
  }
  /* Progress bar moves to second line */
  .course-records .d-flex > .flex-grow-1 {
    order: 2;
    width: 100%;
    margin-top: .5rem;
  }
  /* Scale down icon and text */
  .course-records .d-flex > .me-3.fs-5 img {
    width: 24px;
    height: 24px;
  }
  .course-records .d-flex > .me-3.fs-5 {
    font-size: 14px;
  }
  /* Scale down button */
  .course-records .d-flex > .record-btn .btn-sm {
    padding: 4px 8px;
    font-size: .8rem;
  }
}
.border { border:1px solid #ddd!important; }
.shadow-sm { box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important; }