:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffd65a;
	--green: #4f702d;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #868e96;
	--gray-dark: #343a40;
	--primary: #4f702d;
	--secondary: #868e96;
	--success: #4f702d;
	--info: #17a2b8;
	--warning: #ffd65a;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--gray-100: #f8f9fa;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #868e96;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: "HK Grotesk", sans-serif;
	--font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}


/* Container for the cards to sit side by side without breaking header/footer */
.product-section-wrapper {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	padding: 60px 20px;
	/* Spacing above and below the section */
	background-color: #ffffff;
}

/* Container for each product block */
.product-cards {
	background-color: var(--gray-200);
	padding: 40px;
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 500px;
	border-radius: 4px;
	position: relative;
	box-sizing: border-box;
}

/* Image Container Styling */
.image-container {
	position: relative;
	margin-right: 30px;
	flex-shrink: 0;
}

.circle-img {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 4px solid var(--primary);
	overflow: hidden;
	background-color: #ddd;
}

.circle-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The decorative orange slash/line icon */
.image-container::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -15px;
	width: 40px;
	height: 40px;
	border-left: 4px solid var(--primary);
	border-top: 4px solid var(--primary);
	border-radius: 50% 0 0 0;
	transform: rotate(-15deg);
}

/* Text Styling */
.content-container {
	flex-grow: 1;
}

.product-title {
	color: var(--primary-orange);
	font-size: 22px;
	margin: 0 0 15px 0;
	font-weight: bold;
	text-align: left;
}

.product-list {
	list-style-type: square;
	padding-left: 20px;
	margin: 0;
}

.product-list li {
	font-size: 15px;
	color: #333;
	margin-bottom: 8px;
	line-height: 1.4;
	text-align: left;
}

/* Responsive design */
@media (max-width: 768px) {
	.product-section-wrapper {
		gap: 20px;
		padding: 40px 10px;
	}

	.product-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 30px 20px;
	}

	.image-container {
		margin-right: 0;
		margin-bottom: 20px;
	}

	.product-title {
		text-align: center;
	}
}

 /* Table of C ontent */
.toc-wrapper {
    background: #f9f9f9;
    border-left: 4px solid #4f702d;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 6px;
}

.toc-wrapper h3 {
    margin-bottom: 15px;
    color: #4f702d;
    font-size: 20px;
    border-bottom: 15px;
    padding-bottom: 8px;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 30px;
}

.toc-list li {
    margin-bottom: 10px;
}

.toc-list li a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    transition: 0.3s;
}

.toc-list li a:hover {
    color: #4f702d;
    padding-left: 5px;
}

 .toc-image{
    margin-bottom: 25px;
}
.toc-img{
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}