.elementor-114 .elementor-element.elementor-element-c1799ab{--display:flex;--min-height:100vh;--background-transition:0.3s;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-114 .elementor-element.elementor-element-c1799ab, .elementor-114 .elementor-element.elementor-element-c1799ab::before{--border-transition:0.3s;}.elementor-114 .elementor-element.elementor-element-43c095c > .elementor-widget-container{padding:60px 0px 0px 0px;}.elementor-114 .elementor-element.elementor-element-afe2fc8{--display:flex;--min-height:100vh;--background-transition:0.3s;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-114 .elementor-element.elementor-element-afe2fc8, .elementor-114 .elementor-element.elementor-element-afe2fc8::before{--border-transition:0.3s;}.elementor-114 .elementor-element.elementor-element-e053054 > .elementor-widget-container{padding:60px 0px 0px 0px;}.elementor-114 .elementor-element.elementor-element-df7695c{--display:flex;--min-height:100vh;--background-transition:0.3s;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-114 .elementor-element.elementor-element-df7695c, .elementor-114 .elementor-element.elementor-element-df7695c::before{--border-transition:0.3s;}.elementor-114 .elementor-element.elementor-element-a0aba78 > .elementor-widget-container{padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-43c095c *//* =========================================
   CONNECT HERO – LARGE DESKTOP BACKGROUND
   ========================================= */

/* Default safety */
.connect-hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* LARGE DESKTOPS / ULTRAWIDE / 4K */
@media (min-width: 1600px) {
  .connect-hero {
    background-image: url('https://brucelliart.com/wp-content/uploads/2026/02/3840x2160NOFORM-scaled.jpg');
    background-position: center top;
  }
}

/* =========================================
   NINJA FORM POSITIONING
   ========================================= */

/* Target Ninja Form inside the hero */
.connect-hero .nf-form-cont {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(320px, 38vh, 520px); /* pushes form below Connect */
}

/* Inputs */
.connect-hero input,
.connect-hero textarea {
  background: #cfcfb6;
  border: none;
  padding: 14px 16px;
  font-size: 15px;
}

/* Labels */
.connect-hero label {
  color: #e8e5d6;
  font-size: 14px;
}

/* =========================================================
   CONNECT HERO — SUBMIT BUTTON (REFERENCE STYLE)
   ========================================================= */

.connect-hero .nf-form-cont input[type="submit"],
.connect-hero .nf-form-cont button{
  background: transparent !important;
  border: 2px solid #f3d36a !important; /* warm yellow */
  color: #ffffff !important;

  padding: 14px 38px !important;
  border-radius: 2px !important;

  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px !important;
  font-weight: 500;

  cursor: pointer;
  transition: all 0.25s ease;
}

/* =========================================================
   CONNECT HERO — FORM POSITION + REFERENCE STYLING
   Works with [ninja_form id=1]
   ========================================================= */

/* --- Background defaults --- */
.connect-hero{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

/* Large desktop background swap (your NO FORM image) */
@media (min-width: 1600px){
  .connect-hero{
    background-image: url('https://brucelliart.com/wp-content/uploads/2026/02/3840x2160NOFORM-scaled.jpg');
  }
}

/* =========================================================
   1) MOVE FORM OVER (RIGHT)
   ========================================================= */

/* The Ninja form wrapper (safe target) */
.connect-hero .nf-form-cont{
  /* keeps the form from stretching too wide */
  max-width: 660px;
}

/* Use margin-left to push the form right on desktops */
@media (min-width: 1025px){
  .connect-hero .nf-form-cont{
    margin-left: clamp(340px, 40vw, 740px);
    margin-right: 0;
    margin-top: clamp(260px, 28vh, 420px); /* keeps it under “Connect!” */
  }
}

/* On very wide screens, nudge a bit more right (like your reference) */
@media (min-width: 1600px){
  .connect-hero .nf-form-cont{
    margin-left: clamp(520px, 46vw, 920px);
    max-width: 620px;
  }
}

/* Tablet/mobile: center it so it doesn’t fall off-screen */
@media (max-width: 1024px){
  .connect-hero .nf-form-cont{
    margin: 220px auto 0;
    max-width: 92vw;
  }
}

/* =========================================================
   2) STYLE LIKE REFERENCE (beige fields, subtle borders)
   ========================================================= */

:root{
  --connect-field-bg: #c9c9b1;   /* beige like reference */
  --connect-field-border: rgba(255,255,255,.22);
  --connect-label: rgba(255,255,255,.82);
  --connect-help: rgba(255,255,255,.55);
}

/* Labels + help text */
.connect-hero .nf-form-cont label{
  color: var(--connect-label) !important;
  font-weight: 500;
  letter-spacing: .2px;
}

.connect-hero .nf-form-cont .nf-form-fields-required,
.connect-hero .nf-form-cont .nf-error-msg,
.connect-hero .nf-form-cont .nf-help{
  color: var(--connect-help) !important;
}

/* Inputs + textarea */
.connect-hero .nf-form-cont input[type="text"],
.connect-hero .nf-form-cont input[type="email"],
.connect-hero .nf-form-cont input[type="tel"],
.connect-hero .nf-form-cont textarea{
  background: var(--connect-field-bg) !important;
  border: 1px solid var(--connect-field-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;

  height: 44px;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #111 !important;
}

/* Textarea sizing like reference */
.connect-hero .nf-form-cont textarea{
  height: 130px;
  resize: vertical;
}

/* Reduce Ninja’s default spacing between fields */
.connect-hero .nf-form-cont .nf-field{
  margin-bottom: 40px !important;
}


/* Button hover */
.connect-hero .nf-form-cont input[type="button"]:hover,
.connect-hero .nf-form-cont input[type="submit"]:hover,
.connect-hero .nf-form-cont button:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Optional: tighten required * color */
.connect-hero .nf-form-cont .nf-field-label .ninja-forms-req-symbol{
  color: #f3d36a !important; /* subtle warm gold */
}
.connect-hero .nf-form-cont .ninja-forms-req-symbol {
  display: none !important;
}
/* Hide Ninja Forms required fields helper text */
.connect-hero .nf-form-cont .nf-form-fields-required {
  display: none !important;
}

/* Smooth hover transition */
.connect-hero .nf-form-cont input[type="button"],
.connect-hero .nf-form-cont input[type="submit"],
.connect-hero .nf-form-cont button{
  transition: all 0.25s ease;
}

/* Button hover — warm yellow accent */
.connect-hero .nf-form-cont input[type="button"]:hover,
.connect-hero .nf-form-cont input[type="submit"]:hover,
.connect-hero .nf-form-cont button:hover{
  background: rgba(243, 211, 106, 0.12) !important; /* soft yellow glow */
  border-color: #f3d36a !important;
  color: #f3d36a !important;
}

/* Center Ninja Forms submit button */
.connect-hero .nf-form-content .submit-container{
  text-align: center !important;
}

/* Remove left alignment behavior */
.connect-hero .nf-form-content input[type="submit"]{
  float: none !important;
  display: inline-block !important;
  margin: 5px auto 0 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c1799ab *//* Hide this desktop hero on small desktops (ex: 13" MacBook) + tablet + mobile */
@media (max-width: 1599px){
  .connect-hero{
    display: none !important;
  }
}

/* Force-hide desktop heroes on mobile (safety net) */
@media (max-width: 767px){
  .connect-hero,
  .brucelli-contact{
    display: none !important;
  }

  .mobile-contact{
    display: block !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e053054 *//* =================================================
   BRUCELLI CONTACT – TALL HERO (COVER)
   FIX: move form below the baked-in "Connect!"
   ================================================= */

/* ---- QUICK KNOBS (tweak these if needed) ---- */
:root{
  --brucelli-bg-x: 72%;     /* shift background right/left */
  --brucelli-bg-y: 55%;     /* shift background up/down */
  --brucelli-form-width: 660px;  /* narrower so it doesn't span into "Connect!" */
  --brucelli-form-top: clamp(420px, 40vh, 520px); /* ✅ pushes form down */
}
/* -------------------------------------------- */

.elementor-element.brucelli-contact{
  position: relative;
  width: 100%;
  height: auto;
  min-height: 120vh;
  padding: 0 !important;

  background-image: url("https://brucelliart.com/wp-content/uploads/2026/02/1.3.26NewContactPage.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--brucelli-bg-x) var(--brucelli-bg-y);

  overflow: hidden;
  display: grid;
}

.elementor-element.brucelli-contact > .e-con-inner{
  min-height: 120vh;
  display: grid;
}

/* =========================
   FORM POSITIONING (LOWER)
   ========================= */
.elementor-element.brucelli-contact .brucelli-contact__form{
  width: min(var(--brucelli-form-width), 92vw);

  margin-left: auto;
  margin-right: clamp(24px, 5vw, 90px);

  /* ✅ key change: form starts below "Connect!" */
  margin-top: var(--brucelli-form-top);
  margin-bottom: clamp(60px, 10vh, 140px);

  z-index: 2;
}

/* Hide “Fields marked with * are required” */
.elementor-element.brucelli-contact .nf-form-fields-required{
  display: none !important;
}

/* Typography */
.elementor-element.brucelli-contact .nf-form-cont,
.elementor-element.brucelli-contact .nf-form-cont *{
  font-family: "Proxima Nova", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.elementor-element.brucelli-contact .nf-field-label label{
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.elementor-element.brucelli-contact .ninja-forms-req-symbol{
  color: #ffd90f;
  margin-left: 4px;
}

/* Inputs */
.elementor-element.brucelli-contact input[type="text"],
.elementor-element.brucelli-contact input[type="email"],
.elementor-element.brucelli-contact input[type="tel"],
.elementor-element.brucelli-contact textarea{
  background: rgba(211, 208, 189, 0.92);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0;
  padding: 14px;
  font-size: 18px;
  color: #0b1b22;
  width: 100%;
}

.elementor-element.brucelli-contact textarea{
  min-height: 190px;
}

.elementor-element.brucelli-contact .nf-field-container{
  margin-bottom: 18px;
}

.elementor-element.brucelli-contact input:focus,
.elementor-element.brucelli-contact textarea:focus{
  border-color: #ffd90f;
  outline: none;
}

/* Submit button */
.elementor-element.brucelli-contact input[type="submit"],
.elementor-element.brucelli-contact button{
  background: transparent;
  border: 2px solid #fbefc9;
  color: #fbefc9;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s ease;
}

.elementor-element.brucelli-contact input[type="submit"]:hover,
.elementor-element.brucelli-contact button:hover{
  background: rgba(251,239,201,0.15);
  transform: translateY(-1px);
}

/* =========================
   SHORT SCREENS (LAPTOPS)
   ========================= */
@media (max-height: 820px){
  :root{
    --brucelli-bg-y: 48%;
    --brucelli-form-top: 320px;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px){
  .elementor-element.brucelli-contact{
    min-height: 100vh;
    height: auto;
    padding: 60px 18px 120px !important;
    background-position: 65% 52%;
  }

  .elementor-element.brucelli-contact > .e-con-inner{
    min-height: auto;
  }

  .elementor-element.brucelli-contact .brucelli-contact__form{
    margin: 260px auto 80px;
    width: min(660px, 92vw);
  }
}

/* Center Ninja Forms submit button (Brucelli Contact container) */
.elementor-element.brucelli-contact .nf-form-content .submit-container{
  text-align: center !important;
  width: 100%;
}

/* Make sure the submit itself can center */
.elementor-element.brucelli-contact .nf-form-content input[type="submit"],
.elementor-element.brucelli-contact .nf-form-content button[type="submit"]{
  float: none !important;
  display: inline-block !important;
  margin: 20px auto 0 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-afe2fc8 */@media (min-width: 1600px){
  .brucelli-contact{
    display: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a0aba78 *//* =========================================================
   MOBILE: ONE WRAPPER (TOP IMG + FORM + BOTTOM IMG)
   ========================================================= */

/* Images behave like full-width responsive artwork */
.contact-mobile-wrap img{
  width: 100%;
  height: auto;
  display: block;
}

/* Form band in the middle */
.contact-mobile-form{
  background: #061a23;
  padding: 18px 6vw 22px;
}

/* Keep the form contained */
.contact-mobile-form .nf-form-cont{
  max-width: 92vw;
  margin: 0 auto !important;
}

/* Remove "Fields marked with an *..." */
.contact-mobile-form .nf-before-form-content,
.contact-mobile-form .nf-form-fields-required{
  display: none !important;
}

/* Labels */
.contact-mobile-form label{
  color: rgba(255,255,255,.82) !important;
  font-weight: 500;
  letter-spacing: .2px;
}

/* Field spacing */
.contact-mobile-form .nf-field{
  margin-bottom: 10px !important;
}

/* Inputs */
.contact-mobile-form input[type="text"],
.contact-mobile-form input[type="email"],
.contact-mobile-form input[type="tel"]{
  background: #c9c9b1 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 2px !important;
  box-shadow: none !important;

  height: 38px !important;
  padding: 6px 10px !important;
  font-size: 16px !important; /* prevents iOS zoom */
  color: #111 !important;
}

/* Textarea */
.contact-mobile-form textarea{
  background: #c9c9b1 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 2px !important;
  box-shadow: none !important;

  height: 90px !important;
  padding: 8px 10px !important;
  font-size: 16px !important;
  color: #111 !important;
}

/* Required star color */
.contact-mobile-form .ninja-forms-req-symbol{
  color: #f3d36a !important;
}

/* Submit button */
.contact-mobile-form input[type="submit"],
.contact-mobile-form button{
  background: transparent !important;
  border: 2px solid #f3d36a !important;
  color: #fff !important;

  padding: 12px 28px !important;
  border-radius: 2px !important;

  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px !important;
  font-weight: 500;

  cursor: pointer;
  transition: all .25s ease;
}

.contact-mobile-form input[type="submit"]:hover,
.contact-mobile-form button:hover{
  background: rgba(243, 211, 106, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(243, 211, 106, 0.35);
}

/* Center submit row if Ninja wraps it */
.contact-mobile-form .submit-container{
  text-align: center;
  margin-top: 6px !important;
}

/* =========================================================
   MOBILE: REMOVE TOP GAP + MOVE FORM UP
   Works for split sections (contact-top / contact-form-band)
   ========================================================= */
@media (max-width: 767px){

  /* 1) Kill Elementor default top padding/margins on the top slice */
  .contact-top{
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 34vh !important; /* was 42vh — smaller = form moves up */
  }

  /* If Elementor adds padding on the inner container */
  .contact-top > .e-con-inner{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 2) Tighten the form band so it starts sooner */
  .contact-form-band{
    padding-top: 10px !important;   /* was 18px */
    padding-bottom: 18px !important;
  }

  /* 3) Reduce any extra whitespace before the form */
  .contact-form-band .nf-form-cont{
    margin-top: 0 !important;
  }
}

@media (max-width: 767px){
  header, .site-header{
    margin-bottom: 0 !important;
  }
  body{
    padding-top: 0 !important;
  }
}

/* =========================================================
   MOBILE (ONE WRAPPER): PULL FORM UP
   ========================================================= */
@media (max-width: 767px){

  /* 1) Limit how tall the TOP image can be */
  .contact-mobile-top{
    display: block;
    width: 100%;
    height: 34vh !important;     /* ✅ reduce this to pull form UP */
    object-fit: cover;           /* crops excess height cleanly */
    object-position: center top; /* keeps “Connect!” area */
  }

  /* 2) Remove any accidental gap between top image and form band */
  .contact-mobile-form{
    margin-top: 0 !important;
    padding-top: 12px !important; /* slightly tighter */
  }

  /* optional: tighten overall band padding */
  .contact-mobile-form{
    padding-bottom: 18px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-df7695c *//* =========================================================
   MOBILE SPLIT CONTACT HERO (TOP / FORM / BOTTOM)
   - Top Image: 1080x1920iphoneNOFORMTOP.jpg
   - Bottom Image: 1080x1920iphoneNOFORMBottom.jpg
   - Form: [ninja_form id=1]
   ========================================================= */

@media (max-width: 767px){

  /* --- TOP SLICE (image) --- */
  .contact-top{
    background-image: url('https://brucelliart.com/wp-content/uploads/2026/02/1080x1920iphoneNOFORMTOP.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;

    /* tune this to move the form area up/down */
    min-height: 42vh;
  }

  /* --- FORM BAND (solid) --- */
  .contact-form-band{
    background: #061a23;            /* matches the dark band */
    padding: 18px 6vw 22px;         /* tune if you need more/less room */
  }

  /* --- BOTTOM SLICE (image) --- */
  .contact-bottom{
    background-image: url('https://brucelliart.com/wp-content/uploads/2026/02/1080x1920iphoneNOFORMBottom.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;

    /* tune this if quote needs more/less space */
    min-height: 44vh;
  }

  /* =========================================================
     FORM: GENERAL LAYOUT
     ========================================================= */

  .contact-form-band .nf-form-cont{
    max-width: 92vw;
    margin: 0 auto !important;
  }

  /* Hide “Fields marked with an * …” */
  .contact-form-band .nf-before-form-content,
  .contact-form-band .nf-form-fields-required{
    display: none !important;
  }

  /* Labels */
  .contact-form-band label{
    color: rgba(255,255,255,.82) !important;
    font-weight: 500;
    letter-spacing: .2px;
  }

  /* Field spacing */
  .contact-form-band .nf-field{
    margin-bottom: 10px !important;
  }

  /* Inputs */
  .contact-form-band input[type="text"],
  .contact-form-band input[type="email"],
  .contact-form-band input[type="tel"]{
    background: #c9c9b1 !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 2px !important;
    box-shadow: none !important;

    height: 38px !important;
    padding: 6px 10px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    color: #111 !important;
  }

  /* Textarea */
  .contact-form-band textarea{
    background: #c9c9b1 !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 2px !important;
    box-shadow: none !important;

    height: 90px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
    color: #111 !important;
  }

  /* Required star color */
  .contact-form-band .ninja-forms-req-symbol{
    color: #f3d36a !important;
  }

  /* =========================================================
     SUBMIT BUTTON (outlined yellow)
     ========================================================= */

  .contact-form-band input[type="submit"],
  .contact-form-band button{
    background: transparent !important;
    border: 2px solid #f3d36a !important;
    color: #fff !important;

    padding: 12px 28px !important;
    border-radius: 2px !important;

    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px !important;
    font-weight: 500;

    cursor: pointer;
    transition: all .25s ease;
  }

  .contact-form-band input[type="submit"]:hover,
  .contact-form-band button:hover{
    background: rgba(243, 211, 106, 0.08) !important;
    box-shadow: 0 0 0 1px rgba(243, 211, 106, 0.35);
  }

  /* Center the submit row if Ninja wraps it */
  .contact-form-band .submit-container{
    text-align: center;
    margin-top: 6px !important;
  }
}/* End custom CSS */