.team {
  &.section {
  }
  &__box {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid $color-2;
    @include transition($transition);

    @include breakpoint(max-md) {
      border-color: $color-primary;
    }

    &:hover,
    &.active {
      border-color: $color-primary;
      .team__content {
        &::before {
          height: 100%;
        }
        .title,
        .position {
          color: $color-7;
        }
        .social-links {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
  &__thumb {
  }
  &__content {
    @extend %p-relative;
    z-index: 1;
    padding: 30px;
    &::before {
      @extend %p-absolute;
      @include transition($transition);
      width: 100%;
      height: 0px;
      left: 0;
      top: 0px;
      background-color: $color-primary;
      z-index: -1;

      @include breakpoint(max-md) {
        height: 100%;
      }
    }
    .title,
    .position {
      @include transition($transition);

      @include breakpoint(max-md) {
        color: $color-7;
      }
    }
    .title {
      margin-bottom: 2px;

      @include breakpoint(max-md) {
        margin-bottom: 0px;
      }
    }
    .position {
      font-family: $ff-dm-sans;
      font-size: 18px;
    }
    .social-links {
      @include transition($transition);
      opacity: 0;
      visibility: hidden;
      margin-top: 15px;

      @include breakpoint(max-md) {
        margin-top: 10px;
        opacity: 1;
        visibility: visible;
      }
      ul {
        @extend %d-flex, %item-center;
        gap: 10px;

        li {
          a {
            @extend %d-grid, %place-center;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background-color: $color-2;
            color: $color-white;
            font-size: $fs-12;

            &:hover {
              background-color: $color-white;
              color: $color-2;
            }
          }
        }
      }
    }
  }
}

.team2 {
  &__item {
    border-radius: 14px;

    &:first-of-type {
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
    }
    &:last-of-type {
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
    }

    &:not(:last-of-type) {
      margin-bottom: 34px;

      @include breakpoint(max-lg) {
        margin-bottom: 20px;
      }
    }
    .accordion-header {
      color: $color-white;

      .accordion-button {
        padding-inline: 50px;
        padding-block: 22px;

        &:not(.collapsed) {
          color: inherit;
        }

        &::after {
          content: unset;
        }

        .title-info {
          @extend %d-flex, %items-start, %no-wrap;
          gap: 14px;
          span {
            @extend %d-inline-block;
            color: $color-white;
            font-family: $ff-body;
            font-size: $fs-base;
            font-weight: 400;
            line-height: 150%;
            display: block;
            white-space: nowrap;
          }

          @include breakpoint(max-sm) {
            gap: 10px;
          }
        }
        .list-number {
          @extend %d-inline-block;
          font-weight: 400;
        }
        @include breakpoint(max-lg) {
          padding-inline: 30px;
        }
        @include breakpoint(max-sm) {
          padding-inline: 20px;
        }
      }
    }
    .accordion-collapse {
      .accordion-body {
        padding-inline: 50px;
        padding-block: 5px 40px;
        color: $color-white;
        @extend %d-flex, %justify-between, %item-end, %flex-wrap;
        gap: 15px;

        @include breakpoint(max-lg) {
          padding-inline: 30px;
        }
        @include breakpoint(max-sm) {
          padding-inline: 20px;
        }

        .body-thumb {
          @extend %p-relative, %shrink-0;
          max-width: 470px;
          width: 100%;
          border-radius: 10px;
          overflow: hidden;
          background-color: $color-1;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          backdrop-filter: brightness(0.1);

          @include breakpoint(max-xxl) {
            max-width: 350px;
          }
          @include breakpoint(max-lg) {
            max-width: 100%;
          }

          &::before {
            @extend %p-absolute;
            inset: 0;
            background-image: url(../images/team/team-2-bg-img.png);
            z-index: -1;
            opacity: 0.05;
          }

          video,
          img {
            width: 100%;
            border-radius: 10px;
            object-fit: cover;
          }
          video {
            @extend %d-block;
            &.pointer {
              cursor: pointer;
            }
          }
          .video-btn {
            @extend %p-absolute, %shrink-0, %d-grid, %place-center;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            top: 25px;
            left: 25px;
            border: none;
            font-size: $fs-12;
            padding: 0;

            &.disabled {
              opacity: 0;
              visibility: hidden;
            }
          }
        }
        .body-content {
          @extend %shrink-0;
          max-width: 500px;
          width: 100%;

          .team-title {
            margin-block-end: 15px;
            @include breakpoint(max-xxl) {
              margin-block-end: 10px;
            }
            a {
              color: inherit;
              font-size: inherit;
              font-style: normal;
              font-weight: inherit;
              line-height: inherit;
              letter-spacing: inherit;
              display: inline-block;

              &:hover {
                color: $color-primary;
              }
            }
          }
          p {
            color: $color-5;
            font-size: 18px;
            margin-block-end: 44px;

            @include breakpoint(max-xxl) {
              margin-block-end: 30px;
            }
            @include breakpoint(max-sm) {
              margin-block-end: 0px;
            }
          }

          .social-icons {
            @include breakpoint(max-sm) {
              display: none;
            }
          }

          @include breakpoint(max-xxl) {
            max-width: 400px;
          }
          @include breakpoint(max-lg) {
            max-width: calc(100% - 65px);
          }
          @include breakpoint(max-sm) {
            max-width: 100%;
          }
        }
        .agx-btn2 {
          @extend %shrink-0;
          width: 50px;
          height: 50px;
          border-color: $color-white;
          color: $color-white;

          &:hover {
            color: $color-1;
            border-color: $color-primary;
          }
        }
      }
    }
  }
}
.team3 {
  &__box {
    @extend %p-relative;
    background-color: $color-3;
    @include transition($transition);
    border-radius: 14px;
    overflow: hidden;

    .team-content {
      @extend %p-absolute, %text-center;
      bottom: -70px;
      left: 0;
      width: auto;
      background-color: $color-2;
      border-radius: 14px 14px 0px 0px;
      overflow: hidden;
      padding: 30px 25px;
      inset-inline: 30px;
      @include transition($transition-3);
      z-index: 2;

      .member-position {
        @extend %d-inline-block;
        margin-top: 8px;
        white-space: nowrap;
      }

      .social-icons {
        margin-top: 25px;
        ul {
          @extend %justify-center;

          li {
            a {
              border-color: rgba($color-primary, 0.2);
              background-color: transparent;
              color: $color-white;

              &:hover {
                border-color: $color-primary;
              }
            }
          }
        }
      }
    }
    .team-details-link{
      @extend %p-absolute;
      inset:0;
      z-index: 1;
    }
    &:hover {
      background-color: $color-primary;
      .team-content {
        bottom: 0;

        .member-name {
          a {
            color: $color-primary;
          }
        }
      }
    }
  }
}
