.collapsible-section {
  .nav-pills {
    overflow-x: auto;
    scrollbar-width: none;

    .nav-link {
      border: 2px solid black;
      margin: 0 5px;
      border-radius: 25px;
      font-size: initial;
      padding: .25rem .75rem;
      width: max-content;
      background: none;
      color: black;

      &.active {
        background-color: var(--background-color, #800000) !important;
        color: white !important;
        border-radius: 25px;
        border: 2px solid var(--background-color, #800000) !important;
      }
    }
  }
}

.accordion {
  >.card {
    border-radius: .25rem !important;

    &:first-of-type {
      border-bottom: 1px solid rgba(0,0,0,.125);
      border-radius: .25rem !important;
    }

    &:not(:first-of-type):not(:last-of-type) {
      border-bottom: 1px solid rgba(0,0,0,.125);
      border-radius: .25rem !important;
    }

    .card-header {
      background: none;
      cursor: pointer;
      font-size: 18px;

      &:has(+ .collapse.show),
      &:has(+ .collapsing) {
        border-bottom: none;
      }

      > a {
        padding-right: 25px;
        position: relative;
        color: black;
        display: block;

        &:hover {
          text-decoration: none;
        }

        &:after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          top: calc(50% - 12px);
          height: 25px;
          width: 25px;
          text-align: right;
          background-image: url('../images/icons/collapsible-arrow.svg');
          transform: rotate(0deg);
          transition: 0.3s;
        }
        &.collapsed {
          &:after { content: ''; transition: 0.3s; transform: rotate(180deg); }
        }
      }
    }

    .card-body {
      padding-top: .25rem;
      padding-bottom: .25rem;

      @media (max-width:767px) {
        img {
          max-width: 100%;
          height: auto;
        }
      }
    }
  }
}