/*
    CSS Table of Sections
    --------------------------
    ** tabs_works
    --------------------------
    ** tabs_service
    --------------------------
    ** section__showcase
    --------------------------
    

*/

/*-----------------------------
  tabs_works
-----------------------------*/
.tabs_works {
  .nav-pills {
    .nav-link {
      font-size: 18px;
      font-weight: 500;
      color: $white-color;
      margin-bottom: 1.25rem;
      @include prefixer(transition, 0.3s, webkit moz o ms);
      p {
        font-size: 16px;
        font-weight: 400;
        color: $light-color;
        margin-top: 1rem;
        margin-bottom: 0;
      }
      &.active {
        background-color: transparent;
        // border-left: 5px solid $blue-color;
        @include prefixer(
          box-shadow,
          -5px 0px 0px 0px rgba($blue-color, 1),
          webkit moz o ms
        );
        border-radius: 0;
      }
    }
  }
  .img--tabs {
    .tab-pane {
      .--img {
        width: 65vw;
        border-radius: 8px;
        @include prefixer(
          animation,
          slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both,
          webkit moz o ms
        );
        @include maxMobile {
          width: 100%;
        }
      }
    }
    &.slide_bottom {
      .tab-pane {
        .--img {
          @include prefixer(
            animation,
            slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both,
            webkit moz o ms
          );
        }
      }
    }
  }
}

/*-----------------------------
  tabs_service
-----------------------------*/
.tabs_service {
  .nav-pills {
    .nav-link {
      color: $dark-color;
      border: 2px solid transparent;
      border-radius: 8px;
      &.active {
        @include prefixer(box-shadow, none, webkit moz o ms);
        border: 2px solid $border-color;
        border-radius: 8px;
      }
      p {
        color: $gray-color;
      }
    }
  }
  .tab-content {
    .tab-pane {
      .--img {
        width: 45vw;
        @include maxMobile {
          width: 100%;
        }
      }
    }
  }
}

/*-----------------------------
  section__showcase
-----------------------------*/
.section__showcase {
  .block__tab {
    .nav-pills {
      margin-bottom: 3.75rem;
      @include maxMobile {
        margin-bottom: 1.75rem;
      }
      .nav-item {
        width: calc(100% / 4);
        @include maxMobile {
          width: calc(100% / 2);
        }
        .nav-link {
          background-color: transparent;
          @include maxMobile {
            margin-bottom: 1.25rem;
          }
          .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            margin-bottom: 1.25rem;
            border: 1px solid$border-color;
            @include prefixer(transition, 0.3s, webkit moz o ms);
            svg {
              width: 22px;
              height: 22px;
              path,
              rect {
                fill: $dark-color;
                @include prefixer(transition, 0.3s, webkit moz o ms);
              }
            }
          }
          h3 {
            font-size: 20px;
            margin-bottom: 1.25rem;
            color: $dark-color;
            font-weight: 500;
          }
          .prog {
            width: 20px;
            height: 5px;
            background-color: rgba($dark-color, 0.06);
            display: block;
            border-radius: 12px;
            @include prefixer(transition, 0.3s, webkit moz o ms);
          }
          &.active {
            .icon {
              background-color: rgba($green2-color, 0.1);
              border: 0;
              @include prefixer(
                animation,
                jello-horizontal 0.9s both,
                webkit moz o ms
              );
              svg {
                path,
                rect {
                  fill: $green2-color;
                }
              }
            }
            .prog {
              background-color: $green2-color;
            }
          }
        }
      }
    }
    .ss_software {
      img {
        width: 100%;
        border-radius: 12px;
        height: 750px;
        object-fit: cover;
        @include maxMobile {
          height: 100%;
        }
      }
    }
  }
}