/* Hide the default navigation menu */
nav {
    display: none;
}

/* Style the hamburger menu */
#hamburger-menu {
    display: block;
    color: #021b27;
}

nav {
    display: none;
}

/* Full-screen navigation menu when active */
nav.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black */
    z-index: 9999; /* Ensure it's above other elements */
    flex-direction: column; /* Stack menu items vertically */
    justify-content: center; /* Center menu items vertically */
    align-items: center; /* Center menu items horizontally */
}

nav.active a {
    display: block;
    margin: 10px 0;
    font-size: 24px; /* Larger font size for better touch targets */
}

/* Style the close button */
#close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above other elements */
    color: #fff!important;
    display: none;
}

/* Center the menu links */
nav.active {
    /* ... existing styles ... */
    text-align: center; /* Center the menu items */
    padding-top: 60px; /* Space for the close button */
}

nav.active a {
    /* ... existing styles ... */
    margin: 20px 0; /* Increase spacing between menu items */
    display: block; /* Display the navigation menu */
}

nav.active #close-menu {
    display: block; /* Display the close menu "X" when the navigation menu is active */
}

/* Header Styles */
header {
    height: 100px; /* Define a fixed height for the header */
    line-height: 100px; /* This will vertically center the logo and nav items */
    background-color: #ffffff; /* White background for the header */
    padding: 0px;
    max-width: 100vw;
}
header .container{
    padding: 10px;
}

/* Ensure text and icons are visible against the white background */
nav a, #close-menu {
    color: #fff; /* Adjust as needed */
}
/*Section Styles*/
section{
    padding: 20px;
    flex-direction: column;
    height: unset;
    min-height: unset;
}
/* Container Styles */
.container {
    max-width: 100%;
    margin: 0 auto; /* This centers the container */
    padding: 0px; /* Gutters */
}

/* Hero Section*/
/* Stack the columns in the hero section */
.hero {
    flex-direction: column; /* Stack children vertically */
}

.hero img, .hero-text {
    width: 100%; /* Take full width */
    max-height: none; /* Reset any height restrictions */
}
.home-button {
    margin-bottom: 100px;
}
/* About section*/
.about-top-row, .about-bottom-row {
    flex-direction: column;
}
.about-bottom-row > div {
    width: 100%;
    margin-bottom: 20px;
}

/*Services section */
.service-tabs {
    flex-direction: column;
    height: unset;
    min-height: unset;
}
.tab-selectors {
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 0px;
    padding: 0px;
}

.tab-button {
    flex: 1;
    text-align: center;
    font-size: 20px;
}
.tab-content {
    width: 100%;
}

/*Contact section*/
.contact-info, .contact-form {
    width: 100%;
}
#contact .row {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
#contact .left-column {
    padding: 20px 10px;
}
.bottom-row{
    flex-direction: column
}
input, select, textarea {
    width: 100%;
}
.social-icons {
    width: 100%;
}
/* Blog section*/
.blog-container {
    flex-direction: column;
}

.blog-left, .blog-right {
    flex: 0 0 100%; /* Make both columns full width on mobile */
    padding-right: 0;
}

.blog-content .post-card {
    margin-bottom: 20px; /* Add some space between stacked posts */
}

#posts-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 100%;
}
div#post-content {
    width: inherit;
    max-width: 90vw;
}
div#post-content table {
    max-width: 100%;
}
div#pagination-container {
    grid-template-columns: 1fr;
    grid-template-areas:
        'prev'
        'blank1'
        'numbers'
        'blank2'
        'next';
}