/* Basic body styling (optional, might already be handled) */
body {
  font-family: sans-serif;
  margin: 2em; 
}

/* Center the main content area */
.homepage-content {
  max-width: 900px; /* Adjust max width as needed */
  margin: 0 auto; /* Center the block */
  padding: 20px;
}

/* Styling for the Swiper slideshow */
.hero-slideshow {
  width: 80%;     
  height: 350px;    
  margin-top: 20px; 
  margin-bottom: 20px; 
  margin-left: auto;  
  margin-right: auto; 
  background-color: #eee; 
  border: 1px solid #ccc; 
  overflow: hidden; /* Prevents seeing adjacent slides during transition */
}

/* Styling for individual slides */
.hero-slideshow .swiper-slide {
  text-align: center; 
  font-size: 18px;
  background: #fff; 

  /* Center slide content vertically (Flexbox method) */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for images within slides */
.hero-slideshow .swiper-slide img {
  display: block; 
  width: 100%;     
  height: 100%;    
  object-fit: contain; /* Show entire image, may leave space */
}

/* Optional: Style navigation buttons */
.swiper-button-next, .swiper-button-prev {
    color: #007aff; 
}

/* Optional: Style pagination bullets */
.swiper-pagination-bullet-active {
    background: #007aff; 
}

/* Header Styling */
.site-header {
  background-color: #f8f9fa; /* Light background color */
  padding: 10px 0;
  border-bottom: 1px solid #e7e7e7;
}

.site-header .container {
  max-width: 900px; /* Match homepage content width */
  margin: 0 auto; /* Center the container */
  padding: 0 20px; /* Add padding on sides */
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space logo and nav apart */
  align-items: center; /* Vertically align items */
}

.site-header .logo a {
  font-size: 1.5em; /* Make title/logo larger */
  font-weight: bold;
  color: #333; /* Dark text color */
  text-decoration: none; /* Remove underline */
}

.site-header .main-nav ul {
  list-style: none; /* Remove bullet points */
  margin: 0;
  padding: 0;
  display: flex; /* Lay out nav items horizontally */
}

.site-header .main-nav li {
  margin-left: 20px; /* Space between nav items */
}

.site-header .main-nav a {
  color: #007bff; /* Blue link color */
  text-decoration: none;
  font-size: 1em;
}

.site-header .main-nav a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Adjust body margin to prevent overlap with fixed header (optional) */
/* If you make the header fixed later, you'll need something like this: */
/* body { margin-top: 80px; } */ 

/* Style the header banner image */
.site-header .logo img.header-banner {
  height: 50px; /* Adjust this height as needed */
  width: auto; /* Let width adjust automatically */
  vertical-align: middle; /* Helps align image nicely with nav links */
}