.course-dp-container {
    padding: 2rem 1rem;
    background-color: #16161d;
    color: #ccc;
  }

  .course-dp-wrapper{
    max-width: 68rem;
    margin: 0 auto;
  }


  .course-dp-section{
    display: flex;
    gap: 2rem;
    flex-direction: row-reverse;
  }

  .course-dp-text-section{
    max-width: 43rem;
    margin: 0 auto;
  }

  .course-dp-image-section {
    background-color: #151515;
    align-self: start;
    max-width: 19rem;

  }
  .course-dp-text-section h1 {
    font-size: clamp(24px, calc(22px + 0.9375vw), 29px);
    margin-top: -10px;
  }
  
  .course-dp-image {
    width: 100%;
    display: block;
  }

  .learning-objectives-section{
    padding: 2rem 1rem;
  }

  .learning-objectives-wrapper{
    max-width: 68rem;
    margin: 0 auto;
  }

  .learning-list-container{
    border: 1px solid #d1d2e0;
    padding: 1.5rem;
  }

  .learning-list{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .learning-list li{
    width: calc(50% - (2.4rem / 2));
    list-style: none;
    display: flex;
    padding-block: 0.6rem;
    padding-inline: 0;
    font-size: 14px;
  }

  .checkmark{
    padding-right: 10px;
  }

    #learning-list li {
  display: none;
  }

  /* Show first 6 items by default */
  #learning-list li:nth-child(-n+6) {
    display: flex;
  }

  /* Show all items when checkbox is checked */
  #toggle:checked ~ #learning-list li {
    display: flex;
  }

  #toggle {
    display: none;
  }

  .toggle-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    text-align: center;
  }

  .toggle-button::after {
    content: "Show More";
  }

  #toggle:checked + #learning-list + .toggle-button::after {
    content: "Show Less";
  }

  /* Hide the button by default (in case JS hides it) */
  .toggle-button.hidden {
    display: none;
  }

  .course-download-section {
    padding: 2rem 1rem;
   
  }

  .download-box{
    max-width: 68rem;
    margin: 0 auto;
  }

  .download-box h2{ 
    padding-bottom: .5rem;
  }

  .file-size {
    font-size: 23px;
    margin-top: 2rem;
}

  .download-box a{
   
  color: #00bf80;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    font-size: clamp(1.1rem, calc(1.1rem + (1.2 - 1.1) * calc((100vw - 36rem) / (144 - 36))), 1.2rem);
  }

  .more-subtitles {
    display: none;
  }

  .more-subtitles.show {
    display: inline;
  }

  .small-text span{
    color: #c0c4fc;
    text-decoration: underline;
  }

  .toggle-subtitles{
    background: 0;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    color: #c0c4fc;
    font-family: system-ui;
    font-size: 15px;
    font-weight: 500;
  }

  .course-includes-section{
    padding: 2rem 1rem;
  }

  .course-includes-wrapper{
    max-width: 68rem;
    margin: 0 auto;
  }

  .course-description-section{
    padding: 2rem 1rem;
  }

  .description-wrapper{
    max-width: 68rem;
    margin: 0 auto;
  }

  .course-features{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .course-features li{
    width: calc(50% - (2.4rem / 2));
    list-style: none;
    display: flex;
    padding-block: 0.6rem;
    padding-inline: 0;
    font-size: 15px;
    padding-left: 5px;

  }

  .course-requirements-section{
    padding: 2rem 1rem;
  }

  .requirements-container{
    max-width: 68rem;
    margin: 0 auto;
  }





  .description-content ul, .requirements-content ul {
    list-style-position: outside;  /* Bullet remains outside text */
    padding-left: 1.4em;           /* Space for bullet */
    font-size: 14px;
  }

  .description-content ul li{
    margin-top: 1rem;
  }

  .description-content p{
    margin-top: 1rem;
  }

  
  ::marker {
    font-size: 18px;
  }

  .requirements-list li {           
    padding-left: .5em;           /* Align wrapped lines */
    padding-block: 0.3rem;
  }


  @media(max-width: 1060px){
    .course-dp-container{
      background-color: transparent;
      color: #2a2b3f;
    }
    .course-dp-section{
      flex-direction: column-reverse;
    }
    .course-dp-image-section{
      max-width: 43rem;
      margin: 0 auto;
    }

    .requirements-container{
      max-width: 43rem;
    }

    .small-text span{
      color: #6d28d2;
    }

    .toggle-subtitles{
      color: #6d28d2;
    }

    .learning-objectives-wrapper{
      max-width: 43rem;
    }

    .learning-objectives-wrapper{
      max-width: 43rem;
    }

    .course-includes-wrapper{
      max-width: 43rem;
    
      }

      .description-wrapper{
        max-width: 43rem;
      }

      .download-box{
        max-width: 43rem;
      }
  }

  @media(max-width: 600px){
    .learning-list li {
      width: calc(100% - (2.4rem / 2));
    }

    #learning-list li:nth-child(-n+6) {
    display: none;
  }

    #learning-list li:nth-child(-n+3) {
    display: flex;
  }

    .course-features li{
      width: calc(100% - (2.4rem / 2));
    }

  }

  

  .short-dp, .small-text, .course-dp-subtitles{
    margin-top: .8rem;
  }

  .short-dp{
    font-size: clamp(1.1rem, calc(1.1rem + (1.2 - 1.1) * calc((100vw - 36rem) / (144 - 36))), 1.2rem);
  }