body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    color: #1f1f1f;
    background-image: url('images/background-tree.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

head {
    background-color: #4F6F52;
    color: #e8e8e8; /* Changed from #fff to #1f1f1f */
    text-align: center;
    padding: 1rem;
}

head h1 {
    margin: 0;
}

nav ul {
    padding: 0;
    list-style-type: none;
}

nav ul li {
    display: inline;
    position: relative;
    padding: 0 15px; /* Add padding around the links */
}

nav ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 15px; /* Height of the line */
    width: 1px; /* Width of the line */
    background-color: #e8e8e8; /* Color of the line */
}

nav ul li a {
    color: #e8e8e8; /* Changed from #fff to #1f1f1f */
    text-decoration: none;
}

main {
    background-color: #F5EFE6; /* Set a background color for the main section */
    max-width: 1250px; /* Adjust as needed */
    margin: 0 auto; /* Center the main content */
    padding: 10px; /* Reduce padding */
    border: 2px solid black; /* Add a 2px solid black border */
    box-sizing: border-box; /* Include border in element's total width and height */
    width: 95%; /* Add this to ensure some margin on mobile */
}

section {
    margin-bottom: 40px;
}

h2 {
    margin: 20px 0;
    color: #141414; /* Changed from #fff to #1f1f1f */
    padding: 10px;
}

/* Add a specific style for footer h2 to override the general h2 style */
.footer-head h2 {
    background-color: transparent; /* This removes the grey background for footer headings */
    margin: 0; /* Remove the margin since the footer-head div already has padding */
    color: #e8e8e8;
}

.btn {
    display: inline-block;
    background-color: #4a4a4a;
    color: #1f1f1f; /* Changed from #fff to #1f1f1f */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.about-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.author-image {
    margin-top: 25px;
    flex-shrink: 0;
    position: sticky;
    top: 25px; /* Adjust this value to set how far from the top the image should stick */
    align-self: flex-start;
}

.author-image img {
    max-width: 300px;
    height: auto;
}

.about-content {
    flex: 1;
}

.about-container h1 {
    text-align: center; /* Center the heading */
    width: 100%; /* Ensure it takes full width */
    margin-bottom: 20px; /* Space below the heading */
    position: relative; /* Allow for positioning */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
}

.header {
    max-width: 1250px; /* Match the max-width of the main container */
    margin: 0 auto; /* Center the header and add margin above and below */
    margin-top: 20px;
    text-align: center; /* Center the text */
    background-color: #b3c9b8;
    text-emphasis-color: #1f1f1f;
    border: 2px solid black;
    box-sizing: border-box;
    width: 95%; /* Add this to match main container */
    padding: 10px; /* Add padding for better mobile spacing */
}

.thank-you-container {
    grid-column: span 3; /* Make the thank you message span all three columns */
    margin-top: 20px; /* Add some space above the thank you message */
    text-align: center;
}

/* Add styles for the header */
header {
    background-color: #1A4D2E;
    color: #e8e8e8; /* Changed from #fff to #1f1f1f */
    padding: 1rem;
    text-align: center;
}

/* Add styles for the book showcase */
.book-showcase {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    gap: 2rem; /* Space between book items */
}

