

.PopBanner {
    width: 100%;
    height: 300px;
    background-image: url('img/BannerPOP/banner.gif'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Para cubrir todo el contenedor */
    background-position: center; /* Centrar la imagen */
    color: #fff; /* Puedes cambiar el color del texto según tus preferencias */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.PopBanner h1 {
    font-family: 'Poppins';
    margin: 0;
    font-size: 50px;
    margin-bottom: 20px;
}

.PopBanner button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #2ecc71; /* Puedes cambiar el color del botón según tus preferencias */
    color: #fff; /* Puedes cambiar el color del texto del botón según tus preferencias */
    border: none;
    cursor: pointer;
}


.IconContainer {
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.Icon {
   /* Puedes cambiar el color de fondo según tus preferencias */
  
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px; /* Ajusta el espacio entre los iconos */
}

.Icon img {
    width: 100%;
    height: 100%;
 
}

.Icon a {
    text-decoration: none;
}



/* Estilo para el contenedor principal */
.seccionganadores {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 20px;
    font-family: 'Righteous';
}

/* Estilo para la imagen */
.imagen {
    max-width: 400px; /* Ajusta el tamaño máximo de la imagen según sea necesario */
    height: auto;
    border-radius: 5px;
}

/* Estilo para el contenido (título y texto) */
.contenido {
    flex-grow: 1; /* Permite que el contenido ocupe todo el espacio restante disponible */
    margin-left: 20px; /* Ajusta el espacio entre la imagen y el contenido */
}

/* Estilo para el título */
.titulo {
    font-family: 'Righteous';
    font-size: 70px;
    margin-bottom: 10px;
    color: #CE1125;

}

/* Media query para dispositivos móviles */
@media screen and (max-width: 600px) {
    .seccionganadores {
        flex-direction: column; /* Cambia a dirección de columna en dispositivos móviles */
    }

    .imagen {
        margin-bottom: 20px; /* Ajusta el espacio entre la imagen y el contenido en dispositivos móviles */
    }
}
