.elementor-122 .elementor-element.elementor-element-78820e0f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-122 .elementor-element.elementor-element-8e4bf8b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:12px 12px 12px 12px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-122 .elementor-element.elementor-element-8e4bf8b:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-8e4bf8b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-b060808 );}.elementor-122 .elementor-element.elementor-element-8e4bf8b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-122 .elementor-element.elementor-element-61df4a0c{text-align:center;}.elementor-122 .elementor-element.elementor-element-241931b8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -12px) 0px;text-align:center;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-field-group.recaptcha_v3-bottomleft, .elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-field-type-html{padding-bottom:0px;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-button[type="submit"]{color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-122 .elementor-element.elementor-element-43ecd5f{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-122 .elementor-element.elementor-element-5dfda716{--divider-border-style:solid;--divider-color:#00000014;--divider-border-width:1px;}.elementor-122 .elementor-element.elementor-element-5dfda716 .elementor-divider-separator{width:100%;}.elementor-122 .elementor-element.elementor-element-5dfda716 .elementor-divider{padding-block-start:8px;padding-block-end:8px;}#elementor-popup-modal-122{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-122 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-122 .dialog-close-button{display:flex;}#elementor-popup-modal-122 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(max-width:1024px){.elementor-122 .elementor-element.elementor-element-78820e0f{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:70px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}.elementor-122 .elementor-element.elementor-element-8e4bf8b{--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}}@media(max-width:767px){.elementor-122 .elementor-element.elementor-element-78820e0f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-122 .elementor-element.elementor-element-8e4bf8b{--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}}@media(min-width:768px){.elementor-122 .elementor-element.elementor-element-8e4bf8b{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-122 .elementor-element.elementor-element-8e4bf8b{--width:100%;}}/* Start custom CSS for form, class: .elementor-element-43ecd5f *//* =====================================================
   HIRE MY SCOUT — "Book a Free Call" Popup Form
   Custom CSS for Elementor / Elementor Pro
   -----------------------------------------------------
   HOW TO USE:
   1. Paste this entire file into:
      - The Popup's own Custom CSS panel (Popup Settings icon,
        bottom-left of the editor > Custom CSS), OR
      - Elementor > Custom Code > Add New (recommended if your
        Elementor plan doesn't show per-popup Custom CSS)
   2. Make sure the POPUP's outer container has the CSS class:
      hms-popup
      (Set this in Popup Settings > Advanced > CSS Classes)
   3. Make sure the FORM widget has the CSS class:
      hms-form
      (Set this in the Form widget > Advanced tab > CSS Classes)
   ===================================================== */

/* ---------- Brand tokens (matches your logo) ---------- */
:root{
  --hms-navy:#0F172A;
  --hms-blue:#215DAE;
  --hms-blue-light:#3373D6;
  --hms-teal:#5CE1E6;
  --hms-grey-bg:#F6F7FA;
  --hms-border:#E3E9F2;
  --hms-text-grey:#5B6B82;
}

/* ---------- Popup container (the white rounded box) ---------- */
.hms-popup .dialog-widget-content,
.hms-popup.dialog-widget-content{
  border-radius: 24px !important;
  padding: 38px 34px !important;
  max-width: 460px !important;
  box-shadow: 0 40px 90px -20px rgba(10,21,38,.45) !important;
  border: none !important;
}

/* Dim / blur the background overlay behind the popup */
.hms-popup.dialog-widget.dialog-type-lightbox .dialog-overlay,
.hms-popup .dialog-overlay{
  background-color: rgba(10,21,38,.6) !important;
  backdrop-filter: blur(6px) !important;
}

/* Close (X) button, top right */
.hms-popup .dialog-close-button,
.hms-popup .elementor-popup-modal-close-button{
  top: 20px !important;
  right: 20px !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--hms-grey-bg) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transition: background .3s ease, transform .3s ease;
}
.hms-popup .dialog-close-button:hover,
.hms-popup .elementor-popup-modal-close-button:hover{
  background: #E7EFFA !important;
  transform: rotate(90deg);
}
.hms-popup .dialog-close-button svg,
.hms-popup .eicon-close{
  color: var(--hms-navy) !important;
  fill: var(--hms-navy) !important;
}

/* ---------- Popup heading + subheading ----------
   If your heading/subheading are separate Heading/Text widgets
   inside the popup (recommended), give the Heading widget the
   CSS class "hms-form-title" and the Text widget "hms-form-sub".
*/
.hms-form-title{
  font-weight: 700 !important;
  font-size: 23px !important;
  color: var(--hms-navy) !important;
  margin-bottom: 6px !important;
}
.hms-form-sub{
  font-size: 14.5px !important;
  color: var(--hms-text-grey) !important;
  margin-bottom: 22px !important;
  line-height: 1.5 !important;
}

/* ---------- Form field groups ---------- */
.hms-form .elementor-field-group{
  margin-bottom: 16px !important;
}

/* Field labels */
.hms-form .elementor-field-label{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hms-navy) !important;
  margin-bottom: 6px !important;
}

/* Text, email, tel, textarea, select inputs */
.hms-form .elementor-field-textual,
.hms-form select.elementor-field,
.hms-form textarea.elementor-field{
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 11px !important;
  border: 1.5px solid var(--hms-border) !important;
  background: var(--hms-grey-bg) !important;
  font-size: 14.5px !important;
  color: var(--hms-navy) !important;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.hms-form .elementor-field-textual:focus,
.hms-form select.elementor-field:focus,
.hms-form textarea.elementor-field:focus{
  outline: none !important;
  border-color: var(--hms-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(33,93,174,.12) !important;
}

.hms-form textarea.elementor-field{
  min-height: 90px !important;
  resize: vertical !important;
}

/* ---------- Phone row (Country Code select + Phone number field) ----------
   In the Form widget, set:
   - "Country Code" field  -> Field Width: 30%
   - "Phone Number" field  -> Field Width: 70%
   Elementor will place them on the same row automatically.
   This CSS just tightens the gap and matches height/style.
*/
.hms-form .elementor-field-group[data-width="30"],
.hms-form .elementor-field-group[data-width="70"]{
  padding-right: 6px !important;
}
.hms-form select.elementor-field{
  cursor: pointer !important;
}

/* ---------- Submit button ---------- */
.hms-form .elementor-field-type-submit .elementor-button,
.hms-form button[type="submit"]{
  width: 100% !important;
  padding: 15px 20px !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(100deg, var(--hms-blue) 0%, var(--hms-blue-light) 45%, var(--hms-teal) 100%) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: transform .35s ease, box-shadow .35s ease, background-position .35s ease;
  box-shadow: 0 14px 30px -10px rgba(33,93,174,.5) !important;
  margin-top: 6px !important;
}
.hms-form .elementor-field-type-submit .elementor-button:hover,
.hms-form button[type="submit"]:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 34px -8px rgba(33,93,174,.6) !important;
  background-position: 100% 0 !important;
}

/* Remove Elementor's default submit button icon spacing quirks */
.hms-form .elementor-field-type-submit{
  margin-top: 4px !important;
}

/* ---------- Success / error messages ---------- */
.hms-form .elementor-message-success{
  color: #1a9c6b !important;
  font-size: 13.5px !important;
  text-align: center !important;
  margin-top: 12px !important;
}
.hms-form .elementor-message-danger{
  color: #c0392b !important;
  font-size: 13.5px !important;
  text-align: center !important;
  margin-top: 12px !important;
}

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 480px){
  .hms-popup .dialog-widget-content{
    padding: 28px 22px !important;
    max-width: 92vw !important;
  }
  .hms-form-title{ font-size: 20px !important; }
}/* End custom CSS */