/* 1. Wrapper & Container */
.scroll-wrapper {
    width: 100vw;
    max-width: 100%;
    position: relative;
    padding: 2rem 0;
    -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);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    overflow: hidden;
    min-height: 120px;
    z-index: 10;
    box-shadow: 0 -20px 30px rgba(255, 255, 255, 1); /* Diffuse minute line seamless edge */
}

.carousel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    padding: 0 2rem;
}

.header-line {
    height: 1px;
    background: rgba(26, 86, 255, 0.15);
    flex-grow: 1;
}

.header-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(26, 86, 255, 0.6);
    background: rgba(26, 86, 255, 0.05);
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
    white-space: nowrap;
}

.scroll-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    padding: 20px 0;
    /* Prevents zoomed logos from being cut off */
}

/* 2. Track & Items */
.scroll-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 4rem;
    /* GSAP will control movement */
}

.carousel-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4rem !important;
    flex: 0 0 auto !important;
    /* target a standard box size so spacing is consistent */
    width: 250px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.carousel-logo-item img {
    height: 45px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    /* Neutral look without hovering */
    filter: grayscale(100%) opacity(0.5) !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    /* removed mix-blend-mode to avoid dark boxes on jpegs */
}

/* 3. Logo Specific Sizes */
.carousel-logo-item img.logo-ieee,
.carousel-logo-item img.logo-iete,
.carousel-logo-item img.logo-bhel {
    height: 80px !important;
}

.carousel-logo-item img.logo-iste,
.carousel-logo-item img.logo-kseb {
    height: 35px !important;
}

.separator-icon {
    width: 20px !important;
    height: 20px !important;
    fill: rgb(84, 84, 84) !important;
    transition: all 0.4s ease !important;
    opacity: 0.2 !important;
    /* Made separator subtler to match design */
}

/* 4. Hover Effects */

/* When hovering anywhere in the track, dim all logos slightly more */
.scroll-track:hover .carousel-logo-item img {
    opacity: 0.15 !important;
    filter: grayscale(100%) !important;
}

/* When hovering a specific logo, color it, restore opacity, and zoom slightly */
.scroll-track .carousel-logo-item img:hover {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    transform: scale(1.1) !important;
    /* Slight interactive zoom */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
}