/* CSS Document */
body {
    margin: 0;
    font-family: Arial, sans-serif;	
}

h1, h2, h3, h4 { color: #333; margin-top: 0; font-family: "arial", sans-serif; font-weight: 500; }
h1 { font-size: 2em; margin: 0.67em 0; color: #3D8977; text-align: center; }
h2 { font-size: 1.5em; margin: 0.83em 0; text-transform: uppercase;}
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; color: #1D69AA; font-weight: 600;
            margin: 0; 
            padding: 0; 
}

h5, h6 { color: #009933; margin-top: 0; font-family: "arial", sans-serif; font-weight: 500; }

h5 { font-size: 1.17em; margin: 1em 0; }
h6 { font-size: 1em; margin: 1.33em 0; color: #1D69AA; font-weight: 600;
            margin: 0; 
            padding: 0; 




/* General styling for form elements */
button, input, select, textarea {
    font-size: 16px; /* Text size */
    padding: 5px; /* Padding inside the elements */
    border: 1px solid #ccc; /* Border with padding of 2px */
    border-radius: 5px; /* Optional: Rounded corners */
    outline: none; /* Removes the default outline */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition for hover effects */
}

/* Hover effect for form elements */
button:hover, input:hover, select:hover, textarea:hover {
    background-color: #FFFF99; /* Hover background color */
    border-color: #003366; /* Hover border color */
    color: blue; /* Optional: Change text color on hover */
}

/* Specific styling for buttons */
button {
    cursor: pointer; /* Pointer cursor for buttons */
    background-color: #f0f0f0; /* Default background color for buttons */
    color: #333; /* Default text color for buttons */
}

button:hover {
    color: white; /* Change text color on hover for buttons */
}

/* Optional: Additional focus styling */
button:focus, input:focus, select:focus, textarea:focus {
    border-color: blue; /* Border color on focus */
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Optional: Box shadow on focus */
}

container {
    max-width: 900px; /* Set the maximum width for the page */
    margin: 0 auto; /* Center the page */
    
    /*  border: 1px solid black;Add border to page container */
}

.logo-cell img {
    width: 100px;
    height: 100px;
}

.tagline-cell {
    text-align: center;
}

.menu-cell ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-cell ul li {
    margin-bottom: 5px; /* Add margin between menu items */
}

.image-cell {
    text-align: center;
}

.content-container {
    padding: 20px;
	max-width: 800px;
    /*  border: 1px solid black;Add border to content container */
}

header {
	display: flex;
    justify-content: center;
    /* align-items: center;
    height: 100vh; Full viewport height for demonstration */
     /*border: 1px solid black; Border for visual reference */	
		}

/* Responsive Styles */
@media (max-width: 770px) {
    .header-table {
        display: block;		
    }

    .header-table tr {
        display: block;
        margin-bottom: 10px; /* Add margin between table rows */
    }

    .header-table td {
        display: block;
        width: 100%;
        text-align: center;
    }

    .menu-cell {
        margin-top: 10px; /* Add margin between menu rows */
		margin-left: 10px; /* Add margin between menu rows */
    }

    .logo-cell,
    .tagline-cell,
    .image-cell,
    .menu-cell {
        border: none; /* Remove borders for individual cells */
		
    }
}

.nav-main .menu-element a { 
padding: 1px 10px 1px 0; 
border-bottom: 1px solid transparent; 
color: #1D69AA; 
font-family: "arial", sans-serif; 
font-size: 15px; font-size: 1.0em; 
text-transform: uppercase; 
font-weight: 515; 
text-decoration: none; 
}
.nav-main .menu-element.current-menu-element a, .nav-main .menu-element:hover a { border-bottom: 2px solid #3D8977; }

li
{
	list-style-type: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
    margin: 5px 5px;; /* Removes default margin */
}

.menu-footer {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the menu-footer */
}

.menu-footer-element {
    text-align: center;
    margin-right: 10px; /* Adjust spacing as needed */
}

.menu-footer-element a {
    text-decoration: none;
    color: #1D69AA; /* Adjust link color as needed */
    transition: color 0.3s ease; /* Smooth transition for color change */
    font-weight: 700;
}

.menu-footer-element a:hover {
    color: #FF6347; /* Change to desired hover color */
}

@media (max-width: 770px) {
    .menu-footer {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Four equal columns */
        grid-template-rows: auto auto; /* Two rows */
        gap: 5px; /* Adjust gap between items as needed */
        justify-items: center; /* Center items horizontally */
    }

    .menu-footer-element {
        margin-right: 0; /* Reset margin-right as grid gap is used */
    }

    /* Ensure each element spans a single column except for specific cases */
    .menu-footer-element:nth-child(1),
    .menu-footer-element:nth-child(2),
    .menu-footer-element:nth-child(3),
    .menu-footer-element:nth-child(4),
    .menu-footer-element:nth-child(5),
    .menu-footer-element:nth-child(6),
    .menu-footer-element:nth-child(7) {
        grid-column: auto; /* Span a single column */
    }

    /* If necessary to adjust specific items, you can use nth-child targeting */
}

/* bottom 3 in a row, swaps to column of 3 below 400px */
.container-flex {
    display: flex;
    flex-wrap: wrap;
}

.box {
    flex: 1 0 30%; /* Flex basis set to 30%, allowing 3 boxes to fit in a row */
    background-color: #F9F9F9;
    margin: 10px;
	padding: 5px;
}

@media (max-width: 400px) {
    .box {
        flex-basis: 100%; /* Change flex basis to 100% for each box, making them stack vertically */
    }
}

.page-container
{
	
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 

}

.side-container {
    display: flex;
    /*justify-content: left; space-between Adjust as needed */
    align-items: center; /* Center items vertically */
   border: 3px solid white; /*  For visual reference */
    padding: 1px;
}

.side-container > div.left-align {
    border: 3px solid white;  /*For visual reference */
    padding: 5px;
    margin: 5px;
	}