@import "./custom.css";

/* Css for Auto Scrolling bar */
.feature-bar {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: 40px 0;
}

.feature-track {
    display: flex;
    width: max-content;
    animation: scroll-left 25s linear infinite;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 60px;
    /* space between items */
    white-space: nowrap;
}

/* .feature-item img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
} */
.feature-item img {
    width: clamp(50px, 8vw, 100px);
    height: clamp(50px, 8vw, 100px);
    flex-shrink: 0;
}

.feature-item span {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 700;
}

/* .feature-item span {
  font-size: 1.2rem;
  font-weight: 600;
  color: #000;
} */

/* Keyframes for scrolling */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ✅ Responsive */
@media (max-width: 768px) {
    .feature-item img {
        width: 35px;
        height: 35px;
    }

    .feature-item span {
        font-size: 1rem;
    }

    .feature-item {
        margin-right: 30px;
    }
}