/*
Theme Name: first-theme - beatiful
*/

.header-image-container {
    overflow: hidden; /* Hides the overflowing part of the image */
    aspect-ratio: 2/1;
    height:480px; /* Sets container height to 50% of the image's intrinsic height */
    max-width: 1534px; /* Maintains full width */
    width: 100%;
    position: relative;
    margin: 0 auto; /* Centers the container horizontally */
}

.header-image {
    position: absolute;
    bottom: 0;
    width: 100%; /* Ensures the image fills the container width */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes any default spacing */
}

.header-wrapper {
    /*background-color: #243624;*/
    background-color: #587458;
}

/* Header Navigation */
.header-nav {
    width: 100%;
    text-align: center; /* Center-align menu items */
    margin-top: 10px; /* Space between image and menu */
}

.header-menu {
    list-style: none; /* Remove default bullets */
    margin: 0;
    padding: 0;
    display: flex; /* Horizontal menu */
    justify-content: center; /* Center items */
}

.header-menu li {
    margin: 0 15px; /* Space between menu items */
}

.header-menu li a {
    text-decoration: none; /* Remove underline */
    color: #dee7dd; /* Link color (works for light/dark themes) */
    font-size: 24px;
    padding: 10px;
    font-weight: bold;
}

.header-menu li a:hover {
    color: #0073aa; /* Hover color (WordPress blue) */
}

/* Highlight Current Menu Item - wordpress adds automatically class li.current-menu-item */
.header-menu li.current-menu-item a {
    color: #ffffff; /* White color for active page */
    /*background-color: #0073aa; /* WordPress blue background for highlight */
    background-color: #344d34; /* WordPress blue background for highlight */
    border-radius: 5px; /* Rounded corners for a polished look */
}

/* Ensure header stays in place */
header {
    position: relative;
    width: 100%;
    padding: 20px 0; /* Add padding for spacing */
}

/* About Page Styles */
.about-page {
    padding: 40px 0;
    background-color: #f8f8f8; /* Light background for contrast */
}

.about-content .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-content h1 {
    font-size: 36px;
    color: #243624; /* Matches header background for consistency */
    text-align: center;
    margin-bottom: 20px;
}

.about-content p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

/* Footer Styles */
.footer-wrapper {
    background-color: #587458; /* Matches header background for consistency */
    color: #fff; /* Matches menu link color */
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    min-height: 60px; /* Ensures enough space for vertical centering */
}

.footer-content {
    text-align: center; /* Centers text horizontally */
    font-size: 24px;
}