tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; text-align: center; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; margin: 0 auto; display: block; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-c1a9651 *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-cb4dd6a *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; text-align: center; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; margin: 0 auto; display: block; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-c1a9651 *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-cb4dd6a *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; text-align: center; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; margin: 0 auto; display: block; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-c1a9651 *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-f68d08e *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; text-align: center; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; margin: 0 auto; display: block; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-b43e308 *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-f68d08e *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; text-align: center; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; margin: 0 auto; display: block; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-b43e308 *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-f68d08e *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; text-align: center; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; margin: 0 auto; display: block; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-b43e308 *//* ============================================================ VASUKI CEMENT - CONTACT FORM 7 STYLES Pixel-perfect match to design + validation styles Add to: Appearance > Customize > Additional CSS OR: your child theme's style.css ============================================================ */ /* ============================================================ KILL CF7 DEFAULT SPACING — Must come first ============================================================ */ /* CF7 wraps fields in
tags — remove all margin/padding */ .wpcf7-form p { margin: 0 !important; padding: 0 !important; } /* CF7 control wrap adds display:inline-block and spacing */ .wpcf7-form-control-wrap { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove any br tags CF7 inserts */ .wpcf7-form br { display: none !important; } /* ---- Layout: Two-Column Grid ---- */ .vc-form-row { display: flex; gap: 24px; margin-bottom: 4px; } .vc-two-col .vc-form-group { flex: 1 1 calc(50% - 12px); } .vc-full-col .vc-form-group { flex: 1 1 100%; } /* ---- Form Group (label + input) ---- */ .vc-form-group { display: flex; flex-direction: column; } /* ---- Labels ---- */ .vc-form-group label { font-size: 14px; font-weight: 400; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; font-family: inherit; } /* ---- Text Inputs, Email, Tel ---- */ .vc-form-group input[type="text"], .vc-form-group input[type="email"], .vc-form-group input[type="tel"], .wpcf7-form .vc-form-group input[type="text"], .wpcf7-form .vc-form-group input[type="email"], .wpcf7-form .vc-form-group input[type="tel"] { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } /* ---- Textarea (Message) ---- */ .vc-form-group textarea, .wpcf7-form .vc-form-group textarea { width: 100%; min-height: 80px; height: 80px; padding: 14px 16px; border: 1.5px solid #d1d1d1; border-radius: 4px; background-color: #ffffff; font-size: 14px; color: #1a1a1a; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; transition: border-color 0.2s ease; } /* ---- Placeholder Styles ---- */ .vc-form-group input::placeholder, .vc-form-group textarea::placeholder { color: #aaaaaa; font-size: 14px; } /* ---- Focus State ---- */ .vc-form-group input:focus, .vc-form-group textarea:focus { border-color: #e07a40; box-shadow: 0 0 0 2px rgba(224, 122, 64, 0.15); } /* ============================================================ VALIDATION STATES ============================================================ */ /* Invalid / Error State */ .vc-form-group input.wpcf7-not-valid, .vc-form-group textarea.wpcf7-not-valid { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12) !important; } /* Validation error message (below field) */ .vc-form-group .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #e53935; font-family: inherit; } /* Valid State (after submission check) */ .vc-form-group input:valid:not(:placeholder-shown), .vc-form-group textarea:valid:not(:placeholder-shown) { border-color: #43a047; } /* ---- CF7 Response / Status Messages ---- */ .wpcf7-response-output { margin: 12px 0 0 0 !important; padding: 10px 16px !important; border-radius: 4px !important; font-size: 13px !important; border: none !important; } /* Success */ .wpcf7-mail-sent-ok { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-left: 4px solid #43a047 !important; } /* Error */ .wpcf7-mail-sent-ng, .wpcf7-aborted, .wpcf7-spam-blocked, .wpcf7-validation-errors { background-color: #ffebee !important; color: #c62828 !important; border-left: 4px solid #e53935 !important; } /* ============================================================ FOOTER: Checkbox + Submit Button ============================================================ */ .vc-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 16px; flex-wrap: nowrap; } /* Remove CF7 default inline behavior */ .vc-checkbox-wrap .wpcf7-list-item label { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; } /* Fix checkbox position */ .vc-checkbox-wrap .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; } /* Fix text wrapping */ .vc-checkbox-wrap .wpcf7-list-item-label { line-height: 1.5; } .vc-submit-wrap { align-self: flex-start; } /* Custom Checkbox */ .vc-checkbox-wrap input[type="checkbox"], .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #d1d1d1; border-radius: 3px; appearance: none; -webkit-appearance: none; background-color: #ffffff; cursor: pointer; margin-top: 2px; position: relative; transition: border-color 0.2s ease, background-color 0.2s ease; } .vc-checkbox-wrap input[type="checkbox"]:checked, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked { background-color: #e07a40; border-color: #e07a40; } .vc-checkbox-wrap input[type="checkbox"]:checked::after, .vc-checkbox-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } /* Checkbox label text */ .vc-checkbox-wrap .wpcf7-list-item-label, .vc-checkbox-wrap label { font-size: 14px; color: #1a1a1a; line-height: 1.5; cursor: pointer; max-width: 260px; } /* ---- Submit Button ---- */ .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; background-color: #F55D1B; color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit; border: none; border-radius: 50px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.3px; } .vc-submit-wrap input[type="submit"]:hover, .vc-submit-wrap .wpcf7-submit:hover { background-color: #c96830; } .vc-submit-wrap input[type="submit"]:active, .vc-submit-wrap .wpcf7-submit:active { transform: scale(0.98); } /* Submit loading spinner (CF7 default) */ .wpcf7-spinner { display: none !important; } /* ============================================================ RESPONSIVE - Mobile ============================================================ */ @media (max-width: 600px) { .vc-form-row { flex-direction: column; gap: 16px; } .vc-two-col .vc-form-group { flex: 1 1 100%; } .vc-form-footer { flex-direction: column; align-items: flex-start; } .vc-submit-wrap { width: 100%; } .vc-submit-wrap input[type="submit"], .vc-submit-wrap .wpcf7-submit { width: 167px; } .vc-checkbox-wrap .wpcf7-list-item-label { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for nested-tabs, class: .elementor-element-cccc478 */@media (max-width: 425px) { .elementor-13 .elementor-element.elementor-element-cccc478.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ) { padding: 14px 47px; } } @media (max-width: 380px) { .elementor-13 .elementor-element.elementor-element-cccc478.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ) { padding: 14px 39px !important; } } @media (max-width: 1440px) { .elementor-13 .elementor-element.elementor-element-ae04fcf.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ) { padding: 14px 70px !important; } }/* End custom CSS */