:root{
	--ekitwi-green: #49f19a;
	--ekitwi-text: #1a1a2e;
	--ekitwi-violet: #3a0f5a;
}

/* Card container */
.contact-card{
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem;
	border-radius: 12px;
	background: transparent; 
	border: 1px solid rgba(58,15,90,0.18);
	box-shadow: 0 8px 30px rgba(58,15,90,0.08);
	backdrop-filter: blur(6px);
}

/* Form labels and headings */
.contact-card .ui.header,
.contact-card label{
	color: var(--ekitwi-text);
}

/* Inputs */
.ui.form input[type="email"],
.ui.form input[type="text"]{
	width: 100%;
	padding: 0.9rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(58,15,90,0.14);
	background: rgba(0,0,0,0.25) !important; /* darker translucent bg to avoid white */
	color: #ffffff;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.ui.form input[type="email"]:focus,
.ui.form input[type="text"]:focus{
	outline: none;
	background: rgba(0,0,0,0.18) !important; /* slightly brighter on focus but still dark */
	border-color: var(--ekitwi-violet) !important;
	box-shadow: 0 4px 18px rgba(58,15,90,0.12) !important;
}
.ui.form input[type="email"]::placeholder{
	color: rgba(255,255,255,0.6);
}

/* Textarea styling */
.ui.form textarea{
	width: 100%;
	padding: 0.9rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(58,15,90,0.14);
	background: rgba(0,0,0,0.25) !important; /* darker translucent bg to avoid white */
	color: #ffffff;
	resize: vertical;
}
.ui.form textarea:focus{
	background: rgba(0,0,0,0.18) !important; /* slightly brighter on focus but still dark */
	border-color: var(--ekitwi-violet) !important;
	box-shadow: 0 4px 18px rgba(58,15,90,0.12) !important;
}

/* Two-field layout tweak for narrow screens */
.two.fields {
	display: flex;
	gap: 0.75rem;
}
.two.fields .field { flex: 1; }

/* Checkbox label color */
.ui.checkbox label { color: #fff !important; }

/* Buttons: use green from index and dark text color */
.ui.form .ui.primary.button{
	background: var(--ekitwi-green) !important;
	color: var(--ekitwi-text) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 0.75rem 1.25rem !important;
	box-shadow: 0 8px 20px rgba(73,241,154,0.18) !important;
}

/* Messages */
#contact-success, #contact-error{
	border-radius: 8px;
}

/* Responsive tweaks */
@media (max-width: 600px){
	.contact-card{ padding: 1rem; }
}