.course-overview-wrapper {
  .search-bar {
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    background: #fff;
    transition: border-color 0.3s ease; /* Smooth transition for border color */
  }

  /* Change border color when input is focused */
  .search-bar:focus-within {
    border-color: #663399; /* New border color (e.g., purple) */
  }

  .search-bar input {
    padding-left: 0.5rem;
    outline: none;
    border-radius: 0.5rem;
    width: 100%;
    border: none;
  }

  .category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
  }

  .category-tabs li {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 100px;
    background-color: transparent;
    color: #979797;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 0.81rem;
  }

  .category-tabs li:hover,
  .category-tabs li.active {
    background-color: #663399;
    color: white;
  }

  /* Skeleton Loader */
  .category-tabs .skeleton-tab {
    height: 37px;
    width: 12.99rem;
    border-radius: 100px;
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin: 0 5px;
  }

  /* Skeleton animation */
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* Category Section */
  .category {
    // background: #fff;
    border-radius: 0.5rem;
    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #fff;
    color: #fff;
    border-radius: 0.375rem;
    cursor: pointer;
  }

  .category.active .category-header,
  .category.active:hover .category-header {
    background-color: #663399;
  }

  .category.active .category-header .category-title span,
  .category.active:hover .category-header .category-title span {
    color: white;
  }

  .category.active .category-header .category-title svg path,
  .category.active:hover .category-header .category-title svg path {
    fill: white;
  }
  .category-title {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .category-title span {
    color: #5e5e5e;
  }

  .category-header .category-title svg path {
    fill: #663399;
  }

  .search-results-list {
    display: grid !important;
  }

  .courses-container,
  .search-results-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 375px));
    gap: 20px;
    padding-block: 1rem;
    background: #f8f9fe;
  }

  @media (max-width: 768px) {
    .courses-container {
      grid-template-columns: 1fr;
    }

    .course-title {
      font-size: 0.875rem;
    }
  }

  .course-item {
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 2px 20px 0px #0000000d;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
  }

  .course-item:hover {
    transform: scale(1.05);
  }

  .course-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .course-description-wrapper {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem !important;
    gap: 1rem;
  }

  .course-path {
    background-color: #24c4541a;
    border-radius: 0.25rem;
    color: #17aa43;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
  }

  .course-title {
    color: #000000;
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .course-description {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #858585;
  }

  .course-description > p {
    margin-bottom: 0;
    font-size: 0.875rem;
  }

  .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block; /* Prevents inline spacing from images */
    border-radius: inherit; /* Ensures the image matches the parent border-radius */
  }

  /* Course Card */
  .course-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
  }

  .course-card:hover {
    transform: scale(1.05);
  }

  .course-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  .course-card-content {
    padding: 15px;
  }

  .course-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }

  .course-card-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }

  .course-card-duration {
    font-size: 12px;
    font-weight: bold;
    color: #6a1b9a;
  }

  /* Expand/Collapse Icon */
  .toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease; /* Smooth rotation */
    transform: rotate(0deg); /* Default position */
  }

  .toggle-icon svg > path {
    transition: fill 0.3s ease; /* Smooth color change */
    fill: #663399; /* Default SVG color */
  }

  .category-header.active .toggle-icon {
    transform: rotate(180deg); /* Rotate the container (span) */
  }

  .category-header:hover .toggle-icon svg > path,
  .category-header.active .toggle-icon svg > path {
    fill: white; /* Change SVG fill color to white when active */
  }

  /* Category Main Header */
  .category-main-header {
    margin-bottom: 1rem;
  }

  .courses-content-wrapper > .nav-tabs {
    background-color: transparent;
    border: none;
  }

  .courses-content-wrapper > .nav-tabs .nav-link {
    background-color: transparent;
    border: none !important;
    padding: 1rem !important;
    color: #aaaaaa;
    font-weight: 600;
  }

  .courses-content-wrapper > .nav-tabs .nav-link::before,
  .courses-content-wrapper
    > .nav-tabs
    .responsivetabs-more
    .dropdown-toggle::before {
    border-top: none !important;
    border-bottom: 2px solid transparent;
    top: unset !important;
    bottom: 0;
  }

  .courses-content-wrapper > .nav-tabs .nav-link.active,
  .courses-content-wrapper
    > .nav-tabs
    .responsivetabs-more
    .dropdown-toggle.active {
    color: #663399;
  }

  .courses-content-wrapper > .nav-tabs .nav-link.active::before,
  .courses-content-wrapper
    > .nav-tabs
    .responsivetabs-more
    .dropdown-toggle.active::before {
    border-bottom-color: #663399;
    color: #663399;
  }

  .course-view-select {
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 14px;
  }

  /* Display Area */
  .course-view-select-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background-color: white;
  }

  .dropdown-icon {
    transition: transform 0.3s ease;
  }

  /* Rotate dropdown arrow when active */
  .course-view-select-display.active .dropdown-icon {
    transform: rotate(180deg);
  }

  /* Options List */
  .course-view-select-options {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    z-index: 1000;
  }

  .course-view-select-options li {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .course-view-select-options li:hover {
    background-color: #f2f2f2;
  }

  /* Show the options list */
  .course-view-select.open .course-view-select-options {
    display: block;
  }

  .main-wrapper {
    display: flex;
    flex-direction: column;
  }

  .search-result-wrapper {
    display: none;
  }

  .data-loader svg {
    fill: #663399;
    width: 3rem;
    aspect-ratio: 1;
    animation: data-loader 500ms infinite linear;
  }
}

@keyframes data-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}