body, html {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  margin: 0;
  background-color: #F2F2F2;
}

/* Unified Header */
.header {
  display: flex;
  flex-direction: row; /* Align items in a row */
  flex-wrap: wrap; /* Allow items to wrap */
  justify-content: space-between; /* Adjusted to space-between for better alignment */
  align-items: center;
  background-color: #000; /* Or any color you prefer */
  padding: 20px 10px;
}

.logo-container {
  margin-right: 20px; /* Space between logo and search bar */
  flex-grow: 1; /* Allow the logo to grow and push the search bar and social icons apart */
}

.logo {
  max-width: 240px;
  height: auto;
}

.header .search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 2; /* Allow the search bar to grow, aiding in spacing */
}

.header .search-bar input[type="text"], .header .search-bar button {
  height: 38px; /* Ensures input and button are the same height */
  border-radius: 19px; /* Half the height for full pill shape */
}

.header .search-bar input[type="text"] {
  border: 2px solid #FABC2C; /* Gold border */
  background-color: #333; /* For contrast */
  color: white; /* Text color */
  margin-right: 10px; /* Spacing between input and button */
  padding: 0 15px; /* Adjusted padding */
}

.header .search-bar button {
  background-color: #333; /* Dark background for contrast */
  color: white;
  border: 2px solid #FABC2C; /* Gold border */
  cursor: pointer; /* Indicates clickable */
  transition: background-color 0.3s; /* Smooth transition for hover */
  width: auto; /* Adjust based on the content, or set a specific width */
  padding: 0 15px; /* Adjusted padding */
}

.header .search-bar input[type="text"]:focus,
.header .search-bar button:focus {
  outline: none; /* Remove the default browser outline */
  box-shadow: 0 0 0 2px #FABC2C; /* Gold box shadow for a glow effect */
}

.header .search-bar button:hover {
  background-color: #FABC2C; /* Gold for button on hover */
  color: #000; /* Text color on hover */
}

.header .search-bar button:focus {
  outline: none; /* Remove the default browser outline */
  box-shadow: 0 0 0 2px #FABC2C; /* Gold glow instead */
}

/* Social Media Icons */
.social-icons {
  display: flex;
  justify-content: center; /* Center the icons within their container */
  align-items: center;
  flex-grow: 1; /* Allow the icons to grow and push against the edges */
}

.social-icons a {
  color: #FFFFFF; /* Set the icon color */
  margin: 0 15px; /* Increase space around icons */
  font-size: 150%; /* Double the size of the icons */
  transition: color 0.3s; /* Smooth color transition for hover effect */
  text-decoration: none; /* No underline for links */
}

.social-icons a:hover {
  color: #FABC2C; /* Color when hovered */
}

.tagline-section {
  background-color: #FABC2C; /* Gold color */
  color: #000;
  font-size: 1.2em;
  text-align: center; /* Ensures the text is centered */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Adds shadow to the bottom */
  margin-bottom: 8px; /* Adds space below the tagline section */
}

.tagline-section p {
  margin: 0; /* Removes default margin from the paragraph */
  padding-top: 1px; /* Optional: Adjust top padding to fine-tune spacing */
  padding-bottom: 1px; /* Optional: Adjust bottom padding to fine-tune spacing */
  font-weight: bold; /* Makes the text bold */
}

.articles-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30px;
  gap: 20px;
  width: 100%;
  background-color: #F2F2F2; /* Background color of the container */
}

.article {
  background-color: #FFFFFF; /* White panels for articles */
  border-radius: 8px;
  padding: 15px; /* Adds padding inside each article, you might adjust this as per your design */
  margin-bottom: 20px; /* Space between rows */
  flex: 0 1 calc(25% - 15px); /* Adjusted gap accounting */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Keeps footer at the bottom */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds shadow to the article panels */
}

.article h2 {
  font-size: 1.5em; /* Larger font size for article titles */
  margin-bottom: 10px; /* Space between the title and any text below */
}
 
