/* Blog Page CSS */
  
  /* Header Styling */
  header {
    background-color: beige;
    padding: 60px 0;
    text-align: center;
  }
  
  header h1 {
        font-family: 'Playfair Display', serif;
        margin-bottom: 10px;
  }  
  header p.lead {
    font-size: 1.8rem;
    color: purple;
  }
  
  /* Blog Section Styling */
  .blog-section-name {
    margin-bottom: 40px;
    padding: 20px;
    background-color: beige; /* Contrast against lavenderblush */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .blog-section-name h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: blueviolet; /* Matches the index page theme */
    margin-bottom: 15px;
  }
  
  .blog-section-name h3 {
    font-size: 1.5rem;
    color: purple;
    margin-top: 20px;
  }
  
  .blog-section-name h4 {
    font-size: 1.2rem;
    color: coral;
    margin-top: 15px;
  }
  
  .blog-section-name p {
    font-size: 1rem;
    line-height: 1.6;
    color: darkred; /* Darker text for better readability */
    margin-bottom: 15px;
  }
  
  /* Links */
  .blog-section-name a {
    color: purple; /* Matches the index page theme */
    text-decoration: none;
    font-weight: bold;
  }
  
  .blog-section-name a:hover {
    text-decoration: underline;
  }
  
  /* Call-to-Action Section */
  .container.text-center.my-5 {
    background-color: beige; /* Contrast against lavenderblush */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .container.text-center.my-5 h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: purple; /* Matches the index page theme */
    margin-bottom: 15px;
  }
  
  .container.text-center.my-5 a.btn-primary {
    background-color: purple; /* Matches the index page theme */
    border: none;
    padding: 10px 20px;
    font-size: 1.2rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .container.text-center.my-5 a.btn-primary:hover {
    background-color: darkorchid; /* Slightly darker shade for hover effect */
  }
  
/* Responsive Design */
  /* Small Devices (e.g., phones, less than 576px) */
@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 1.2rem; /* Reduce font size for smaller screens */
    }

    h1 {
        font-size: 2rem; /* Adjust heading size */
    }

    .card-title {
        font-size: 1rem; /* Reduce card title size */
    }
}