.elementor .nkp-ct-form-card{/* ══════════════════════════════════════════
 Paste this whole file into:
 Elementor → Site Settings → Custom CSS
 (or the Container's own Advanced → Custom CSS panel if you prefer it page-scoped)
 ══════════════════════════════════════════ */

/* 1. THE FORM CARD ITSELF
 Assign this class to the LEFT COLUMN container's
 Advanced → CSS Classes field: nkp-ct-form-card */
.nkp-ct-form-card {
background: #fff;
border-radius: 24px;
padding: 40px;
border: 1.5px solid #f0eded;
box-shadow: 0 8px 32px rgba(46,85,86,0.09);
}
@media (max-width: 560px) {
.nkp-ct-form-card { padding: 28px 22px; }
}

/* 2. HEADING + SUBTEXT inside that column
 Add a Heading widget with class: nkp-ct-form-h2
 Add a Text widget with class: nkp-ct-form-sub */
.nkp-ct-form-h2 {
font-family: 'Poppins', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #2E5556 !important;
margin-bottom: 8px !important;
}
.nkp-ct-form-sub {
font-family: 'Inter', sans-serif !important;
font-size: 14.5px !important;
color: #5a7a82 !important;
line-height: 1.6 !important;
margin-bottom: 8px !important;
}

/* 3. THE FORM WIDGET ITSELF
 Give the Form widget's Advanced → CSS Classes: nkp-ct-form
 This targets Elementor Pro's internal field/label/button markup directly,
 so you do NOT need to add a class to every individual field by hand. */

.nkp-ct-form .elementor-field-group {
margin-bottom: 4px !important;
}

.nkp-ct-form .elementor-field-label {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #2E5556 !important;
margin-bottom: 6px !important;
}

.nkp-ct-form .elementor-field,
.nkp-ct-form .elementor-field-textual {
font-family: 'Inter', sans-serif !important;
font-size: 14.5px !important;
color: #2E5556 !important;
border: 1.5px solid #f0eded !important;
border-radius: 12px !important;
padding: 12px 16px !important;
background: #fafbfb !important;
transition: border-color 0.2s, background 0.2s !important;
width: 100% !important;
}
.nkp-ct-form .elementor-field:focus,
.nkp-ct-form .elementor-field-textual:focus {
border-color: #89BCBD !important;
background: #fff !important;
outline: none !important;
}
.nkp-ct-form textarea.elementor-field {
min-height: 110px !important;
resize: vertical !important;
}

.nkp-ct-form .elementor-button {
width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
background: #FE84A4 !important;
color: #fff !important;
border-radius: 999px !important;
padding: 14px 30px !important;
border: none !important;
box-shadow: 0 6px 20px rgba(254,132,164,0.38) !important;
transition: transform 0.18s, box-shadow 0.18s, background 0.18s !important;
}
.nkp-ct-form .elementor-button:hover {
background: #e8688c !important;
box-shadow: 0 10px 28px rgba(254,132,164,0.48) !important;
transform: translateY(-2px) !important;
}

/* 4. Small disclaimer text under the button
 Add a Text widget after the Form widget with class: nkp-ct-form-note */
.nkp-ct-form-note {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: #8aabaf !important;
text-align: center !important;
margin-top: 10px !important;
line-height: 1.5 !important;
}\n}