// ==============================================
// 💪 SKILL SCOPE SCSS
// ==============================================

.sec-breadcrumb{
  &.mt-150{
    margin-top: 156px !important;

    @media screen and (max-width: $screen-xs) {
      margin-top: 118px !important
    }
  }
}

.sec-skill-scope {
  padding: 214px 0 48px;
  @media screen and (max-width: 991px) {
    padding: 150px 0 48px;
  }
  .sec-heading {

  }
  ul.alpha-list {
    @media screen and (max-width: 991px) {
      display: flex;
      justify-content: flex-start;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    li {
      display: inline-block;
      a {
        font-weight: 600;
        min-height: 26px;
        min-width: 39px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $primary-01;
        @media screen and (max-width: 1199px) and (min-width: 992px) {
          min-width: 35px;
        }
        @media screen and (max-width: $screen-xs) {
          min-height: 26px;
          min-width: 25px;
        }
        &.disable {
          pointer-events: none;
          color: $cool-gray-11;
        }
      }
    }
  }
  .job-scope-wrapper {
    .scope-card {
      &:not(:last-of-type) {
        margin-bottom: 96px;
        @media screen and (max-width: 991px) {
          margin-bottom: 72px;
        }
      }
      ul.scope-list {
        li {
          position: relative;
          display: block;
          &:not(:last-of-type) {
            border-bottom: 1px solid $cool-gray-09;
          }
          a {
            color: $cool-gray-09;
            display: block;
            padding: 24px 50px 24px 0;
            @media screen and (max-width: $screen-xs) {
              padding: 21px 50px 21px 0;
            }
            &:hover {
              &::before {
                transition: $transition-01;
                right: 15px;
              }
            }
            &::before {
              content: "";
              background: url("../../assets/icons/arrows/right-stroke-angle-arrow-black-icon.svg") no-repeat center;
              background-size: cover;
              width: 5px;
              height: 10px;
              position: absolute;
              top: 50%;
              right: 25px;
              transform: translateY(-50%);
              transition: $transition-01;
            }
          }
        }
      }
    }
  }
}

.sec-job-glossar-single{
  padding: 64px 0;
  @media screen and (max-width: $screen-xs) {
    padding: 32px 0;
  }
  .article-content{
    .article-card{
      &:not(:last-of-type){
        margin-bottom: 80px;
        @media screen and (max-width: $screen-xs) {
          margin-bottom: 60px;
        }
      }
      .content-card-1{
        .content-detail{
          margin-bottom: 64px;
          @media screen and (max-width: $screen-xs) {
            margin-bottom: 44px;
          }
        }
      }
      .glossar-img{
        margin-top: 80px;
        @media screen and (max-width: $screen-xs) {
          margin-top: 60px;
        }
        img{
          width: 100%;
          height: 480px;
          border-radius: 8px;
          object-fit: cover;
          @media screen and (max-width: 1199px) and (min-width: 768px) {
            height: 400px;
          }
          @media screen and (max-width: $screen-xs) {
            height: 240px;
          }
        }
      }
      .content-img{
        img{
          width: 100%;
          height: auto;
          object-fit: contain;
        }
      }
      .content-author-card-1{
        max-width: 640px;
        padding-top: 80px;
        margin-top: 80px;
        border-top: 1px solid $cool-gray-03;
        @media screen and (max-width: $screen-xs) {
          padding-top: 33px;
          margin-top: 33px;
        }
      }
    }
  }
  .table-content-sidebar-1{
    @media screen and (max-width: 991px) {
      display: none;
    }
  }
}