/* Add scroll-margin-top to headings for anchor offset */
			h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
				scroll-margin-top: 70px;
			}
			body { background: #f8f9fa; margin: 0; padding: 0; }
			.main-container {
				max-width: 1400px;
				margin: 0 auto;
				padding: 0 2rem;
				background: #fff;
				box-shadow: 0 2px 16px #0001;
				border-radius: 0 0 8px 8px;
				min-height: 90vh;
			}
			.top-nav {
				width: 100%;
				background: #fff;
				box-shadow: 0 2px 8px #0001;
				padding: 0.7rem 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: sticky;
				top: 0;
				left: 0;
				z-index: 20;
				margin: 0;
				border-radius: 0;
			}
			.top-nav-inner {
				width: 100%;
				max-width: none;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0.7rem;
				box-sizing: border-box;
			}
			.nav-links { display: flex; gap: 1.5rem; }
			.nav-link { color: #007bff; text-decoration: none; font-weight: 500; }
			.nav-link:hover { color: #0056b3; text-decoration: underline; }
			.nav-toggle, .leftnav-toggle { display: none; background: none; border: none; font-size: 1.7rem; cursor: pointer; }
			.blog-layout {
				display: flex;
				width: 100%;
				background: transparent;
				min-height: 80vh;
			}
			.left-panel, .side-panel {
				min-width: 200px;
				max-width: 260px;
				background: #f4f6fa;
				border-right: 1px solid #e0e0e0;
				min-height: 100vh;
				padding: 2rem 1.2rem;
			}
			.left-panel {
				flex: 0 0 220px;
				transition: left 0.3s;
			}
			.left-panel-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; }
			.left-panel-list { list-style: none; padding: 0; margin: 0; }
			.left-panel-list li { margin-bottom: 0.75rem; }
			.left-panel-list a { color: #495057; text-decoration: none; font-weight: 500; transition: color 0.2s; }
			.left-panel-list a:hover, .left-panel-list .active { color: #007bff; text-decoration: underline; }
			.blog-main {
				flex: 1 1 700px;
				background: #fff;
				padding: 2.5rem 3rem;
				min-width: 0;
				border-right: 1px solid #e0e0e0;
				border-left: 1px solid #e0e0e0;
			}
			.side-panel {
				flex: 0 0 220px;
				transition: right 0.3s;
			}
			.side-panel-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; }
			.side-panel-list { list-style: none; padding: 0; margin: 0; }
			.side-panel-list li { margin-bottom: 0.75rem; }
			.side-panel-list a { color: #007bff; text-decoration: none; font-weight: 500; transition: color 0.2s; }
			.side-panel-list a:hover, .side-panel-list .active { color: #0056b3; text-decoration: underline; }
			.blog-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
			.blog-meta { color: #6c757d; font-size: 1rem; margin-bottom: 2rem; }
			.blog-section { margin-bottom: 2rem; }
			/* Responsive styles */
			@media (max-width: 1100px) {
				.top-nav-inner, .blog-layout { max-width: 100vw; }
			}
			@media (max-width: 900px) {
				.blog-layout { flex-direction: column; min-height: unset; border-radius: 0; box-shadow: none; width: 100%; box-sizing: border-box; }
				.blog-main { padding: 1.2rem 0.7rem; border-right: none; border-left: none; }
				.side-panel { display: none; }
				.left-panel { position: fixed; left: -260px; top: 0; height: 100vh; background: #fff; box-shadow: 2px 0 8px #0002; z-index: 30; transition: left 0.3s; border-radius: 0 0.5rem 0.5rem 0; border-right: 1px solid #e0e0e0; }
				.left-panel.open { left: 0; }
				.leftnav-toggle { display: block !important; margin-right: 1rem; }
				.nav-links { display: none; }
				.nav-links.mobile-show { display: flex !important; flex-direction: column; gap: 0.7rem; position: absolute; top: 3.2rem; right: 2rem; background: #fff; box-shadow: 0 2px 8px #0002; padding: 1rem 1.5rem; border-radius: 0.5rem; }
			}

				   .footer {
					   width: 100%;
					   background: #f8f9fa;
					   border-top: 1px solid #e0e0e0;
					   padding: 1.2rem 0 1.2rem 0;
					   margin-top: 0;
					   position: relative;
					   z-index: 10;
				   }
				   .footer-inner {
					   max-width: 100%;
					   margin: 0 auto;
					   padding: 0 2rem;
					   display: flex;
					   flex-wrap: wrap;
					   align-items: center;
					   justify-content: space-between;
					   gap: 1.5rem;
				   }
				.footer-brand {
					font-weight: 700;
					font-size: 1.1rem;
					color: #007bff;
				}
				.footer-copyright {
					color: #6c757d;
					font-size: 0.98rem;
				}
				.footer-links {
					display: flex;
					gap: 1.2rem;
				}
				.footer-links a {
					color: #007bff;
					text-decoration: none;
					font-weight: 500;
					transition: color 0.2s;
				}
				.footer-links a:hover {
					color: #0056b3;
					text-decoration: underline;
				}
				   @media (max-width: 900px) {
					   .footer-inner {
						   flex-direction: column;
						   align-items: flex-start;
						   gap: 0.7rem;
						   padding: 0 0.7rem;
					   }
					   .footer-links {
						   gap: 0.7rem;
					   }
					   .footer {
						   padding: 1.2rem 0 0.7rem 0;
					   }
				   }
			
				/**additional Linkx button*/

				.add_ref {
				display: flex;
				flex-wrap: wrap;
				}

				.add_ref a {
				text-decoration: none;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				}

				.add_btn {
				min-width: 300px;
				max-width: 300px;
				display: flex;
				border-radius: 10px;
				border-style: solid;
				border-width: 1px;
				padding: 10px 10px;
				border-color: #dddddd;
				}

				.add_icon {
				width: 64px;
				height: 64px;
				}
				.add_title {
				font-size: 18px;
				font-weight: bold;
				color: #444;
				margin-left: 10px;
				}
				.add_description {
				font-size: 16px;
				color: #555;
				margin-left: 10px;
				}



.note {
	padding-top: 10px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #dddddd;
  margin-left: 5px;
  margin-right: 5px;
  /*background-color: #f1c40f36;*/
}


.yellow {
  background-color: #fcf3cf;
}
.green {
  background-color: #d5f5e3;
}

.blue {
  background-color: #d6eaf8;
}

.title {
  font-size: 14px;
  color: #333;
  margin-left: 10px;
  font-weight: bold;
}

.details {
  font-size: 14px;
  color: #333;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 150%;
  text-align: justify;
  text-justify: inter-word;
}