/* Keyframe for fade-in effect */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }



 /* Main Blog Layout Container */
 .blog-detail-layout {
     display: grid;
     grid-template-columns: 2.5fr 1fr;
     /* Main content wider than sidebar */
     gap: 40px;
     /* Space between main content and sidebar */
     max-width: 1280px;
     /* Max width for the entire layout */
     margin: 0 auto 50px auto;
     /* Center and add bottom margin */
     flex-grow: 1;
     align-items: flex-start;
     /* Align items to the top */
 }

 /* Main Blog Post Container */
 .blog-post-container {
     background-color: #ffffff;
     border-radius: 18px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
     overflow: hidden;
     animation: fadeIn 0.8s ease-out forwards;
 }

 /* Hero Image */
 .post-hero-image {
     width: 100%;
     height: 400px;
     /* Larger hero image */
     overflow: hidden;
     position: relative;
     border-bottom: 3px solid #d998b6;
     /* Accent border */
 }

 .post-hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* Post Content Area */
 .post-content-wrapper {
     padding: 40px;
     /* More padding for content */
 }

 .post-meta {
     font-size: 0.9em;
     color: #524552;
     margin-bottom: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #ececec;
     padding-bottom: 15px;
 }

 .post-meta span {
     display: inline-block;
 }

 .post-title {
     font-size: 2.8em;
     /* Prominent title */
     color: #352735;
     margin-bottom: 30px;
     line-height: 1.2;
     font-weight: 800;
 }

 .post-body p {
     font-size: 1.1em;
     margin-bottom: 1.5em;
     color: #524552;
 }

 .post-body h2 {
     font-size: 1.8em;
     color: #352735;
     margin-top: 35px;
     margin-bottom: 20px;
     font-weight: 700;
     border-bottom: 2px solid #ececec;
     padding-bottom: 10px;
 }

 .post-body ul {
     list-style: disc;
     margin-left: 25px;
     margin-bottom: 1.5em;
     color: #524552;
 }

 .post-body li {
     margin-bottom: 0.8em;
 }

 .post-body blockquote {
     background-color: #f8f8f8;
     border-left: 5px solid #d998b6;
     /* Accent color for blockquote */
     padding: 20px 25px;
     margin: 30px 0;
     font-style: italic;
     color: #524552;
     font-size: 1.15em;
     border-radius: 5px;
     line-height: 25px;
 }

 /* Back to Blog Button */
 .back-to-blog {
     display: inline-block;
     background: linear-gradient(135deg, #e6b5d9 0%, #d58caf 35%, #da9bb8 70%, #fceff9 100%);
     /* Gradient button */
     color: #fff;
     padding: 12px 25px;
     border-radius: 50px;
     /* Pill-shaped button */
     text-decoration: none;
     font-weight: 700;
     transition: all 0.3s ease;
     margin-top: 30px;
     box-shadow: 0 6px 15px rgba(218, 37, 29, 0.4);
 }

 .back-to-blog:hover {
     background: linear-gradient(45deg, #d58caf, #e6b5d9);
     /* Reverse gradient on hover */
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 10px 20px rgba(218, 37, 29, 0.6);
 }

 /* Sidebar Recent Articles Styling */
 .sidebar-recent-articles {
     background-color: #ffffff;
     border-radius: 18px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
     padding: 30px;
     animation: fadeIn 0.8s ease-out forwards;
     animation-delay: 0.2s;
     /* Slightly delayed animation */
 }

 .sidebar-recent-articles h2 {
     font-size: 1.8em;
     color: #352735;
     margin-bottom: 25px;
     font-weight: 700;
     border-bottom: 2px solid #ececec;
     padding-bottom: 10px;
     text-align: center;
     /* Center the sidebar heading */
 }

 .recent-article-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
     /* Space between recent articles */
 }

 .recent-article-item {
     display: flex;
     align-items: center;
     gap: 15px;
     text-decoration: none;
     color: inherit;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     padding: 10px;
     border-radius: 8px;
     border: 1px solid transparent;
     /* subtle border */
 }

 .recent-article-item:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     border-color: #ececec;
     /* Light border on hover */
 }

 .recent-article-thumb {
     width: 80px;
     height: 60px;
     border-radius: 8px;
     /* Rounded corners for thumbs */
     object-fit: cover;
     flex-shrink: 0;
     /* Prevent shrinking */
 }

 .recent-article-info {
     flex-grow: 1;
 }

 .recent-article-title {
     font-size: 1.1em;
     color: #352735;
     margin-bottom: 5px;
     line-height: 1.4;
     font-weight: 600;
 }

 .recent-article-date {
     font-size: 0.8em;
     color: #524552;
     opacity: 0.8;
     letter-spacing: 0.5px;
 }


 /* Site Info (Footer) Styling */
 .site-info {
     text-align: center;
     margin-top: 60px;
     padding: 25px;
     color: #524552;
     font-size: 0.95em;
     background-color: #ffffff;
     border-radius: 15px;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
     animation: fadeIn 0.8s ease-out forwards;
     animation-delay: 0.5s;
     /* Delay footer animation */
 }

 /* Responsive Design */
 @media (max-width: 992px) {


     .blog-detail-layout {
         grid-template-columns: 1fr;
         /* Stack columns on smaller screens */
         gap: 30px;
     }

     .blog-post-container {
         max-width: 768px;
         /* Constrain max width for main article */
         margin: 0 auto;
         /* Center main article when stacked */
     }

     .sidebar-recent-articles {
         max-width: 768px;
         /* Constrain max width for sidebar when stacked */
         margin: 0 auto;
         /* Center sidebar when stacked */
     }

     .post-hero-image {
         height: auto;
     }

     .post-content-wrapper {
         padding: 30px;
     }

     .post-title {
         font-size: 2.4em;
     }
 }

 @media (max-width: 600px) {
     body {
         padding: 0px;
     }

     .blog-detail-layout {
         margin-bottom: 30px;
         gap: 25px;
     }

     .blog-post-container,
     .sidebar-recent-articles {
         border-radius: 10px;
         /* Smaller radius for mobile */
     }

     .post-hero-image {
         height: auto;
     }

     .post-content-wrapper {
         padding: 20px;
     }

     .post-meta {
         flex-direction: column;
         align-items: flex-start;
         font-size: 0.8em;
         margin-bottom: 15px;
     }

     .post-meta span:first-child {
         margin-bottom: 5px;
     }

     .post-title {
         font-size: 1.8em;
         margin-bottom: 20px;
     }

     .post-body p,
     .post-body li {
         font-size: 1em;
     }

     .post-body h2 {
         font-size: 1.5em;
         margin-top: 25px;
         margin-bottom: 15px;
     }

     .post-body blockquote {
         padding: 15px 20px;
         margin: 20px 0;
         font-size: 1.05em;
     }

     .back-to-blog {
         padding: 10px 20px;
         font-size: 0.9em;
     }

     .sidebar-recent-articles {
         padding: 20px;
     }

     .sidebar-recent-articles h2 {
         font-size: 1.5em;
         margin-bottom: 20px;
     }

     .recent-article-item {
         gap: 10px;
         padding: 8px;
     }

     .recent-article-thumb {
         width: 70px;
         height: 50px;
     }

     .recent-article-title {
         font-size: 1em;
     }

     .recent-article-date {
         font-size: 0.75em;
     }
 }