/* --- General Styling --- */
.slider-title {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: #495057;
    margin-bottom: 2rem; /* 32px */
}

/* --- Logo Slider Specific Styles --- */

/* The container that creates the "window" for the slider */
.logo-slider-container {
    width: 100%;
    overflow: hidden; /* This is crucial for the sliding effect */
    position: relative;
}

/* A pseudo-element to create a fade effect on the edges */
.logo-slider-container::before,
.logo-slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5rem; /* Adjust width of the fade */
    z-index: 2;
    /* Pointer events none allows clicking through the gradient */
    pointer-events: none; 
}
.logo-slider-container::before {
    left: 0;
    /* Match this color to your page's background color */
    background: linear-gradient(to right, #f8f9fa 0%, rgba(248, 249, 250, 0) 100%);
}
.logo-slider-container::after {
    right: 0;
    /* Match this color to your page's background color */
    background: linear-gradient(to left, #f8f9fa 0%, rgba(248, 249, 250, 0) 100%);
}

/* The track that holds and moves the logos */
.logo-slider-track {
    display: flex;
    align-items: center; /* Vertically center logos */
}

/* Individual logo items */
.logo-item {
    flex-shrink: 0; /* Prevent items from shrinking */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem; /* Spacing between items */
    box-sizing: border-box;
    height: 60px; /* Set a fixed height for alignment */
}

/* Styling for image logos */
.logo-item img {
    max-height: 60px; /* Control the max height of logos */
    width: auto; /* Maintain aspect ratio */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Styling for text logos */
.logo-text {
    font-weight: 600;
    font-size: 1.1rem;
    color: #5a6778;
    white-space: nowrap; /* Prevent text from wrapping */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.logo-item:hover .logo-text {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}