.features {
  position: relative;
  padding: 6rem 0;
  /* overflow: hidden; */
}

.features-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 100%;
  margin: auto;
  text-align: center;
  margin-top: 4.375rem;width: 88.366%;
}

.features-bg-image {
}

.features-glow {
  position: absolute;
  width: 42.813rem;
  height: 39.313rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url('https://static.codia.ai/custom_image/2025-07-05/093147/features-glow-effect.svg') no-repeat center;
  background-size: cover;
  filter: blur(100px);
}

.features-grid {
  position: relative;
  z-index: 2;
  margin-bottom: 4rem;
}
.features-items{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7rem 0;
    margin-top: 3.438rem;
    padding: 0 0.625rem;
}
.feature-card {width: 35.05%;}
.feature-wrap{
        background: rgba(255, 255, 255, 0.2);
        border-radius: 1rem;
        padding: 1.5rem;
        color: #fff;
        transition: all 0.3s ease;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        position: relative;
        display: inline-block;
        z-index: 1;
        min-width: 24.375rem;
        }
.feature-wrap:hover {
  box-shadow: 0 8px 25px rgba(255, 109, 3, 0.2);
}
.feature-card:nth-child(1) .feature-wrap{transform: translateX(5.625rem);}
.feature-card:nth-child(2) .feature-wrap{transform:translateX(0)}
.feature-card:nth-child(3) .feature-wrap{transform:translateX(0)}
.feature-card:nth-child(4) .feature-wrap{transform: translateX(4.5rem);}
.feature-card:nth-child(5) .feature-wrap{transform: translateX(2.375rem);}
.feature-card:nth-child(6) .feature-wrap{transform: translateX(4.063rem);}
.feature-card:nth-child(7) .feature-wrap{transform: translateX(6.25rem);}
.feature-card:nth-child(8) .feature-wrap{transform: translateX(-1.875rem);}
.feature-icon {display: flex;gap: 0.5rem;margin-bottom: 0.5rem;}

.feature-icon img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

.feature-card h3 {
  font-family: var(--font-montserrat);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0;
  color: var(--white);
  letter-spacing: 0.009rem;
}

.feature-card p {
  font-family: var(--font-karla);
  font-size: 0.875rem;
  color: var(--white);
  margin: 0;
  letter-spacing: 0.006rem;
}

.features-device {
  position: relative;
  text-align: center;
  z-index: 3;
}

.features-device img {
  max-width: 35rem;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}


@media (max-width: 991px) {
  .features {
    padding: 2.5rem 0;
  }
  
  .feature-card {
    width: 100%;
  }
  .features-items{gap: 1.25rem 0;margin-top: 1.25rem;padding: 0}
  .features-bg{position: relative;margin-top: 0;width: 100%}
}
@media (min-width: 992px) and (max-width: 1199px) {
  .features-items{gap: 4.375rem 0;margin-top: 2.5rem;}

}
@media (max-width: 1299px) {
  .feature-card .feature-wrap{transform: none !important;min-width: initial;width: 100%}
    .features-grid{margin-bottom: 0}
}