.book-item {
    display: block;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.book-item h2 {
    color: black;
    text-align: center;
    margin-bottom: 5px;
    width: 100%;
}

.book-item .publisher {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    margin-bottom: 1rem;
    width: 100%;
}

.book-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.book-cover-container {
    justify-content: center;
    margin: auto;
    flex-shrink: 0;
    width: 200px;
}

.book-cover {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.book-text-content {
    flex: 1;
}

.book-text-content h2 {
    margin-top: 0;
    margin-bottom: 0.1rem; /* Reduce margin between title and publisher */
    text-align: left;
}

.publisher {
    margin-top: 0; /* Ensure no extra margin above */
    margin-bottom: 0.1rem;
    text-align: left;
}

/* Remove any center alignment that might be inherited */
.book-item h2, 
.book-item .publisher {
    text-align: left;
    width: 100%;
}

/* Responsive design */
@media (max-width: 768px) {
    .book-content {
        flex-direction: column;
        align-items: center;
    }
    
    .book-text-content {
        width: 100%;
        text-align: center;
    }
    
    .book-cover-container {
        margin-bottom: 1rem;
    }
}

.book-info {
    width: 100%;
    margin-top: 1rem; /* Add space between image and text */
}

.book-info h2 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.book-info h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.author, .release-date {
    font-style: italic;
    margin-bottom: 0.5rem;
}

.description {
    font-style: normal;
    color: #333333; /* Dark grey color */
    margin-bottom: 1rem;
    font-weight: normal; /* Remove bold */
}

.synopsis {
    margin-bottom: 1.5rem;
}

.book-actions {
    display: flex;
    gap: 1rem;
}

.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

.btn-primary {
    background-color: #007bff;
    color: #fff; /* Changed from white to #1f1f1f */
}

.btn-secondary {
    background-color: #6c757d;
    color: #1f1f1f; /* Changed from white to #1f1f1f */
}
.books-container {
    max-width: 1250px; /* Set the same max-width for consistency */
    margin: 0 auto; /* Center the container */
}

.book-covers-showcase {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items at the top */
    gap: 2rem;
    margin: 2rem 0;
}

.book-cover-link {
    transition: transform 0.3s ease;
    border: 1px solid #ddd; /* This adds a border around each book cover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 10px; /* This adds some internal spacing within the border */
    background-color: #F5EFE6; /* This ensures a consistent background */
}

.book-cover-link:hover {
    transform: scale(1.05);
}

.large-book-cover {
    width: 200px;  /* Match the size of detailed view covers */
    height: 300px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .book-covers-showcase {
        flex-direction: column; /* Stack images vertically on mobile */
        align-items: center; /* Center the images */
    }

    .large-book-cover {
        width: 200px;  /* Smaller width for mobile devices */
        height: 300px; /* Smaller height for mobile devices */
    }
}

/* Add styles for h3 headers in the One Health section */
#one-health h3 {
    background-color: #d4edda; /* Light green background */
    border: 2px solid #c3e6cb; /* Darker green border */
    padding: 10px; /* Padding for spacing */
    font-size: 1.5rem; /* Increase font size */
    border-radius: 5px; /* Rounded corners */
}

/* Add these styles for book titles */
.book-item h2 {
    color: black; /* Set title color to black */
    text-align: center; /* Center the title */
    margin-bottom: 5px; /* Reduce space between title and publisher */
}

.book-item .publisher {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    margin-bottom: 1.5rem;
    width: 100%; /* Ensure full width */
    display: block; /* Make it a block element */
}

.book-content {
    display: flex;
    align-items: flex-start;
    margin-top: 1rem; /* Add some space after the publisher text */
}

/* Set a fixed width for book covers */
.book-cover {
    width: 200px; /* Set fixed width */
    height: 300px; /* Set fixed height */
    object-fit: cover; /* Maintain aspect ratio while covering area */
    margin-right: 2rem; /* Consistent right margin */
    flex-shrink: 0; /* Prevent cover from shrinking */
}

/* Ensure book items are responsive */
.book-item {
    width: calc((100% - 40px)); /* Adjust width for three items with gaps */
    margin: 25px 10px; /* Add margin for spacing */
    margin-bottom: 3rem; /* Consistent spacing between books */
}

footer {
    margin-top: 10px;
    color: #e8e8e8; /* White text */
    justify-content: center;
    
}
.footer-head {
    background-color: #1A4D2E; /* Set a background color for the footer */
    padding: 1rem;
    text-align: center; /* Left justify the footer text */
    color: #e8e8e8;
}
.footer-content {
    background-color: #4F6F52;
    display: flex;  /* Change from grid to flex */
    flex-direction: column;  /* Stack items vertically */
    align-items: center;  /* Center items horizontally */
    padding: 20px;
}

/* Consolidated styles for footer-section and its ul */
.footer-section {
    padding: 10px; /* Add padding inside the box */
    margin-bottom: 20px; /* Space between sections */
}

.footer-section ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    justify-content: space-between; /* Space between bold text and link */
    align-items: flex-end; /* Align items to the bottom */
    flex-grow: 1; /* Allow the ul to grow and take available space */
}

.footer-section li {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between bold text and link */
}

.footer-section strong {
    flex: 1; /* Allow the strong text to take available space */
}

.footer-section a {
    text-align: right; /* Right-align the links */
    margin-left: 10px; /* Space between bold text and link */
    color: #003a74;
}

.footer-section h3 {
    padding: 10px 0px; /* Padding around the heading */
    display: inline-block; /* Make the box fit the content */
    margin-bottom: 10px; /* Space below the heading */
    text-align: left; /* Center the heading text */
    color:#e8e8e8;
}

.footer-group {
    justify-content: space-between; 
    border: 2px solid #000;
    padding: 20px;
    max-width: 750px;  /* Match the max-width of other containers */
    width: 100%;  /* Take full width up to max-width */
    box-sizing: border-box;  /* Include padding and border in width calculation */
}

/* Blog Styles */
.blog-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px;
}

.blog-post {
    background-color: #F5EFE6;
    border: 2px solid black;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.post-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    color: #666;
    font-style: italic;
}

