
/* General Page Styling */
body {
    font-family: Arial, sans-serif;  /* font to be used on all page bodies */
    margin: 0;                       /* leave no spacing around the outside */
    padding: 0;                      /* leave no spacing around the inside */
    background-color: #f9f9f9;     /* white background for all page bodies */
    color: #333;                   /* text color for all page bodies */
    overflow-x: hidden;              /* hide horizontal overflow globally */
}



/* Main Content Area */
h2 {
    text-align: center;
    color: #023670;
}




/* For the About Us Page */
.about-page main {
    margin: 20px;
    padding: 15px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}




/* For the Contact Us Page */
.contact-table {
    width: 100%;
    border-spacing: 2rem;
}
.contact-info {
    vertical-align: top;
}
.contact-form-box {
    border: 1px solid #ccc;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Form Fields */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    box-sizing: border-box;
}

/* For the map */
.map-container {
    margin-top: 2rem;
}




/* For the front page status bar */
.status-bar {
    display: flex;
    justify-content: flex-end;       /* pushes all items to the end/right */
    align-items: normal;             /* items stretch to fill the width of the bar */
    background-color: #002244;     /* dark blue background of status bar */
    color: #ffffff;                /* white text */
    padding: 10px 40px 10px 0px;     /* top right bottom left */
    font-size: 0.9em;                /* a little smaller than the page's font size */
    font-family: Arial, sans-serif;  /* same as page font */
    border-top: 2px solid #004488; /* a 2 pixel border on the top of the status bar */
}

.status-bar div {
    padding: 0px 10px 0px 10px;      /* adds spacing to left and right of status bar items */
    text-align: center;
}



/* For Dark Mode */
.dark-mode {
    background-color: #111;
    color: #eee;
}

/* For the "message received" page */
.mrecv {
  margin-left: 40px;  /* push it right from the left */
}