.auto-slider {
        
}

@mixin white-gradient {
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 45))}
}

.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 260px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: 100%;
padding-top: 30px !important;
    
    &::before,
    &::after {
        @include white-gradient;
        content: "";
        height: 200px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }
    
    &::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    &::before {
        left: 0;
        top: 0;
    }
    
    .slide-track {
        animation: scroll 45s linear infinite;
        display: flex;
        width: calc(250px * 40);
    }
    
    .slide {
        height: 200px;
        width: 200px;
    }
}    


.slide{
  background-color: transparent;
}
.slider {
  
  background-size: cover; /* O "contain", según lo que prefieras */
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px 0; /* Opcional, para que no quede muy pegado */
}

/* Regla adicional para teléfonos (pantallas pequeñas) */
@media (max-width: 480px) {
    .slider {
      background-image: none; /* Ruta de tu imagen de fondo */
    }
    .banner-text-top {

      top: -92px !important;

    }
}

@media (min-width: 600px) {
    .slider {
      background-image: url('https://paisummitve.com/img/patrocinantes/banner.png'); /* Ruta de tu imagen de fondo */
    }
}


/* Estilos de texto y logo banner */
.banner-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  font-family: Arial, sans-serif;
}

.banner-image {
  width: 100%;
  display: block;
  background-color: rgb(255, 255, 255);
}

.banner-text-top {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255);
  color: #4FAE47;
  padding: 10px 20px;
  border-radius: 12px 12px 0px 0px;
  font-size: 24px;
  font-weight: bold;
  z-index: 2;
  text-align: center;
}

.banner-logo-bottom {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background-color: rgb(255, 255, 255);
  border-radius: 0px 0px 12px 12px;
  padding:10px 20px;
}

.banner-logo-bottom img {
  height: 60px; /* Ajusta según el tamaño de la imagen */
  background-color: transparent;
}