/* Feature List */
.features-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px 0;
  padding: 0;
  list-style-type: none;
}

/* Feature Item */
.feature-item {
  color: black;
  position: relative;
  margin: 20px;
  padding: 20px;
  width: calc(33% - 40px); /* Adjust the width for the number of columns */
  /* background: #9a9f9e00; */
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  box-shadow: 1px 3px 9px 5px rgb(255 255 255 / 60%), 0 0 9px 2px rgb(200 0 255);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Gradient Border Animation */
.feature-item::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, var(--art-color-foundations), var(--art-color-innovation), var(--art-color-obstacles));
  background-size: 104% 600%;
  border-radius: 18px; /* Adjusted for border thickness */
  z-index: -1;
  animation: borderGradientAnimation 3s linear infinite;
}

@keyframes borderGradientAnimation {
  0% {
    background-position: 0% 20%;
  }
  50% {
    background-position: 100% 80%;
  }
  100% {
    background-position: 0% 20%;
  }
}

/* Content Inside Feature Item */
.feature-item h3 {
  font-size: 1.5rem;
  color: #673ab7de;
  margin-bottom: 10px;
}

.feature-item p {
  font-size: 1rem;
  color: #6a6a6a;
  line-height: 1.3;
}

.feature-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(96, 170, 229, 0.5);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .feature-item {
    width: calc(45% - 40px);
  }
}

@media (max-width: 768px) {
  .feature-item {
    width: calc(100% - 40px);
  }
}