/* General Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    width: 900px;
    margin: 0 auto;
    padding: 0;
    border: 3px solid green;
    box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    font-weight: bold;
}

a:hover, a:focus {
    color: darkgreen;
}

/* Header */
header {
    background: linear-gradient(to bottom, white 0%, lightgreen 100%);
    padding: 15px 30px;
    border-bottom: 2px solid green;
    display: flex;
    align-items: center; /* Vertically align items in the header */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Ensure text is centered within its own space */
}

header .image-box {
    width: 30px; /* Tiny width for the image box */
    height: 30px; /* Tiny height for the image box */
    margin-right: 10px; /* Space between the image box and text */
    display: flex; /* Use flexbox to center the image within its box */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide any part of the image that might overflow */
}

header .image-box img {
    width: 100%; /* Make the image take up the full width of its box */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent extra space below the image */
    object-fit: contain; /* Ensure the image fits within the box without distortion */
}

header h2 {
    font-size: 250%;
    font-style: italic;
    color: green;
    text-shadow: 3px 3px 3px lightgreen;
    margin-bottom: 5px; /* Add a little space below the h2 */
}

header h3 {
    font-size: 150%;
    padding-bottom: 0.75em;
    margin: 0;
}

/* Navigation Menu */
#nav_menu {
    clear: left;
    border-bottom: 2px solid green;
}

#nav_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: green;
}

#nav_menu ul li {
    position: relative;
    flex: 1;
}

#nav_menu ul li a {
    display: block;
    padding: 0.7em 0;
    background-color: green;
    color: white;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

#nav_menu ul li a:hover {
    background-color: darkgreen;
}

#nav_menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%; /* Updated: dropdown matches parent tab width */
    z-index: 999;
}

#nav_menu ul ul li {
    float: none;
    width: 100%;
}

#nav_menu ul ul li a {
    display: block;
    width: 100%; /* Added: ensures dropdown links fill the dropdown box */
    background-color: green;
    color: white;
    text-align: center;
    padding: 0.7em 0;
}

#nav_menu ul ul li a:hover {
    background-color: darkgreen;
}

#nav_menu ul li:hover > ul {
    display: block;
}

#nav_menu > ul::after {
    content: "";
    clear: both;
    display: block;
}

/* Main Content */
section {
    width: 565px;
    float: right;
    padding: 25px 30px;
}

section h1 {
    font-size: 160%;
    margin-bottom: 0.3em;
}

section h2 {
    font-size: 130%;
    margin-bottom: 0.5em;
}

section p {
    font-size: 100%;
    margin-bottom: 0.7em;
}

/* Bullet Points */
.bullet-points {
    list-style-type: none;
    padding-left: 20px;
}

.bullet-points li {
    margin-bottom: 0.5em;
    font-size: 110%;
}

/* Sidebar */
aside {
    float: left;
    width: 245px;
    padding: 25px 0 0 30px;
}

aside h2 {
    font-size: 130%;
    color: darkgreen;
}

aside ul {
    line-height: 1.5;
    padding-left: 16px;
}

aside a {
    color: green;
}

aside a:hover {
    color: darkgreen;
}

/* Footer */
footer {
    clear: both;
    padding: 15px 30px;
    background-color: green;
}

footer p {
    text-align: center;
    font-size: 85%;
    color: white;
}

/* === Additional Header Layout Styles from HTML === */
header {
    background: linear-gradient(to bottom, white 0%, lightgreen 100%);
    padding: 15px 30px;
    border-bottom: 2px solid green;
    display: flex;
    align-items: center;
}

header .header-box {
    display: flex;
    align-items: center;
    width: 100%;
}

header .image-box {
    width: auto;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100px;
    flex-shrink: 0;
}

header .image-box img {
    max-height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

header .header-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    flex-grow: 1;
}

header .logo {
    display: none;
}