body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('https://s7d1.scene7.com/is/image/dmqualcommprod/SnapdragonXElite_HeroImage?$QC_Responsive$&fmt=png-alpha&wid=814');
    background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
    background-position: center; /* Centra la imagen de fondo */
    background-attachment: fixed; /* Mantiene la imagen fija cuando se hace scroll */
    color: white; /* Cambiar el color del texto a blanco para mayor contraste */
}

header {
    background-color: rgba(163, 0, 11, 0.8); /* Usar un fondo con opacidad para no tapar la imagen */
    color: white;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
}

.firmware-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.firmware-item {
    display: flex; /* Cambiado para alinear imagen y texto */
    background: rgba(139, 69, 19, 0.8); /* Fondo marrón translúcido */
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px;
    padding: 15px;
    width: 30%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.firmware-item:hover {
    transform: scale(1.02);
}

.firmware-image {
    width: 120px; /* Tamaño de la imagen */
    height: auto; /* Mantener la proporción */
    margin-right: 15px; /* Espacio entre la imagen y el texto */
}

.firmware-details {
    flex: 1; /* Para que ocupe el espacio restante */
}

.download-button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px; /* Añadir espacio entre los botones y el texto */
}

.download-button:hover {
    background-color: #218838;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #007BFF;
    color: white;
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
    .firmware-item {
        width: 100%; /* Ocupa todo el ancho en móviles */
        margin: 10px 0; /* Margen vertical */
    }

    .firmware-image {
        width: 80px; /* Tamaño de la imagen en móviles */
    }

    header, footer {
        padding: 15px; /* Menor padding en móviles */
    }
}

@media (max-width: 480px) {
    .download-button {
        padding: 8px 12px; /* Ajustar tamaño del botón */
    }
}