/* =========================================
   4. TRUSTED BY MARQUEE
   ========================================= */
.trusted-section {
    background: #ffffff;
   /* Fully rounded pill shape */
    padding:0 1rem;
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 3;
  margin:1rem 0;
  

}

.trusted-label h3 {
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    margin-right: 20px;

}

.marquee-wrapper {
    flex: 1; /* Take remaining space */
    overflow: hidden;
    position: relative;
    /* Mask fade effect on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    justify-content: center;
    /* Infinite Scroll Animation */
    animation: marquee 10s linear infinite;
}

.marquee-track img {
    height: 30px; /* Fix logo height */
    width: auto;
    max-width: none;
    object-fit: contain;
    transition: 0.3s;
    filter: grayscale(100%);
    transition: filter 0.3s, transform 0.3s;
}

.marquee-track .src img{
    width: auto;
    height: 30px
}
.marquee-track .round img{
   
   transform: scale(1.2);
}
.marquee-track .django img{
   filter: drop-shadow(0 0 2px rgba(0,0,0,1));
}
.marquee-track .tispa img{
   height: 25px;
}


.marquee-track img:hover { opacity: 1; }

@keyframes marquee {
    from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-30%);
  }
/* Move half distance (because duplicated) */
}

/* =========================================
    TABLET (1024px) OPTIMIZATIONS
    ========================================= */
@media (max-width: 1024px) {
  
     .trusted-section {
          padding: 0 1rem;
          gap: 20px;
          margin: 2rem 0 1rem 0;
     }

     .marquee-track {
          animation: marquee 10s linear infinite;
     }
}

/* =========================================
   5. RESPONSIVE STYLES
   ========================================= */
@media (max-width: 991px) {
   
  
    .stats-container{
        margin-top: 2rem;
    }
    .trusted-label { margin-bottom: 15px; }

    .trusted-section {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        width: 100%;
        border-radius: 20px;

    }

    .trusted-label {
        margin-bottom: 0;
        white-space: nowrap;
    }

    /* Marquee container: take remaining space to the right of the label */
    .marquee-wrapper {
        flex: 1 1 auto;
        overflow: hidden;
        position: relative;
        left: auto;
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        max-width: 100%;
        padding: 6px 0;
        box-sizing: border-box;
    }

    /* Marquee track: stretch to fill marquee-wrapper, align items to the left */
    .marquee-track {
        display: flex;
        gap: 16px;
       
        flex: 1 1 auto;
        justify-content: flex-start;
        align-items: center;
        padding: 6px;
        box-sizing: border-box;
        min-width: 0;
    }

    .marquee-track img {
        height: 25px;
        width: auto;
        opacity: 0.9;
        transition: opacity 0.2s, transform 0.2s;
        flex: 0 0 auto; /* keep intrinsic size but prevent growing/shrinking into overflow */
        object-fit: contain;
    }

    /* If you prefer a horizontal swipe on narrow screens instead of wrapping,
       add the class `allow-scroll` to .marquee-wrapper in the HTML. */
    .marquee-wrapper.allow-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

    /* Tweak for very small devices */
    @media (max-width: 480px) {
        .marquee-track { gap: 12px; }
        .marquee-track img { height: 24px; }
 
    }