body, html {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif; /* Clean, modern font */
    font-weight: 300; /* Light font weight for overall text */
    background-color: #f5f5f5;
    color: #333;
    height: 100%; /* Ensure body and HTML cover full viewport */
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Avoid horizontal scrolling */
}

/* Ensure border-box sizing for all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Hero Section */
.hero-section {
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../images/bg4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* Ensure the background doesn’t repeat */
    flex: 1; /* Take up remaining space, ensuring footer is pushed to the bottom */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.hero-content {
    max-width: 600px;
    padding: 0 20px;
}

.main-logo {
    width: 50%;  /* Slightly larger for better visibility */
    max-width: 250px; /* Adjust max-width accordingly */
    height: auto;
    cursor: pointer;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.subheading {
    font-size: 1.2em;  /* Adjusted font size */
    color: #666;  /* Softer, less bold color */
    margin-bottom: 30px;
    font-weight: 300; /* Lighter font weight for a softer appearance */
}

footer {
    padding: 10px 20px;
    text-align: center;
    background: rgba(245, 245, 245, 0.5) !important;
    border-top: 1px solid rgba(224, 224, 224, 0.5);
    font-size: 0.9em;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../images/bg4.png');
        background-size: cover;
        background-position: center;
    }

    .main-logo {
        width: 70%; /* Increase size on smaller screens for better visibility */
    }

    .subheading {
        font-size: 1.1em; /* Slightly smaller on smaller screens */
        font-weight: 300; /* Maintain lighter font weight */
    }
}

@media (max-width: 1024px) {
    .hero-section {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../images/bg4.png');
        background-size: cover;
        background-position: center;
    }
}