.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Center the divider dots in trust rows site-wide */
.sd-svc .htrust,
.sd-loc .htrust,
.sd-services .htrust,
.sd-home .hero .trust {
  align-items: center;
}
.sd-svc .htrust .dot,
.sd-loc .htrust .dot,
.sd-services .htrust .dot,
.sd-home .hero .trust .dot {
  align-self: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================
   CONTACT PAGE — CHUNK 3 of 4: ELEMENTOR FORM STYLING
   
   HOW TO SET UP:
   1. In the RIGHT column of your split container, add an Elementor FORM widget.
   2. Click the form widget → Advanced tab → CSS Classes → type:  sd-eform
   3. Select the PARENT CONTAINER of the form → Advanced → CSS Classes → type:  sd-formcard
   4. Paste ALL the CSS below into Site Settings → Custom CSS
      (or the page's Custom CSS — site-wide is fine, it's scoped).

   FORM FIELDS TO CREATE (in the form widget):
   ─ Name        | type: Text     | required | column width 50%
   ─ Phone       | type: Tel      | required | column width 50%
   ─ Email       | type: Email    | required | column width 100%
   ─ Service     | type: Select   | column width 50%
       options (one per line):
       Basement Finishing
       Remodels & Additions
       Drywall Repair & Patches
       Popcorn Ceiling Removal
       Water Damage Repair
       Garage Finishing
       Soundproofing
       Light Commercial
       Not sure / Other
   ─ City / Area | type: Text     | column width 50% | placeholder: e.g. Maple Grove
   ─ Project details | type: Textarea | column width 100% | placeholder: Tell us what you're looking to get done…

   BUTTON: text = "Send My Request", full width.

   ACTIONS AFTER SUBMIT → Email:
   ─ To:        superiordrywallmn@gmail.com
   ─ Subject:   New Quote Request — Superior Drywall Website
   ─ Reply-To:  [field id of the Email field]
   (Recommended: install an SMTP plugin like WP Mail SMTP so emails
    reliably deliver — WordPress default mail often lands in spam.)

   MESSAGES tab → Success:
   "Thanks — we got it! We'll be in touch shortly. Need a faster answer? Call or text 763-501-9571."
   ============================================ */

/* ---- the white card around the form ---- */
#sd-formcard, .sd-formcard{
  background:#FFFFFF !important;
  border:1px solid rgba(33,28,22,.12) !important;
  border-radius:20px !important;
  padding:32px !important;
  box-shadow:0 30px 60px -40px rgba(33,28,22,.5);
}

/* ---- labels ---- */
.sd-eform .elementor-field-group > label,
.sd-eform .elementor-field-label{
  font-family:"Hanken Grotesk",sans-serif !important;
  font-weight:700 !important;
  font-size:.85rem !important;
  color:#211C16 !important;
  margin-bottom:6px !important;
}

/* ---- inputs, selects, textarea ---- */
.sd-eform .elementor-field-textual,
.sd-eform select.elementor-field-textual{
  font-family:"Hanken Grotesk",sans-serif !important;
  font-size:.96rem !important;
  color:#211C16 !important;
  background:#fff !important;
  border:1.5px solid rgba(33,28,22,.12) !important;
  border-radius:10px !important;
  padding:.7rem .85rem !important;
  transition:border-color .15s, box-shadow .15s;
}
.sd-eform .elementor-field-textual:focus{
  border-color:#1E3FC8 !important;
  box-shadow:0 0 0 3px rgba(30,63,200,.07) !important;
  outline:none !important;
}
.sd-eform textarea.elementor-field-textual{min-height:110px;resize:vertical}
.sd-eform ::placeholder{color:#6E665B;opacity:.7}

/* ---- submit button ---- */
.sd-eform .elementor-button{
  width:100% !important;
  background:#1E3FC8 !important;
  color:#fff !important;
  font-family:"Hanken Grotesk",sans-serif !important;
  font-weight:800 !important;
  font-size:1.02rem !important;
  border:none !important;
  border-radius:11px !important;
  padding:1rem !important;
  box-shadow:0 12px 26px -12px rgba(30,63,200,.6);
  transition:background .2s, transform .2s;
}
.sd-eform .elementor-button:hover{
  background:#18329F !important;
  transform:translateY(-2px);
}

/* ---- success / error messages ---- */
.sd-eform .elementor-message-success{
  font-family:"Hanken Grotesk",sans-serif !important;
  color:#1B9E5A !important;
  font-weight:600;
  text-align:center;
}
.sd-eform .elementor-message-danger{
  font-family:"Hanken Grotesk",sans-serif !important;
}

/* ---- spacing between rows ---- */
.sd-eform .elementor-field-group{margin-bottom:8px}
#sd-contact-section, .sd-contact-section{
  max-width:1100px;
  margin:0 auto !important;
  padding:60px 26px !important;
  gap:44px;
}/* End custom CSS */