.hero {
    background: linear-gradient(135deg, #005495, #0b6cb8);
    color: white;
    padding: 10px 30px 35px;
    text-align: center;
    border-bottom: 4px solid #003b69;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.hero h1 {
    color: white;
    margin-bottom: 10px;
}

.hero p {
    max-width: 900px;
    margin: 0 auto 20px auto;
    opacity: 0.95;
}

/* THIS is the key: restores the "boxed image" look */
.hero-image {
    max-width: 1000px;
    margin: 20px auto 0 auto;
    padding: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
.hero-description {
    max-width: 1200px;
    margin: 20px auto 28px auto; /* added bottom spacing before TOC */
    padding: 0 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    text-align: left;
}
	/* Main page width */
.content { 
	max-width: 1200px; 
	margin: auto; 
}
	/* Table of contents sections */
.toc-section { 
	background: white; 
	border-left: 5px solid #005495; 
	padding: 20px 28px; margin-bottom: 
	28px; 
	border-radius: 6px; 
	box-shadow: 0 1px 5px rgba(0,0,0,0.08); 
}
	/* Section headings */
.toc-section h2 { 
	margin-top: 0; 
	padding-bottom: 8px; 
	border-bottom: 1px solid #d8d8d8; 
}
	/* Flexible column layout */
.toc-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
	gap: 30px; 
}
	/* Subcategory headings */
.toc-column h3 { 
	margin-bottom: 10px; 
	border-left: 3px solid #005495; 
	padding-left: 10px; 
}
	/* Cleaner lists */
.toc-column ul { 
	margin: 0; 
	padding-left: 18px; 
}
.toc-column li { 
	margin-bottom: 6px; 
}
	/* Link hover effect */
.toc-column a { 
	transition: color 0.15s ease; 
}
.toc-column a:hover { 
	color: #0b6cb8; 
}
	/* Better spacing on mobile */ 
@media only screen and (max-width:768px)
	{ .hero { padding: 35px 15px 25px; }
	.toc-section { padding: 18px; }
	.toc-grid { gap: 15px; } }