.hero {
    height: auto;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    animation: backgroundChange 20s infinite;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
}
  
  
    
@keyframes backgroundChange {
    0%, 100% { 
        background: url('/public/imgs/hero1.png') center/cover no-repeat; 
    }
    33% { 
        background: url('/public/imgs/hero2.png') center/cover no-repeat; 
    }
    66% { 
        background: url('/public/imgs/hero3.png') center/cover no-repeat; 
    }
}