.background-container {
    background-image: url('../images/Mysore_new1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 350px; /* Ensures that the container is at least as tall as the viewport */
    height: auto; /* Allows the container to expand to the content's height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 2% 10px;
    position: relative;
    text-align: center;
    top:20%;
}



/* Style the paragraph to be placed right below the background-container */
.container > p {
    margin-top: 0%; /* Pull the paragraph up towards the background-container. Adjust as necessary */
    background: #1b1818; /* Your desired background color for the paragraph block */
    padding: 1em; /* Add padding inside the paragraph block */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds subtle shadow */
    /* Rest of your paragraph styles */
    color: white; /* Assuming you want white text */
    font-size: 15px; /* Adjust font-size as necessary */
    text-align: left;
    font-family: 'Cascadia Code';
}

/* Additional responsive tweaks may be necessary */
@media (max-width: 768px) {
    .background-container {
        min-height: 200px; /* Smaller height for smaller devices */
    }

    .container > p {
        margin-top: -5%; /* You might need to pull the paragraph up more on smaller screens */
    }
}