/* Add this to your CSS file */

.songs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;    
}

.song-box {
    background-color: rgba(66, 133, 244, 0.9);
    border-radius: 10px;
    padding: 10px;
    flex: 1 0 calc(25% - 20px); /* Adjust the width as needed */
    max-width: calc(25% - 20px); /* Adjust the width as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size:  24px; 
    transition: background-color 0.3s ease;
    cursor:  pointer;
}
.song-box:hover{ 
    background-color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.3s ease;
    color:  #374151;
 }
    .song-box:hover a{ color: #374151; font-weight:  bold; text-shadow: 2px 2px 4px #fff;  }

    .song-box a{ text-decoration: none; cursor: pointer; font-size: 24px; color: #fff; font-weight: bold; text-shadow: 2px 2px 4px #000; }


.hero .container{ padding-top: 24px; }
.hero{ padding-top: 50px !important; }  /* override the default layout */