.innovative-banner {
    text-align: center;
    background-color: #787878; /* Fondo gris para el contenedor */
    padding: 30px 0; /* Reducido el padding superior e inferior */
    height: 130px; /* Ajustamos la altura del contenedor */
}

.slider-container {
    position: relative;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    height: 100%; /* Aseguramos que el slider ocupe toda la altura del contenedor */
}

.icon-container {
    display: flex;
    transition: transform 1s ease;
    align-items: center; /* Centra los iconos verticalmente */
    height: 100%; /* Asegura que el contenedor de los iconos ocupe toda la altura */
}

.icon {
    flex: none; /* Mostrar 5 iconos a la vez */
    max-width: 1200px;
    padding: 10px; /* Reducido el padding para un diseño más compacto */
    opacity: 1;
    transition: opacity 0.3s ease;
    border-radius: 50%; /* Hacer los logos más circulares */
    z-index: 10;
}
.icon img {
    width: 100%;  /* O puedes usar un valor específico, como 150px */
    height: auto; /* Mantiene la proporción original */
    object-fit: contain; /* Ajusta la imagen sin recortar ni distorsionar */
    max-width: 180px; /* Define un ancho máximo */
    max-height: 80px; /* Define una altura máxima */
}

.icon.center {
    opacity: 1; /* Resaltar el centro */
    transform: scale(1.1); /* Hacer un pequeño zoom al icono central */
}

.indicator-container {
    position: relative;
    text-align: center;
    margin-top: 10px;
    overflow: hidden;
    width: 80%; /* Debe coincidir con el tamaño del slider */
    margin: 0 auto;
}

.indicator-wrapper {
    display: flex;
    transition: transform 1s ease;
}

.indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #ffffff;
    cursor: pointer;
}

.indicator.active {
    background-color: #ed1c24;
}

.nav-button {
    display: none;
}