/* --- Headings and Titles --- */
			h1, h2, h3, h4, h5, h6,
			.logo, 
			#nav a,
			.post .major > span,
			.button {
				font-family: 'Montserrat', sans-serif;
			}

			/* --- Main Body Text --- */
			p, 
			article p,
			.post p,
			#main p {
				font-family: 'Montserrat', sans-serif !important;
				font-weight: 400;
			}
			
			article.post p {
				font-size: 1.2em !important;
				line-height: 1.7 !important;
			}

			/* --- Custom Colors --- */
			#header .logo, #intro h1 {
				color: #FFC107;
			}

			p strong, .stats-highlight strong {
				color: #FFC107;
				font-weight: 400; /* Overrides default bolding for a highlight effect */
			}

			/* --- Translucent Background Effect --- */
			.post,
			section.posts article {
				background-color: rgba(18, 22, 25, 0.85);
			}

			#main {
				background-color: transparent;
			}

			/* --- Fix Text Color on Translucent Backgrounds --- */
			.post,
			section.posts article {
				color: rgba(255, 255, 255, 0.9);
			}
			.post h2 a, .post h3 a,
			section.posts article h2 a {
				color: #ffffff;
			}
			/* This rule fixes the heading colors on the About page */
			.post h1, .post h2, .post h3, .post h4, .post h5, .post h6 {
				color: #ffffff;
			}
			
			/* --- Button Styles --- */
			.post .button, 
			section.posts article .button {
				color: #FFC107 !important;
				border-color: #FFC107 !important;
				background-color: transparent !important;
			}

			.post .button:hover, 
			section.posts article .button:hover {
				background-color: #FFC107 !important;
				color: #121919 !important;
			}

			/* FIX: Prevents dropdown links from changing color when parent is active */
			#nav ul.links li.active > .submenu a {
				color: #ffffff !important;
			}

			/* --- Minimal Footer Design --- */
			#footer {
				background-color: #0a0c0f;
				border-top: 1px solid rgba(255, 193, 7, 0.3);
				margin-top: 4rem;
				padding: 0;
			}

			#footer .minimal-footer {
				padding: 2rem 0;
			}

			#footer .footer-content {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 3rem;
				flex-wrap: wrap;
			}

			#footer .footer-item {
				display: flex;
				align-items: center;
				gap: 0.75rem;
				color: rgba(255, 255, 255, 0.6);
				font-size: 0.9rem;
			}

			#footer .footer-item i {
				color: #FFC107;
				font-size: 1.1rem;
			}

			#footer .footer-item a {
				color: rgba(255, 255, 255, 0.6);
				border: none;
				transition: color 0.3s ease;
			}

			#footer .footer-item a:hover {
				color: #FFC107 !important;
			}

			/* Mobile responsiveness */
			@media screen and (max-width: 736px) {
				#footer .footer-content {
					flex-direction: column;
					gap: 1.5rem;
				}
			}

			/* --- Stats Section --- */
			.stats-container {
				display: flex;
				justify-content: space-around;
				text-align: center;
				margin: 3rem 0;
				flex-wrap: wrap;
			}
			.stat-item {
				flex: 1;
				min-width: 150px;
				padding: 1rem;
			}
			.stat-item .number {
				font-size: 3em;
				font-weight: 700;
				color: #FFC107;
				line-height: 1.1;
			}
			.stat-item .label {
				font-size: 1.1em;
				text-transform: uppercase;
				letter-spacing: 0.075em;
				margin-top: 0.5rem;
				color: rgba(255, 255, 255, 0.7);
			}

			/* --- Testimonials Section --- */
			.testimonials-section {
				padding-top: 2rem;
				border-top: 2px solid rgba(255, 255, 255, 0.15);
				margin-top: 4rem;
			}

			.testimonials-container {
				display: grid;
				grid-template-columns: 1fr 1fr; /* Two columns */
				gap: 2em;
				margin-top: 2rem;
			}

			.testimonial-card {
				background-color: rgba(30, 37, 45, 0.5); /* Slightly different background */
				padding: 2em;
				border-radius: 4px;
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			.testimonial-card p {
				font-size: 1.1em !important; /* Slightly smaller for quotes */
				font-style: italic;
				margin-bottom: 1.5em;
				text-align: left;
			}

			.testimonial-card .author {
				font-weight: 700;
				text-align: right;
				font-style: normal;
				color: #FFC107;
			}

			.testimonial-card .author span {
				display: block;
				font-weight: 400;
				font-size: 0.9em;
				color: rgba(255, 255, 255, 0.6);
				margin-top: 0.25em;
			}
			
			/* --- Star Rating in Testimonials --- */
			.testimonial-card .stars {
				margin-bottom: 1em;
				color: #FFC107; /* Your brand's gold color */
				font-size: 1.1em;
			}

			.testimonial-card .stars .fa-star {
				margin-right: 0.15em;
			}

			/* Responsive behavior for mobile */
			@media screen and (max-width: 736px) {
				.testimonials-container {
					grid-template-columns: 1fr; /* Stack to a single column */
				}
			}
			
			/* Adds space above the final button on the page */
			article.post > .actions.special {
				margin-top: 4rem;
			}

			/* Reduces the main page title size for better balance */
			article.post header.major h2,h1 {
				font-size: 3.5em !important; /* Reduced from the template's default */
				line-height: 1.2;
			}

			/* --- DEFINITIVE HOVER-BASED DROPDOWN MENU --- */

			/* --- Core Nav Bar Fixes --- */
			#nav ul.links > li > a {
				border-bottom: none !important;
			}
			#nav {
				overflow: visible !important;
				z-index: 1000 !important;
			}

			/* --- Dropdown Structure & Behavior --- */
			#nav ul.links li {
				position: relative;
			}
			#nav ul.links .submenu {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				background-color: #1a2025;
				border: 1px solid rgba(255, 193, 7, 0.2);
				box-shadow: 0 10px 25px rgba(0,0,0,0.7);
				min-width: 280px;
				padding: 0;
				list-style: none;
				border-radius: 0 0 4px 4px;
			}
			#nav ul.links li:hover > .submenu {
				display: block;
			}

			/* --- Second-Level (Grades) Submenu --- */
			#nav ul.links .submenu .submenu {
				top: -1px;
				left: 100%;
				border-radius: 0 4px 4px 0;
			}

			/* --- Dropdown Item Styling & Dividers --- */
			#nav ul.links .submenu a {
				padding: 0.5em 1.5em;
				display: block;
				white-space: nowrap;
				font-size: 0.9em !important;
				border: none !important;
				border-top: 1px solid rgba(255, 193, 7, 0.3) !important;
			}
			#nav ul.links .submenu li:first-child > a {
				border-top: none;
			}

			/* --- Hover & Active States --- */
			/* This creates the gold highlight effect on hover */
			#nav ul.links .submenu a:hover {
				background-color: rgba(255, 193, 7, 0.1) !important;
				color: #FFC107 !important;
			}

			/* FIX: This section corrects the .active state behavior */
			/* Step 1: Remove the white background from the active list item container */
			#nav ul.links li.active {
				background-color: transparent !important;
			}
			/* Step 2: Apply the white background ONLY to the direct link of the active tab */
			#nav ul.links li.active > a {
				background-color: #ffffff !important;
				color: #1e252d !important; /* Make text dark on white background */
			}
			/* Step 3: Ensure the hover effect still works correctly on the active tab */
			#nav ul.links li.active:hover > a {
				background-color: rgba(255, 255, 255, 0.1) !important;
				color: #ffffff !important; /* Make text white again on dark hover */
			}

			/* --- Dropdown Arrows --- */
			#nav ul.links > li.dropdown > a:after {
				content: '\f107';
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
				margin-left: 0.75em;
			}
			#nav ul.links .submenu li.dropdown > a:after {
				content: '\f105';
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
				position: absolute;
				right: 1em;
				top: 50%;
				transform: translateY(-50%);
			}
			#nav ul.links .submenu li.dropdown > a {
				padding-right: 3em !important;
			}

			/* --- Page Overlay for Dropdown --- */
			#page-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.7);
				z-index: 999;
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.3s ease, visibility 0.3s ease;
				pointer-events: none;
			}
			body.is-menu-open #page-overlay {
				opacity: 1;
				visibility: visible;
			}

			/* --- Styling for the new logo-text div in the intro --- */
			#intro .logo-text {
				font-family: 'Montserrat', sans-serif;
				font-weight: 700; /* Bold */
				line-height: 1.5;
				font-size: 3.5em; /* Adjust if it looks too large or small */
				color: #FFC107; /* Brand gold color */
				margin-bottom: 0.5em; /* Spacing below the text */
			}

			/* --- Credibility Banner --- */
			#credibility-banner {
				background-color: #121619; /* A slightly darker shade */
				border-bottom: 1px solid rgba(255, 193, 7, 0.3);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0.75em 1em;
				gap: 3em; /* Space between items */
				text-align: center;
				flex-wrap: wrap; /* Allows items to stack on mobile */
				
			}

			.banner-item {
				display: flex;
				align-items: center;
				gap: 0.75em; /* Space between icon and text */
				color: rgba(255, 255, 255, 0.8);
				font-size: 0.9em;
				font-family: 'Montserrat', sans-serif;
			}

			.banner-item i {
				color: #FFC107; /* Brand gold for icons */
				font-size: 1.2em;
			}

			.banner-item strong {
				font-weight: 700;
				color: #ffffff;
			}

			/* Mobile responsiveness for the banner */
			@media screen and (max-width: 736px) {
				#credibility-banner {
					flex-direction: column;
					gap: 1em;
					padding: 1em;
					margin-bottom: 2em; /* Adjusted margin for mobile */
				}
			}

			/* --- Category Grid Section --- */
			.category-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive grid */
				gap: 2em;
				margin-top: 3rem;
			}
			.category-card {
				background-color: rgba(30, 37, 45, 0.5);
				padding: 2em;
				border-radius: 4px;
				border: 1px solid rgba(255, 255, 255, 0.1);
				display: flex;
				flex-direction: column;
			}
			.category-card h3 {
				margin-bottom: 0.5em;
				color: #FFC107;
				font-size: 1.6em;
			}
			.category-card p {
				font-size: 1.1em !important;
				line-height: 1.6 !important;
				flex-grow: 1; /* Makes description text grow */
			}
			.category-card .actions {
				margin-top: 1.5em;
			}
			
			/* --- Grades List in Category Card --- */
			.category-card .grades-list {
				font-size: 1.1em !important; /* Matched to description font size */
				line-height: 1.5 !important;
				margin-top: 1.5em;
				color: rgba(255, 255, 255, 0.8);
			}
			.category-card .grades-list strong {
				color: #FFC107;
				font-weight: 700; /* Make this part bold */
			}

			/* --- Grade Grid Section --- */
			.grade-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
				gap: 2em;
				margin-top: 2rem;
				margin-bottom: 3rem;
			}
			.grade-card {
				background-color: rgba(30, 37, 45, 0.5);
				padding: 1.5em;
				border-radius: 4px;
				border: 1px solid rgba(255, 255, 255, 0.1);
				transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
			}
			.grade-card:hover {
				transform: translateY(-5px);
				box-shadow: 0 10px 20px rgba(0,0,0,0.2);
			}
			.grade-card h4 {
				margin-bottom: 0.5em;
				color: #FFC107;
				font-size: 1.5em;
				font-weight: 700;
			}
			.grade-card p {
				font-size: 1.1em !important;
				line-height: 1.6 !important;
				margin-bottom: 0;
			}
			.grade-card a {
				text-decoration: none;
				border: none;
				color: inherit;
				display: block;
			}
			
			/* --- Core Characteristics Section --- */
			.characteristics-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
				gap: 2em;
				text-align: center;
				margin: 3rem 0;
				padding: 2rem 0;
				border-top: 2px solid rgba(255, 255, 255, 0.15);
				border-bottom: 2px solid rgba(255, 255, 255, 0.15);
			}
			.characteristic-item i {
				font-size: 2.5em;
				color: #FFC107;
				margin-bottom: 0.5em;
			}
			.characteristic-item h5 {
				font-size: 1.2em;
				text-transform: uppercase;
				letter-spacing: 0.075em;
				color: #ffffff;
			}

			/* --- Usage Image Grid --- */
			.usage-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 1.5em;
				margin: 3rem 0;
			}
			.usage-grid .image-container {
				position: relative;
				overflow: hidden;
				border-radius: 4px;
			}
			.usage-grid img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.3s ease;
			}
			.usage-grid .image-container:hover img {
				transform: scale(1.05);
			}
			.usage-grid .caption {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
				color: #ffffff;
				padding: 1.5em 1em 1em 1em;
				font-weight: 700;
				text-align: center;
				font-size: 1em;
				transition: opacity 0.3s ease;
			}
			
			/* --- Responsive Adjustments --- */
			@media screen and (max-width: 980px) { .usage-grid { grid-template-columns: repeat(2, 1fr); } }
			@media screen and (max-width: 480px) { .usage-grid { grid-template-columns: 1fr; } }


			/* --- Final Grid Layout & Image Sizing Override --- */
			/* This turns the container into a modern CSS Grid */
			section.posts {
				display: grid;
				grid-template-columns: repeat(2, 1fr); /* Create 2 equal columns */
				gap: 2em; /* This is the space between the boxes */
			}

			/* This makes each box use Flexbox to align content vertically */
			section.posts article {
				display: flex;
				flex-direction: column;
			}
			
			/* This makes the text area grow, forcing all boxes to the same height */
			section.posts article p {
				flex-grow: 1;
			}

			/* This forces the image container to a 16:9 aspect ratio */
			section.posts article .image.fit {
				display: block;
				width: 100%;
				aspect-ratio: 16 / 9;
				overflow: hidden;
			}
			
			/* This makes the image fill that container, cropping as needed */
			section.posts article .image.fit img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			/* This ensures the grid stacks into a single column on mobile */
			@media screen and (max-width: 736px) {
				section.posts {
					grid-template-columns: 1fr;
				}
			}

			

		/* --- FINAL COMPACT Contact Page Styles --- */

		.contact-details-container {
			max-width: 850px; /* Widened to accommodate two columns */
			margin: 3em auto 0 auto;
		}

		/* This is the new grid for the contact info */
		.info-grid {
			display: grid;
			grid-template-columns: 1fr 1fr; /* Two equal columns */
			gap: 2em 14em; /* Row gap and Column gap */
			margin-bottom: 3em;
		}

		.contact-details-container .info-item {
			display: flex;
			align-items: center;
			gap: 1.5em;
		}

		.contact-details-container .info-item i.fas {
			font-family: 'Font Awesome 5 Free';
			font-weight: 900;
			color: #FFC107;
			font-size: 1.5em;
			width: 30px;
			text-align: center;
		}

		.contact-details-container .info-item p {
			font-family: 'Roboto', sans-serif !important;
			margin: 0 !important;
			font-size: 1.1em !important;
			line-height: 1.7;
		}

		.contact-details-container .info-item a {
			color: #FFC107;
			border-bottom: 1px dotted rgba(255, 193, 7, 0.5);
			transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		}

		.contact-details-container .info-item a:hover {
			color: #ffffff;
			border-bottom-color: #ffffff;
		}

		.contact-details-container .map-container {
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 4px;
			overflow: hidden;
		}

		/* IMPORTANT: This makes the grid stack into a single column on mobile */
		@media screen and (max-width: 736px) {
			.info-grid {
				grid-template-columns: 1fr;
			}
		}

		/* This selector is stronger and will override the default styles */
		#main .post .characteristic-item p {
			font-family: 'Roboto', sans-serif !important; /* Added !important for safety */
			font-size: .95em !important;
			line-height: 1.5 !important;
			color: rgba(255, 255, 255, 0.7) !important;
			margin-top: 0.75em !important;
			font-style: normal !important; /* Ensures text is not italic */
		}

		/* --- Styling for the new Page Subtitle --- */
		.page-subtitle {
			font-family: 'Montserrat', sans-serif !important;
			font-size: 1.5em !important; /* Larger than normal text */
			line-height: 1.5 !important;
			font-weight: 700 !important; /* Bold */
			color: #FFC107 !important;   /* Brand Gold */
			text-transform: none !important; /* Ensures it's not all caps */
			margin-top: -1em;  /* Pulls it closer to the main title */
			margin-bottom: 2em;
			
		}

		/* --- SOFTER LIGHT THEME for Technical Specification Tables --- */

		.table-wrapper {
			margin-bottom: 2em;
		}
		.spec-table {
			width: 100%;
			text-align: left;
			border-collapse: collapse;
			background-color: rgba(255, 255, 255, 0.7); /* NEW: Soft, light cool-grey background */
			border-radius: 4px;
			overflow: hidden;
			border: 1px solid #d1d8de; /* A subtle border around the whole table */
		}

		/* Base style for all table cells */
		.spec-table th, 
		.spec-table td {
			color: #212931; /* Strong, dark text for high readability */
			padding: 0.85em 1.25em;
			border-bottom: 1px solid #d1d8de; /* A visible but soft border */
		}

		/* Header row style */
		.spec-table thead th {
			background-color: #1b1b1b; /* A slightly darker grey for the header */
			font-family: 'Montserrat',sans-serif !important;
			font-weight: 600 !important;
			text-transform: uppercase;
			font-size: 1em;
			letter-spacing: 0.05em;
			color: #f3f3f3;
			border-bottom-width: 2px; /* A stronger border under the header */
		}

		/* A subtle stripe for long tables */
		.spec-table tbody tr:nth-child(even) {
			background-color: rgb(190, 190, 190);
		}
		.spec-table tbody tr:nth-child(odd) {
			background-color: rgba(214, 214, 214, 0.88);
		}


		/* First column style */
		.spec-table td:first-child {
			font-weight: 700;
			color: #121619;
		}

		/* Ensure bold text within cells is also dark */
		.spec-table td strong {
			color: inherit;
		}

		/* Remove the border from the very last row for a cleaner finish */
		.spec-table tbody tr:last-child td {
			border-bottom: none;
		}

		/* --- FAQ Section Styles --- */
		.faq-section {
			margin: 2em 0;
		}
		.faq-item {
			margin-bottom: 2em;
			border-left: 3px solid #FFC107; /* Brand Gold accent */
			padding-left: 1.5em;
		}
		.faq-question {
			font-family: 'Montserrat', sans-serif !important;
			font-weight: 600 !important;
			color: rgba(255, 255, 255, 0.9) !important; /* From our readability system */
			font-size: 1em !important;
			margin-bottom: 0.5em !important;
			text-transform: none !important; /* Normal sentence case */
			letter-spacing: 0 !important;
		}

		/* This is the corrected, more specific selector for the FAQ answers */
		#main .post p.faq-answer {
			font-family: 'Montserrat', sans-serif !important;
			color: rgba(255, 255, 255, 0.75) !important;
			text-align: justify !important;
			font-size: 1em !important; /* Corrected from .1em to 1em */
			margin-bottom: 0 !important;
			line-height: 1.6 !important; /* Added for consistent spacing */
		}


		/* --- Upgraded Similar Grades Section --- */
		.similar-grades {
			text-align: center;
			margin: 2em 0 1em 0;
			padding: 2em; /* Added padding for better spacing */
			border-top: 1px solid rgba(255, 255, 255, 0.15);
			border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Added bottom border */
			
		}
		.similar-grades h4 {
			font-size: 1em;
			font-family: 'Montserrat', sans-serif;
			color: rgba(255, 255, 255, 0.9);
			margin-bottom: 1.5em; /* Increased spacing */
		}
		.similar-grades .grade-buttons {
			margin-bottom: 1.5em;
		}
		.similar-grades .grade-buttons .button {
			margin: 0 0.5em 0.5em 0.5em;
		}
		.similar-grades .also-known {
			font-family: 'Roboto', sans-serif !important;
			font-size: 0.9em !important;
			color: rgba(255, 255, 255, 0.6) !important;
			font-style: italic;
			margin-bottom: 0 !important;
		}