#snow-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 1;
transition: opacity 0.6s ease;
}
#hero {
position: relative;
overflow: visible; 
}
#hero  .hero-overlay {
position: absolute;
bottom: 20px; 
left: 50%;
transform: translateX(-50%);
width: auto;
max-width: 100%;
z-index: 10; 
pointer-events: none; 
}
@media (max-width: 440px) {
#hero  .hero-overlay {
bottom:70px;
}
}
@media (min-width: 441px) and (max-width:968px){
#hero  .hero-overlay {
bottom:45px;
}  
}