body {
    /* padding-top: 50px; */
    padding-bottom: 20px;
    font-size: 14px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Custom CSS for the mobile menu close button */
@media (max-width: 991.98px) { /* IMPORTANT: This rule only applies on screens < 992px wide */
    .close-mobile-menu {
        position: absolute; /* THIS IS THE MISSING RULE that will now apply */
        top: 15px; /* Distance from top */
        right: 15px; /* Distance from right */
        border: 1px solid rgba(255, 255, 255, 0.3); /* A subtle white border */
        background-color: rgba(0, 0, 0, 0.4); /* A semi-transparent dark background */
        font-size: 1.8rem; /* Make the 'X' character a bit larger */
        font-weight: bold; /* Make the 'X' bold */
        color: #fff; /* White color for the 'X' on a dark background */
        opacity: 0.9; /* Slightly transparent by default */
        padding: 0; /* Remove default padding */
        cursor: pointer; /* Indicate it's clickable */
        z-index: 9999; /* Crucial to ensure it's on top and clickable */

        width: 38px; /* Set a fixed width */
        height: 38px; /* Set a fixed height to make it square */
        border-radius: 50%; /* Make it perfectly circular */
        /* Use flexbox to perfectly center the 'X' character */
        display: flex; /* This will make it a block-level flex container */
        align-items: center; /* Vertically center content */
        justify-content: center; /* Horizontally center content */
        /* Smooth transition for hover effects */
        transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

        .close-mobile-menu:hover { /* This is now correctly nested inside the @media block */
            opacity: 1; /* Fully opaque on hover */
            background-color: rgba(0, 0, 0, 0.6); /* Slightly darker background on hover */
            border-color: rgba(255, 255, 255, 0.6); /* More visible border on hover */
        }
}
/* CORRECT closing brace for @media (max-width: 991.98px) */

/* Ensure the button is hidden on larger screens (this is a separate media query for larger screens) */
@media (min-width: 992px) {
    .close-mobile-menu {
        display: none !important;
    }
}

/* Add smooth opacity transition to the main navbar collapse element for fade effect */
#mainNavbar { /* This targets your collapsible menu div by its ID */
    position: relative; /* THIS IS CRITICAL for the button's absolute positioning */
    transition: opacity 0.3s ease-in-out; /* Adjust duration and easing as desired */
}

    /* When the navbar is collapsing (in motion), make it fade out */
    #mainNavbar.collapsing {
        opacity: 0; /* Fully transparent during the collapse transition */
    }

    /* Ensure it's fully visible when expanded (Bootstrap adds 'show' class) */
    #mainNavbar.collapse.show {
        opacity: 1;
    }

/* You can add any other custom styles you had in Site.css previously, below this. */