:root {
			--primary-color: #28a745;
			--secondary-color: #20c997;
			--accent-color: #ffc107;
			--text-dark: #2c3e50;
			--bg-light: #f8f9fa;
			--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			--border-radius: 12px;
		}
		
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		body {
			font-family: 'Poppins', sans-serif;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			min-height: 100vh;
			color: var(--text-dark);
		}
		
		.main-container {
			background: white;
			border-radius: var(--border-radius);
			box-shadow: var(--shadow);
			overflow: hidden;
			margin: 2rem auto;
			max-width: 1000px;
		}
		
		.header-section {
			background: 
				linear-gradient(135deg, rgb(155 74 226 / 86%), rgb(80 227 194 / 84%)),
				url('../images/mental-health.jpeg');
			background-size: cover;
			/* background-position: center center; */
			background-repeat: no-repeat;
			color: white;
			padding: 2rem;
			text-align: center;
			position: relative;
			overflow: hidden;
		}

		.header-section::before {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
			animation: float 20s infinite linear;
			z-index: 1;
		}

		.header-section > * {
			position: relative;
			z-index: 2;
		}
		
		@keyframes float {
			0% { transform: translateX(-50px) translateY(-50px); }
			100% { transform: translateX(50px) translateY(50px); }
		}
		
		.header-section h1 {
			font-size: 2.5rem;
			font-weight: 700;
			margin-bottom: 0.5rem;
			position: relative;
			z-index: 1;
		}
		
		.header-section .subtitle {
			font-size: 1.2rem;
			margin-bottom: 1rem;
			position: relative;
			z-index: 1;
		}
		
		.event-info {
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(10px);
			border-radius: var(--border-radius);
			padding: 1.5rem;
			margin-top: 1rem;
			position: relative;
			z-index: 1;
		}
		
		.event-info table {
			width: 100%;
			color: white;
		}
		
		.event-info table td {
			padding: 0.5rem;
			border: none;
		}
		
		.form-section {
			padding: 2rem;
		}
		
		.form-card {
			background: var(--bg-light);
			border-radius: var(--border-radius);
			padding: 2rem;
			margin-bottom: 2rem;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		}
		
		.form-card h3 {
			color: var(--primary-color);
			margin-bottom: 1.5rem;
			font-weight: 600;
		}
		
		.form-group {
			margin-bottom: 1.5rem;
		}
		
		.form-label {
			font-weight: 500;
			color: var(--text-dark);
			margin-bottom: 0.5rem;
		}
		
		.form-control, .form-select {
			border: 2px solid #e9ecef;
			border-radius: 8px;
			padding: 0.75rem;
			transition: all 0.3s ease;
		}
		
		.form-control:focus, .form-select:focus {
			border-color: var(--primary-color);
			box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
		}
		
		.radio-group {
			display: flex;
			gap: 2rem;
			flex-wrap: wrap;
		}
		
		.radio-option {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 1rem;
			background: white;
			border: 2px solid #e9ecef;
			border-radius: var(--border-radius);
			cursor: pointer;
			transition: all 0.3s ease;
			flex: 1;
			min-width: 200px;
		}
		
		.radio-option:hover {
			border-color: var(--primary-color);
			background: rgba(40, 167, 69, 0.05);
		}
		
		.radio-option input[type="radio"]:checked + .radio-label {
			color: var(--primary-color);
			font-weight: 600;
		}
		
		.radio-option input[type="radio"]:checked ~ .radio-option {
			border-color: var(--primary-color);
			background: rgba(40, 167, 69, 0.1);
		}
		
		.dynamic-table {
			background: white;
			border-radius: var(--border-radius);
			overflow: hidden;
			box-shadow: var(--shadow);
		}
		
		.dynamic-table thead {
			background: var(--primary-color);
			color: white;
		}
		
		.dynamic-table th, .dynamic-table td {
			padding: 1rem;
			text-align: left;
			border-bottom: 1px solid #e9ecef;
		}
		
		.btn-primary {
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			border: none;
			border-radius: 8px;
			padding: 0.75rem 2rem;
			font-weight: 500;
			transition: all 0.3s ease;
		}
		
		.btn-primary:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
		}
		
		.btn-outline-primary {
			border: 2px solid var(--primary-color);
			color: var(--primary-color);
			border-radius: 8px;
			padding: 0.5rem 1rem;
			font-weight: 500;
			transition: all 0.3s ease;
		}
		
		.btn-outline-primary:hover {
			background: var(--primary-color);
			color: white;
		}
		
		.btn-danger {
			background: #dc3545;
			border: none;
			border-radius: 8px;
			padding: 0.5rem 1rem;
			font-weight: 500;
		}
		
		.error-message {
			color: #dc3545;
			font-size: 0.875rem;
			margin-top: 0.25rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}
		
		.success-message {
			background: rgba(40, 167, 69, 0.1);
			color: var(--primary-color);
			border: 1px solid var(--primary-color);
			border-radius: var(--border-radius);
			padding: 1rem;
			margin-bottom: 1rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}
		
		.alert-message {
			background: rgba(255, 193, 7, 0.1);
			color: #856404;
			border: 1px solid #ffc107;
			border-radius: var(--border-radius);
			padding: 1rem;
			margin-bottom: 1rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}
		
		.error-alert {
			background: rgba(220, 53, 69, 0.1);
			color: #721c24;
			border: 1px solid #dc3545;
			border-radius: var(--border-radius);
			padding: 1rem;
			margin-bottom: 1rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}
		
		.payment-info {
			background: rgba(255, 193, 7, 0.1);
			border: 1px solid var(--accent-color);
			border-radius: var(--border-radius);
			padding: 1.5rem;
			margin: 1rem 0;
		}
		
		.payment-info h4 {
			color: #856404;
			margin-bottom: 1rem;
		}
		
		.payment-table {
			background: white;
			border-radius: 8px;
			overflow: hidden;
		}
		
		.payment-table td {
			padding: 0.75rem;
			border-bottom: 1px solid #e9ecef;
		}
		
		.size-guide {
			text-align: center;
			margin: 1rem 0;
		}
		
		.size-guide img {
			border-radius: var(--border-radius);
			box-shadow: var(--shadow);
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.size-guide img:hover {
			transform: scale(1.05);
		}
		
		.file-upload {
			position: relative;
			display: inline-block;
			width: 100%;
		}
		
		.file-upload input[type="file"] {
			position: absolute;
			opacity: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
		
		.file-upload-label {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 1rem;
			background: white;
			border: 2px dashed #e9ecef;
			border-radius: var(--border-radius);
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.file-upload-label:hover {
			border-color: var(--primary-color);
			background: rgba(40, 167, 69, 0.05);
		}
		
		.hidden {
			display: none;
		}
		
		.fade-in {
			animation: fadeIn 0.5s ease-in;
		}
		
		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(20px); }
			to { opacity: 1; transform: translateY(0); }
		}
		
		.uppercase {
			text-transform: uppercase;
		}
	
		@media (max-width: 480px) {
			.header-section {
				min-height: 40vh;
				padding: 1rem;
			}
		}

		@media (max-width: 768px) {
			.header-section {
				min-height: 50vh;
				padding: 1.5rem 1rem;
				background-position: center top; /* Focus on important part of image */
			}
			
			.header-section h1 {
				font-size: 2rem;
			}
			
			.radio-group {
				flex-direction: column;
				gap: 1rem;
			}
			
			.radio-option {
				min-width: auto;
			}
			
			.form-section {
				padding: 1rem;
			}
			
			.main-container {
				margin: 1rem;
			}
		}