.title-vision-x {
    font-size: 64px;
    font-weight: 500;
}
.title-caption {
    font-size: 24px;
    font-weight: 400;
}
.section-title {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 10px;
}
.feature-title {
    font-size: 28px;
    font-weight: 500;
}
.feature-description {
    font-size: 18px;
    font-weight: 400;
}
.benefits-div {
  padding: 32px;
  border-radius: 12px;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(33, 33, 33, 1), rgba(33, 33, 33, 1)) padding-box,
    linear-gradient(90deg, #2E54E6 0%, #C5A3F0 50%, #EBA8B3 100%) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  background-size: 200% 200%;
  animation: gradient-animation 4s linear infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #2E54E6 0%, #C5A3F0 50%, #EBA8B3 100%);
  border: none;
  border-radius: 2px;
  background-size: 200% 100%;
  animation: gradient-animation 4s linear infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.visionx-logo {
    width: 80px;
    height: 80px;
}





/* Mobile styling */
@media (max-width: 768px) {

    .title-vision-x {
        font-size: 28px;
        font-weight: 600;
    }
    .title-caption {
        font-size: 12px;
        font-weight: 400;
    }
    .section-title {
        font-size: 28px;
        font-weight: 600;
    }
    .feature-title {
        font-size: 20px;
        font-weight: 600;
    }
    .feature-description {
        font-size: 16px;
        font-weight: 400;
    }
    .visionx-logo {
        width: 50px;
        height: 50px;
    }
    .benefits-div{
        padding: 16px;
    }
}