.elementor-47 .elementor-element.elementor-element-050a368{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-813e892{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-813e892:not(.elementor-motion-effects-element-type-background), .elementor-47 .elementor-element.elementor-element-813e892 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F2E8;}/* Start custom CSS for html, class: .elementor-element-dde8f51 *//* ==================================================================== FILE 2 — DESIGN CODE (CSS) ==================================================================== YEH CODE KAHAN PASTE KARNA HAI: wp-admin → Appearance → Customize → Additional CSS (ya tumhare theme/page builder ka "Custom CSS" box) → neeche wala pura CSS paste kar do → Publish/Save. IMPORTANT: yeh CSS tabhi kaam karega jab FILE 1 ka shortcode is wrapper ke andar ho:
[contact-form-7 id="123" title="Contact Form"]
Fonts (ek baar, page ke mein ya theme ke font settings mein add kar dena — agar pehle se add nahi kiye hain): https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap ==================================================================== */ #til-cf7{ --ink:#14110D; --ink-soft:#4A4239; --ink-faint:#8B8377; --orange:#E2611C; --orange-deep:#8F3B10; --paper:#F7F2E8; --ivory:#FFFFFF; --line:rgba(20,17,13,0.18); --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace; background:var(--paper); padding:clamp(56px,8vw,96px) clamp(20px,5vw,64px); max-width:1000px; margin:0 auto; font-family:var(--font-body); -webkit-font-smoothing:antialiased; } #til-cf7 *{ box-sizing:border-box; } #til-cf7 .til-cf7-eyebrow{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--orange-deep); display:inline-flex; align-items:center; gap:10px; } #til-cf7 .til-cf7-eyebrow::before{ content:""; width:20px; height:1px; background:var(--orange); display:inline-block; } #til-cf7 .til-cf7-title{ font-family:var(--font-display); font-weight:700; font-style:italic; font-size:clamp(1.9rem,4vw,2.7rem); color:var(--ink); margin:14px 0 40px; } /* ========================================================= Layout grid — wraps the CF7 shortcode fields ========================================================= */ #til-cf7 .til-cf7-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; } #til-cf7 .til-cf7-field.til-cf7-third{ grid-column:span 1; } #til-cf7 .til-cf7-field.til-cf7-full{ grid-column:1 / -1; } #til-cf7 .til-cf7-submit-row{ grid-column:1 / -1; display:flex; align-items:center; gap:18px; margin-top:8px; } /* ========================================================= Field labels ========================================================= */ #til-cf7 .til-cf7-field label{ display:block; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); } /* ========================================================= CF7's real form-control markup — underline / register style ========================================================= */ #til-cf7 .wpcf7-form-control-wrap{ display:block; margin-top:10px; } #til-cf7 .wpcf7-form-control{ width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink); background:transparent; border:none; border-bottom:1px solid var(--line); padding:10px 2px; border-radius:0; transition:border-color .25s ease; } #til-cf7 .wpcf7-form-control::placeholder{ color:var(--ink-faint); opacity:0.7; } #til-cf7 .wpcf7-form-control:focus{ outline:none; border-bottom:1px solid var(--orange); box-shadow:0 1px 0 0 var(--orange); } #til-cf7 textarea.wpcf7-form-control{ resize:vertical; min-height:110px; line-height:1.6; } /* validation state */ #til-cf7 .wpcf7-not-valid{ border-bottom-color:var(--orange-deep) !important; } #til-cf7 .wpcf7-not-valid-tip{ font-family:var(--font-mono); font-size:11.5px; color:var(--orange-deep); margin-top:6px; display:block; } /* ========================================================= Submit button — matches brand button style ========================================================= */ #til-cf7 input.wpcf7-submit{ width:auto; font-family:var(--font-body); font-weight:600; font-size:0.92rem; letter-spacing:0.02em; color:var(--ivory); background:var(--orange); border:1px solid var(--orange); padding:14px 34px; border-radius:2px; cursor:pointer; transition:background .25s ease, border-color .25s ease, transform .25s ease; } #til-cf7 input.wpcf7-submit:hover{ background:var(--orange-deep); border-color:var(--orange-deep); transform:translateY(-2px); } #til-cf7 input.wpcf7-submit:disabled{ opacity:0.6; cursor:not-allowed; transform:none; } #til-cf7 .wpcf7-spinner{ margin:0; } /* form response message (success / error) */ #til-cf7 .wpcf7-response-output{ margin-top:26px !important; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.02em; padding:14px 18px !important; border:none !important; border-left:3px solid var(--orange) !important; background:var(--ivory); color:var(--ink-soft); } #til-cf7 form.sent .wpcf7-response-output{ border-left-color:#2E7D32 !important; } #til-cf7 form.failed .wpcf7-response-output, #til-cf7 form.aborted .wpcf7-response-output{ border-left-color:var(--orange-deep) !important; } #til-cf7 .screen-reader-response{ position:absolute; overflow:hidden; height:1px; width:1px; } /* ========================================================= RESPONSIVE — mobile / tablet / desktop ========================================================= */ @media (max-width:820px){ #til-cf7 .til-cf7-grid{ grid-template-columns:repeat(2,1fr); } #til-cf7 .til-cf7-field.til-cf7-third:nth-child(3){ grid-column:1 / -1; } } @media (max-width:560px){ #til-cf7 .til-cf7-grid{ grid-template-columns:1fr; gap:26px; } #til-cf7 .til-cf7-field.til-cf7-third{ grid-column:1 / -1; } #til-cf7 input.wpcf7-submit{ width:100%; text-align:center; } }/* End custom CSS */