.post-image {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 4px;
}

.post-content {
    line-height: 1.8;
}

.post-content h3 {
    color: #1A4D2E;
    margin: 1.5rem 0 1rem 0;
}

blockquote {
    border-left: 4px solid #4F6F52;
    margin: 1.5rem 0;
    padding-left: 1rem;
    font-style: italic;
    color: #444;
}

.post-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blog-post {
        padding: 1rem;
    }
    
    .post-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* 
#1A4D2E
#4F6F52
#E8DFCA
#F5EFE6
#007bff */

/* Contact Form Styles */
.contact-form {
    max-width: 500px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: #F5EFE6; /* Match the main content background */
    border: 2px solid black; /* Match the main content border */
}

.form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.contact-form button {
    background-color: #1A4D2E; /* Match your theme color */
    color: #e8e8e8;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #4F6F52; /* Lighter theme color for hover */
}

/* Add these styles for the One Health visualizations */
.one-health-visualizations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

.one-health-visualizations td {
    padding: 0;
}

.one-health-image {
    width: 100%;
    height: auto; /* Remove fixed height */
    object-fit: contain; /* Change from 'cover' to 'contain' */
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 300px; /* Optional: set maximum height if needed */
}

/* Make it responsive for mobile */
@media (max-width: 768px) {
    .one-health-visualizations {
        grid-template-columns: 1fr; /* Stack images on mobile */
    }
}

/* Update about container for mobile */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        align-items: center;
    }

    .author-image {
        position: static; /* Remove sticky positioning on mobile */
        margin: 0 auto 20px;
    }

    .author-image img {
        max-width: 200px; /* Smaller image on mobile */
    }
}

/* Update navigation for mobile */
@media (max-width: 768px) {
    nav ul li {
        display: block; /* Stack navigation items */
        padding: 10px 0;
        text-align: center;
    }

    nav ul li:not(:last-child)::after {
        display: none; /* Remove separators on mobile */
    }
}

/* Update footer for mobile */
@media (max-width: 768px) {
    .footer-group {
        padding: 10px;
        width: 95%;
    }

    .footer-section {
        margin-bottom: 15px;
    }

    .footer-section li {
        flex-direction: column; /* Stack footer items */
        align-items: center;
        text-align: center;
    }

    .footer-section a {
        margin-left: 0;
        margin-top: 5px;
    }
}

/* Add these styles for the One Health images */
#one-health img {
    max-width: 100%; /* Ensure images do not exceed the width of their container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any inline spacing */
    margin: 0 auto; /* Center images within their container */
}

/* Make the One Health section responsive for mobile */
@media (max-width: 768px) {
    #one-health {
        padding: 10px; /* Add padding for better spacing on mobile */
    }
}

/* Add styles for references */
.references {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Enhance heading hierarchy in blog posts */
.blog-post h3 {
    color: #1A4D2E;
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
}

/* Add some spacing between paragraphs */
.blog-post p {
    margin-bottom: 1.2rem;
}

/* Reference tooltip styles */
sup {
    cursor: pointer;
    position: relative;
    white-space: nowrap; /* Keep reference numbers together */
}

sup a {
    text-decoration: none;
    color: #1A4D2E;
    padding: 0 2px; /* Add some spacing between multiple references */
}

sup:hover::after {
    content: attr(data-reference);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #F5EFE6;
    border: 1px solid #4F6F52;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    width: max-content;
    max-width: min(300px, 80vw); /* Responsive width */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;
    white-space: normal;
    color: #1f1f1f;
}

/* Ensure tooltips don't get cut off at the edges */
@media (max-width: 768px) {
    sup:hover::after {
        left: 0;
        transform: none;
    }
    
    /* Prevent tooltip from going off-screen on the right */
    sup:hover::after {
        left: auto;
        right: -10px;
        transform: none;
    }
}

/* Reference styles */
sup a {
    text-decoration: none;
    color: #1A4D2E;
}

sup a:hover {
    text-decoration: underline;
}

.references {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

.references h2 {
    margin-bottom: 1rem;
}

.references ol {
    padding-left: 2rem;
}

.references li {
    margin-bottom: 0.5rem;
    scroll-margin-top: 2rem; /* This adds some space when scrolling to a reference */
}

/* Smooth scrolling for reference links */
html {
    scroll-behavior: smooth;
}

.content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px); /* Adjust based on header/footer height */
    gap: 25px;
    padding: 20px;
    margin: 20px auto;
    max-width: 1250px; /* Match other container widths */
    width: 95%;
    box-sizing: border-box;
}

.content-wrapper img {
    max-width: 100%;
    height: auto;
}