.article-image {
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -15px;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
  transition: opacity 0.3s ease;
  background-color: #000;
}


.article a:hover .article-image {
  opacity: 0.8;
}

.article-name-link, .read-more-link {
  text-decoration: none; /* Removes underline from links */
  color: #000;
}

.article-name-link:hover, .read-more-link:hover {
  text-decoration: underline; /* Adds underline on hover for better visibility */
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.article-date {
  flex-grow: 1;
  text-align: right;
}

.read-more-link {
  text-align: left;
  text-decoration: underline;
  color: #007bff; /* Bootstrap primary blue for consistency */
}

.loading-placeholder {
  width: 100%;
  height: 150px;
  background-color: #eaeaea; /* Light gray background */
  border: 2px solid #cccccc; /* Lighter gray border */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  color: #999999; /* Gray text */
}

.article:hover {
  background-color: #f9f9f9; /* Slightly lighter than #fff */
  border-color: #FABC2C; /* Gold to match logo */
}

/* Load More Button Customization */
#load-more {
  font-weight: bold; /* Makes the button text bold */
  background-color: #000; /* Button background color */
  color: white; /* Button text color */
  border-radius: 8px; /* Rounds the corners of the button */
  padding: 10px 20px; /* Adjusts the padding inside the button for a bigger touch area */
  border: none; /* Removes the default border */
  cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
  transition: background-color 0.3s ease; /* Smooth background color transition on hover/focus */
}

#load-more:hover, #load-more:focus {
  background-color: #333333; /* Darker shade on hover/focus for visual feedback */
  color: #ffffff; /* Ensures text color remains white on hover/focus */
  outline: none; /* Removes the outline to keep the design clean */
}

.contact-form-container {
  max-width: 600px; /* Limits the width of the form container */
  margin: 0 auto; /* Centers the container */
  padding: 15px; /* Adds some padding inside the container */
  border-radius: 8px; /* Optional: adds rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
  background-color: #ffffff; /* Optional: in case you want a different background */
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form > .form-group {
  margin-bottom: 15px; /* Adds spacing between form fields */
}

.contact-form > button {
  align-self: center; /* Centers the submit button */
  padding: 8px 20px; /* Adjust the padding to your liking */
  font-size: 1rem; /* Adjust the font size to your liking */
}

.site-footer {
  background-color: #000; /* Light gray background */
  color: #F2F2F2; /* Optional: Text color if you add text in the footer */
  text-align: center; /* Optional: Text alignment if you add text */
  padding: 20px 0; /* Adjusts the padding for the footer */
  width: 100%;
  margin-top: auto;
}

/* Responsive adjustments for the header, making logo and search bar stack on smaller screens */
@media (max-width: 600px) {
  .logo-container, .header .search-bar, .header .search-button {
    width: 100%; /* Ensure full width for stacking */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack elements vertically */
    margin-bottom: 20px; /* Even spacing between elements */
  }

  /* Remove the bottom margin for the last item to avoid extra space at the end */
  .header .search-button {
    margin-bottom: 0;
  }
}

/* Adjustments for the "Load More" button on smaller screens */
@media (max-width: 767px) {
  #load-more {
    width: 100%; /* Makes the button full width */
    margin: 20px 0; /* Adds some margin to the top and bottom */
  }

  .article {
    flex: 0 1 100%; /* Adjusts for 1 article per row */
  }
}

/* Responsive layout for articles on desktops and larger devices */
@media (min-width: 992px) {
  .articles-section {
    display: flex;
    justify-content: space-between;
  }
  .article {
    width: 24%; /* Four articles with spacing */
  }
}

/* Adjustments for tablets to display 2 articles per row */
@media (max-width: 991px) and (min-width: 768px) {
  .article {
    flex: 0 1 calc(50% - 20px); /* Adjusts for 2 articles per row */
  }
}