/* contact.css - v1.1 */

.form-title {
            font-family: var(--font-brand);
            font-weight: var(--weight-bold);
            font-size: 22px;
            color: white;
            margin-bottom: 24px;
        }

        .form-subtitle {
            font-size: 16px;
        }

		
		.form-card {
			background: #E9F2EC;
			border-radius: 12px;
			padding: 32px;
			box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
			margin-bottom: 24px;
		}

		
		.card-title {
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 4px;
			color: #1a202c;
		}

		
		.form-group {
			display: flex;
			flex-direction: column;
			margin-bottom: 24px;
		}

		
		.form-label {
			font-size: 14px;
			font-weight: 600;
			color: #2d3748;
			margin-bottom: 8px;
		}

		
		.form-label.required::after {
			content: '*';
			color: #e53e3e;
			margin-left: 4px;
		}

		
		.form-input, .form-textarea, .form-select {
			padding: 10px 12px;
			border: 1px solid #e2e8f0;
			border-radius: 6px;
			font-size: 14px;
			transition: border-color 0.2s;
			font-family: inherit;
			background: white;
		}

		
		.form-input:focus, .form-textarea:focus, .form-select:focus {
			outline: none;
			border-color: #667eea;
			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		}

		
		.form-textarea {
			min-height: 120px;
			resize: vertical;
		}

		
		.form-help {
			font-size: 12px;
			color: #404040;
			margin-top: 6px;
		}

		.form-card .btn-primary {
			display: block;
			margin-left: auto;
		}

		
		.btn {
			padding: 10px 24px;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s;
			border: none;
			text-decoration: none;
			display: inline-block;
		}

		
		.btn-secondary {
			background: white;
			color: #4a5568;
			border: 1px solid #e2e8f0;
		}

		
		.btn-secondary:hover {
			background: #f7fafc;
		}

		
		.message {
			padding: 16px;
			border-radius: 8px;
			margin-bottom: 24px;
			display: flex;
			align-items: center;
			gap: 12px;
		}

		
		.message-success {
			background: #c6f6d5;
			border: 1px solid #9ae6b4;
			color: #22543d;
		}

		
		.message-error {
			background: #fed7d7;
			border: 1px solid #fc8181;
			color: #742a2a;
		}
		
		#form-message {
			margin-top: 24px;
			max-height: 0;
			overflow: hidden;
			padding: 0;
			transition: max-height 0.5s ease, padding 0.5s ease;
			justify-content: center;
			text-align: center;
		}

		#form-message.visible {
			max-height: 100px;
			padding: 16px;
		}

		
		.info-content {
			display: flex;
			align-items: flex-start;
			gap: 16px;
		}

		
		.info-icon {
			font-size: 32px;
		}

		
		.info-text {
			font-size: 16px;
		}

		
		.page-title {
			font-size: 28px;
			font-weight: 700;
			color: #f0f0f0;
			margin-bottom: 8px;
		}

		
		.page-subtitle {
			font-size: 14px;
			opacity: 0.9;
			color: #eee;
		}

		
		.main-content {
			padding: 40px 20px;
			margin: 0 auto;
			max-width: 800px;
		}
		
		section {
			padding: 0px !important;
		}
		
		
		.card {
			background: #EEF2FF;
			border-radius: 12px;
			padding: 32px;
			box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
			margin-bottom: 24px;
		}

		
		.card-subtitle {
			font-size: 14px;
			color: #718096;
			margin-bottom: 24px;
		}

		
		.info-card {
			background: linear-gradient(135deg, var(--primary-green-start), var(--primary-green-mid), var(--primary-green-end));
			color: white;
			padding: 20px 24px;
			border-radius: 12px;
			margin-bottom: 24px;
		}

		
		.benefits-list {
			list-style: none;
			padding: 0;
			margin: 20px 0;
		}

		
		.benefits-list li {
			padding: 12px 0 12px 35px;
			position: relative;
			color: #444;
			line-height: 1.6;
		}

		
		.benefits-list li:before {
			content: "✓";
			position: absolute;
			left: 0;
			color: #667eea;
			font-weight: bold;
			font-size: 1.3rem;
		}

		
		@media (max-width: 768px) {
			.main-content {
				padding: 20px 15px;
			}

			.card {
				padding: 24px 20px;
			}
		}