body {
    background-image: url("../images/homebackground.jpeg"); /* Ensure the path is correct */
    background-repeat: repeat; /* Repeats the image to fill the background */
    background-size: 500px 500px; /* Size of each background square */
    background-position: top left; /* Aligns the starting position of the background */
    line-height: 1.6;
    color: #333;
    font-family: Arial, sans-serif; /* Ensure consistent font across the site */
}

/* Centered Content */
.hero {
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.centered-content {
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent background for readability */
    padding: 20px 40px; /* Adds padding around the content */
    border-radius: 10px; /* Optional: rounded corners for a softer look */
    color: #fff; /* White text to contrast against the background */
    max-width: 600px; /* Optional: limit the width for better readability */
}

/* Footer */
footer {
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Additional Navbar Styles */
.navbar {
    background: #333; /* Dark background for the navbar */
    padding: 1rem;
    text-align: center;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    margin: 0 1rem;
}

.hero h1 {
    font-size: 3rem; /* Adjust size as needed for visibility */
}

.hero p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

.hero button {
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background: #007BFF;
    border: 2px solid black;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.hero button:hover {
    background: #5100b3;
}