body{ 
    background-size: cover; /* Cover the entire page */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-color: #ffc470ff;
}
.nav-link {
    padding-left: 60px !important; /* Adjust the padding as needed */
    color: white !important;
}

.navbar{
    background-color: #8b322cff !important;
}
.title{

    font-size: 100px;
    font-weight: 600;
    color: #ffc470ff;
    padding-left: 30px;
    padding-top: 50px;
}

.subtitle{
    font-size: 30px;
    color: white;
    padding-left: 40px;
    max-width: 500px;
    padding-bottom:300px;
}
.subtitle2{
    font-size: 60px;
    padding-left: 30px;
    color: #8b322cff;
}

.Titlediv{
    background-image: url('cville.png');
}
.flex-container {
    display: flex; /* This enables flexbox */
    justify-content: space-around; /* Distributes space around items */
    gap: 20px; /* Optional: adds space between flex items */
}

.text-column {
    width: 50%; /* Specifies width */
    height: 500px; /* Specifies height */
    display: flex; /* Enables flexbox within the text column */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    padding: 20px; /* Adds padding inside the text column */
    background-color: #4793afff; /* Background color */
    border-radius: 5%; /* Rounded corners */
    margin-bottom: 50px; /* Margin at the bottom */
    margin-left: 50px;
    max-width: 500px;
    margin-top: 20px;
    font-size: 20px;
    color: white;
}

.image-column {
    flex: 1; /* Takes up half the space of the flex-container */
    display: flex; /* Enables flex properties for image alignment if needed */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    width: 50%;
}

.image-volu{
    height: 420px;
    width: 620px;
    border: 4px solid #8b322cff;
    border-radius: 8%;
    
}

.image-Hb4{
    height: 300px;
    width: 600px;
    padding-top: 20px;
}

.text2column{
    display: flex; /* Enables flexbox within the text column */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    padding-left: 60px; /* Adds padding inside the text column */
    max-width: 500px;
    font-size: 20px;
    color: #8b322cff;
    font-weight: bold;
}

.button-container {
    display: flex;
    flex-direction: row;  /* Align items horizontally */
    flex-wrap: wrap;  /* Allow wrapping to next line */
    justify-content: space-around;  /* Distribute space around items */
}

.flex-button {
    background-color: #F2613F; /* Green background */
    color: white; /* White text */
    padding: 20px; /* Padding around the text */
    text-align: center; /* Center the text horizontally */
    text-decoration: none; /* Remove underline from links */
    font-size: 20px; /* Increase font size */
    margin-top: 40px; /* Add margin around buttons */
    margin-bottom: 40px;
    margin-left:10px;
    margin-right:10px;
    border: none; /* No border */
    flex-basis: 48%; /* Each button takes roughly half the container width */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    height: 300px; /* Fixed height for each button */
    display: flex; /* Enable flexbox within the button */
    align-items: center; /* Center the text vertically */
    justify-content: center; /* Center the text horizontally */
}

.flex-button:hover {
    background-color: #45a049;  /* Darker shade of green when hovered */
}