.navbar {
    background-color: #000000;
}

.main-hero {
    width: 100%;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    min-height: 500px; /* Set a minimum height */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Use flexbox layout */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* Arrange content vertically */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* Center content vertically */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* Center content horizontally */
}