/* blog.css */
#blog {
  padding: 80px 0;
  text-align: center;
}

.blog-post {
  margin-bottom: 40px;
  border: 1px solid #ffc700;
  padding: 20px;
  border-radius: 10px;
}

.blog-post h3 {
  margin-bottom: 10px;
  color: #ffc700;
}

.post-date {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10px;
}

.post-excerpt {
  margin-bottom: 20px;
}

/* Image Styling */
.blog-post img {
  width: 100%; /* Make the image responsive */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 20px;
  border-radius: 10px; /* Optional: Rounded corners */
  position: relative; /* Add this to allow absolute positioning of the author image */
}

.blog-visuals {
    position: relative; /* Add this to allow absolute positioning of the author image */
    width: 100%; /* Make the image responsive */
    max-width: 600px; /* Limit the maximum width */
    margin: 0 auto; /* Center the image container */
}

/* Author Image Styling */
.blog-post .author-image {
    position: absolute;
    top: 10px; /* Adjust vertical position as needed */
    left: 10px; /* Adjust horizontal position as needed */
    width: 100px; /* Adjust width as needed */
    height: 100px; /* Adjust height as needed */
    object-fit: cover; /* Cover the entire circle area */
    border-radius: 50%; /* Optional: Make the image circular */
    outline: 2px solid black;
  }