#agents a {
  color: var(--red-one);
}

.agents {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agents-top {
  position: relative;
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0px 14px 10px rgba(0, 0, 0, 0.65));
}

.agents-top-shape {
  position: absolute;
  height: 700px;
  width: 100%;
  background-color: var(--white-one);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 85% 35%, 15% 35%, 0 55%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.agents-title {
  position: absolute;
  top: 20%;
  font-family: "Perfect Dark";
  font-size: var(--super-size);
  text-align: center;
  padding-inline: var(--largest-size);
  filter: drop-shadow(3px 4px 5px var(--red-two));
}

.agents-bottom {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0px -14px 10px rgba(0, 0, 0, 0.65));
}

.agents-bottom-shape {
  bottom: 0;
  position: absolute;
  height: 700px;
  width: 100%;
  background-color: var(--white-one);
  clip-path: polygon(15% 65%, 85% 65%, 100% 45%, 100% 100%, 0 100%, 0 45%);
}

.agents-container {
  max-width: 1300px;
  padding: 20px;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
}

.agent-card {
  width: 300px;
  height: 360px;
  background: rgb(255, 255, 255, 0.8);
  clip-path: polygon(
    15px 0%,
    calc(100% - 15px) 0%,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-image-container {
  position: relative;
  height: 300px;
  width: 100%;
  clip-path: polygon(
    15px 0%,
    calc(100% - 15px) 0%,
    100% 15px,
    100% calc(100% - 3px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 3px),
    0 15px
  );
}

.agent-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.3s ease;
}

.image-border-line {
  position: absolute;
  bottom: 0;
  left: 0px;
  right: 0px;
  height: 3px;
  background: var(--purple-one);
  z-index: 2;
}

.agent-name {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Perfect Dark";
  font-family: "Bruce Forever";
  font-size: calc(var(--largest-size) * 0.8);
  color: var(--purple-one);
  padding-inline: 15px;
}

.agent-card:hover {
  transform: translateY(-10px);
}

.agent-card:hover .agent-image {
  transform: scale(1.05);
  filter: drop-shadow(5px 5px 10px rgba(255, 0, 0, 0.4));
}

.agent-card:hover .image-border-line {
  background: var(--red-one);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

.agent-card:hover .agent-name {
  color: var(--red-one);
}

.footer-section {
  margin-top: -100px;
  position: relative;
  z-index: 100;
}

@media (max-width: 1024px) {
  .agents-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .agents-title {
    font-size: calc(var(--super-size) * 0.8);
  }
}

@media (max-width: 768px) {
  .agents-top {
    height: 300px;
  }

  .agents-top-shape {
    height: 600px;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 85% 35%, 15% 35%, 0 50%);
  }

  .agents-bottom {
    height: 300px;
  }

  .agents-bottom-shape {
    height: 600px;

    clip-path: polygon(15% 65%, 85% 65%, 100% 50%, 100% 100%, 0 100%, 0 50%);
  }

  .agents-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .agents-title {
    font-size: calc(var(--super-size) * 0.6);
  }
}

@media (max-width: 430px) {
  .agents-top {
    height: 250px;
  }

  .agents-top-shape {
    height: 500px;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 85% 35%, 15% 35%, 0 45%);
  }

  .agents-bottom {
    height: 250px;
  }

  .agents-bottom-shape {
    height: 500px;
    clip-path: polygon(15% 65%, 85% 65%, 100% 55%, 100% 100%, 0 100%, 0 55%);
  }
  .agents-container {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 50px;
  }

  .agents-title {
    font-size: calc(var(--super-size) * 0.5);
  }
}

@media (max-width: 375px) {
  .agent-card {
    width: 280px;
  }
}