/* Custom CSS for ScambiPokemon */

/* Hero Section Background Image */
.herosection {
    background-image: url('../../images/scambipokemon.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: creates parallax effect */
}

/* Alternative: If the above doesn't work, try these paths: */
/* 
.herosection {
    background-image: url('../images/scambipokemon.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.herosection {
    background-image: url('../../images/scambipokemon.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
*/

/* Overlay to ensure text readability */
.herosection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(37, 99, 235, 0.7); /* Blue overlay */
    z-index: 1;
}

/* Ensure content stays above overlay */
.herosection > * {
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .herosection {
        background-attachment: scroll; /* Disable parallax on mobile */
    }
}