/* General body styling */
body {
   font-family: 'Georgia', serif;
   background-color: #f5deb3; /* Parchment color */
   margin: 0;
   padding: 0;
   color: #4b2b0c;
}

/* Top Bar Styling */
.top-bar {
   background-color: #8b4513;
   color: #fff;
   padding: 30px; /* Padding for a larger top bar */
   text-align: right; /* Keeps the buttons right-aligned */
   font-size: 24px; /* Larger text size for the top bar */
   position: fixed;
   top: 0;
   width: 100%;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   box-sizing: border-box; /* Ensures padding and width are respected */
}

.top-bar a {
   color: #fff;
   text-decoration: none;
   margin-left: 20px; /* Space between buttons */
   padding: 15px 20px; /* Padding for button size */
   border-radius: 8px;
   transition: background-color 0.3s;
}

.top-bar a:first-child {
   margin-left: 0; /* Ensures the first button doesn’t have unwanted space on the left */
}

.top-bar a:hover {
   background-color: #7a3a12; /* Darker background on hover */
}

/* Padding to ensure content doesn't overlap the top bar */
body, .content, .guides-page, .contact-page {
   padding-top: 120px; /* Reduced padding to account for the top bar */
}

/* Main Content Section */
.content {
   display: flex;
   justify-content: space-between;
   padding: 30px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
   .top-bar {
      padding: 20px; /* Reduce padding on mobile */
      font-size: 18px; /* Smaller text size for mobile */
   }

   .top-bar a {
      margin-left: 10px; /* Less space between buttons on mobile */
      padding: 10px 15px; /* Smaller button padding for mobile */
   }

   body, .content, .guides-page, .contact-page {
      padding-top: 100px; /* Slightly less top padding on mobile */
   }
}



.text-column {
   width: 100%;
   color: #4b2b0c;
   font-size: 22px; /* Larger font for main text */
}

.image-column img {
   width: 35%;
   border: 2px solid #a0522d;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Guides Page Button Styling */
.guides-page {
   text-align: center;
   margin: 50px;
}

.guides-page button {
   background-color: #8b4513;
   color: #fff;
   padding: 20px 40px; /* Larger button padding */
   border: none;
   margin: 15px; /* More space between buttons */
   font-size: 22px; /* Larger text for buttons */
   cursor: pointer;
   border-radius: 12px; /* Rounder corners for buttons */
   transition: background-color 0.3s, transform 0.2s;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow for depth */
}

.guides-page button:hover {
   background-color: #7a3a12;
   transform: translateY(-5px); /* Lift effect on hover */
}

/* Contact Page */
.contact-page {
   text-align: center;
   margin-top: 100px;
   font-size: 24px; /* Larger text for the email section */
}

.contact-page a {
   color: #8b4513;
   text-decoration: none;
   font-size: 24px; /* Larger email link text */
}

.contact-page a:hover {
   text-decoration: underline;
}
/* Add margin to the blog post container */
.post-container {
   max-width: 900px;
   margin: 40px auto; /* Adds space around the container and centers it */
   padding: 20px; /* Adds space inside the container */
   border-radius: 8px; /* Slight rounding of the corners */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}

.blog-post {
   margin: 20px 0; /* Adds vertical space around the blog post */
   line-height: 1.6; /* Increases readability with better line spacing */
}

.post-title {
   margin-bottom: 20px; /* Adds space between the title and the content */
   text-align: left; /* Ensures text is left-aligned */
}

.post-footer {
   margin-top: 40px; /* Adds space between the post content and footer */
}