
.team-section {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  font-family: "Arial", sans-serif;

  .team-section-container {
    text-align: center;
    width: 90%;
    max-width: 1200px;
  }

  h2 {
    color: #181e4b;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .team-subtitle {
    color: #6b7280;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 50px;
    line-height: 1.6;
  }

  .team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 25px;
    padding: 30px;
    margin: 0 auto;
    max-height: none;
    overflow: visible;
    transition: none;
  }

  .btn-wrap {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }

  .expand-label {
    margin-top: 10px;

    .label-more {
      display: inline;
    }
    .label-less {
      display: none;
    }
  }

  .member-card {
    box-sizing: border-box;
    border-radius: 20px;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: white;
    height: 420px;
    width: 220px;
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 260px;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }

    h3 {
      font-size: 1.4rem;
      font-weight: 700;
      margin: 0;
    }

    .role {
      font-size: 18px;
      font-weight: 800;
      text-align: center;
    }
    .role-2 {
      font-size: 14px;
      text-align: center;
    }

    &.red {
      background-color: #ff335c;
    }
    &.dark-purple {
      background-color: #720045;
    }
    &.green {
      background-color: #73ca71;
    }
    &.blue {
      background-color: #5d83ff;
    }
    &.magenta {
      background-color: #d100c5;
    }
    &.orange {
      background-color: #ff9d00;
    }
    &.green-2 {
      background-color: #4b0082;
    }
  }

  .image-wrapper {
    width: 180px;
    height: 180px;
    background-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    margin: 20px 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    &:hover {
      transform: scale(1.1) rotate(2deg);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    &.shape-1 {
      clip-path: polygon(
        30% 0%,
        50% 15%,
        75% 0%,
        100% 25%,
        85% 50%,
        100% 85%,
        70% 100%,
        50% 80%,
        25% 100%,
        0% 70%,
        15% 45%,
        0% 15%
      );
    }
    &.shape-2 {
      clip-path: polygon(
        20% 10%,
        50% 0%,
        85% 15%,
        100% 45%,
        85% 85%,
        50% 100%,
        15% 85%,
        0% 45%,
        15% 15%
      );
    }
    &.shape-3 {
      clip-path: polygon(
        40% 0%,
        90% 10%,
        100% 50%,
        85% 95%,
        45% 80%,
        10% 100%,
        0% 60%,
        20% 40%,
        0% 10%
      );
    }
    &.shape-4 {
      clip-path: polygon(
        10% 20%,
        45% 0%,
        90% 20%,
        100% 60%,
        75% 100%,
        30% 85%,
        0% 100%,
        15% 50%,
        0% 0%
      );
    }
    &.shape-5 {
      clip-path: polygon(
        25% 5%,
        75% 5%,
        100% 40%,
        80% 60%,
        100% 95%,
        50% 85%,
        0% 95%,
        20% 60%,
        0% 40%
      );
    }
    &.shape-6 {
      clip-path: polygon(
        40% 15%,
        75% 0%,
        100% 30%,
        80% 50%,
        100% 90%,
        50% 100%,
        10% 80%,
        30% 50%,
        0% 20%
      );
    }
  }
}

@media (max-width: 769px) {
  .team-section .team-grid {
    justify-content: center;
  }

  .team-section .member-card {
    flex: 0 0 calc(50% - 12.5px);
    width: calc(50% - 12.5px);
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .team-section .team-grid {
    justify-content: center;
  }

  .team-section .member-card {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
