:root {
			--maroon: #5E1A22;
			--cream: #EDE8DD;
			--dark-maroon: #4a141a;
			--text-color: #2b2b2b;
			--accent-cream: #F5F3ED;
		}
		body {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			background-color: #E2DBD0;
			color: var(--text-color);
			margin: 0;
			padding: 2rem 0;
			line-height: 1.5;
		}
		.courseReg{
			padding: 2px 20px 3px 20px;
			border: thin solid black;
			background:darkred;
			color:white;
			text-align: center;
			text-decoration: none;
			font-weight: 900;
			border-radius: 10px;
			box-shadow: 3px 3px 5px rgba(000,000,000,0.35);
		}
		.courseReg:hover{
			color:darkred;
			background:white;
			
		}
		#job, #circuit {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding: 12px;
		}
		.container {
			max-width: 850px;
			margin: 0 auto;
			background-color: var(--accent-cream);
			box-shadow: 0 8px 24px rgba(0,0,0,0.15);
			overflow: hidden;
		}
		.header {
			background-color: var(--maroon);
			color: white;
			text-align: center;
			padding: 1.5rem 1.5rem 1rem;
		}
		.header h1 {
			margin: 0;
			font-size: 2.4rem;
			font-weight: bold;
			line-height: 1.2;
		}
		.subheader {
			background-color: var(--cream);
			color: var(--maroon);
			text-align: center;
			padding: 0.8rem 1rem;
			font-style: italic;
			font-size: 1.3rem;
			border-bottom: 2px solid var(--maroon);
		}
		.hero-image {
			width: 100%;
			height: 250px;
			background-color: #E2DBD0;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="250"><rect width="100%25" height="250" fill="%23D3CBBB"/><text x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-size="18" fill="%235E1A22" font-family="sans-serif">Image Placeholder (Replace with Judge Panel Image)</text></svg>');
			background-size: cover;
			background-position: center;
		}
		.content-section {
			padding: 1.5rem 2rem;
		}
		.section-title {
			color: var(--maroon);
			font-size: 1.3rem;
			font-weight: bold;
			text-align: center;
			margin-top: 0;
			margin-bottom: 1rem;
		}
		.content-section p {
			margin-top: 0;
			text-align: justify;
			font-size: 1.05rem;
		}
		.banner-title {
			background-color: var(--maroon);
			color: white;
			text-align: center;
			padding: 0.6rem;
			font-size: 1.4rem;
			font-weight: bold;
			margin: 0;
		}
		ul.benefits {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		ul.benefits li {
			position: relative;
			padding-left: 1.5rem;
			margin-bottom: 0.75rem;
			font-size: 1.05rem;
		}
		ul.benefits li::before {
			content: "▶";
			color: var(--maroon);
			position: absolute;
			left: 0;
			top: 0.15rem;
			font-size: 0.8rem;
		}
		ul.benefits li strong {
			color: var(--maroon);
		}
		.registration-container {
			background-color: var(--cream);
			padding: 2rem;
		}
		.registration-form {
			background: white;
			padding: 2rem;
			border-radius: 4px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		}
		.registration-form form {
			display: flex;
			flex-direction: column;
			gap: 1.25rem;
		}
		.row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1.25rem;
		}
		.row-3 {
			display: grid;
			grid-template-columns: 2fr 1fr 1fr;
			gap: 1.25rem;
		}
		.form-group {
			display: flex;
			flex-direction: column;
		}
		label {
			font-weight: bold;
			color: var(--maroon);
			margin-bottom: 0.3rem;
			font-size: 0.95rem;
		}
		input[type="text"],
		input[type="email"],
		select {
			padding: 0.75rem;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-family: inherit;
			font-size: 1rem;
			transition: border-color 0.2s;
			background-color: #fafafa;
			box-sizing: border-box;
			width: 100%;
		}
		input[type="text"]:focus,
		input[type="email"]:focus,
		select:focus {
			border-color: var(--maroon);
			outline: none;
			background-color: #fff;
		}
		select {
			cursor: pointer;
			
		}
		input[type="submit"] {
			background-color: var(--maroon);
			color: white;
			border: none;
			padding: 1.2rem;
			font-size: 1.2rem;
			border-radius: 4px;
			cursor: pointer;
			font-weight: bold;
			transition: background-color 0.3s;
			margin-top: 0.5rem;
			width: 100%;
		}
		input[type="submit"]:hover {
			background-color: var(--dark-maroon);
		}
		.success-message {
			background: white;
			padding: 2rem;
			border-radius: 4px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.05);
			border-top: 4px solid var(--maroon);
			font-size: 1.05rem;
		}
		@media (max-width: 650px) {
			.row, .row-3 {
				grid-template-columns: 1fr;
			}
			body {
				padding: 0;
			}
			.container {
				border-radius: 0;
			}
		}