@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Load Roboto with common weights used site-wide. If your theme already loads Roboto, you can remove this import.
  Using `display=swap` improves perceived performance while preventing invisible text. */

.consultant-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  /* Prefer Roboto, but provide a safe fallback stack in case specific weights aren't loaded */
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #333;
}

/* Make sure Forminator form doesn't stretch weirdly */
.consultant-right .forminator-ui {
  width: 100% !important;
}

/* Modal / overlay styles for contact-us widget */

.consultant-open-btn {
  display: inline-block;
  border-radius: 30px;
  background: #1f4fa0 !important;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 16px;
}

/* Layout tweaks scoped to the modal content only */
.consultant-modal .consultant-wrapper {
  align-items: flex-start;
}

@media (max-width:640px){
  .consultant-modal { padding: 16px; }

  /* Mobile: switch from side-by-side columns to stacked vertical layout */
  .consultant-wrapper {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .consultant-left,
  .consultant-right {
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0; /* ensure children can shrink correctly */
    padding: 0 0.5rem;
  }

  /* Bring the left (info) block above the form on mobile */
  .consultant-left { order: 1; padding-top: 1rem; }
  .consultant-right { order: 2; padding-top: 0.5rem; }

  /* Slightly reduce title size for small screens */
  .consultant-title { font-size: 1.125rem; }

  /* Keep social icons aligned nicely on mobile */
  .social-icons { justify-content: flex-start; gap: 10px; }

  /* Ensure Forminator inputs remain full width */
  .consultant-right .forminator-ui,
  .consultant-right .forminator-row,
  .consultant-right .forminator-row .forminator-input,
  .consultant-right .forminator-field,
  .consultant-right input[type="text"],
  .consultant-right input[type="email"],
  .consultant-right input[type="tel"],
  .consultant-right textarea,
  .consultant-right select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Fix: ensure flex children can shrink and form fields use full width inside modal.
   This addresses Forminator inputs appearing shortened inside a flex column. */

/* Desktop proportions: left column slightly smaller to give more room to the form on the right */
.consultant-modal .consultant-left,
.consultant-left {
  min-width: 0; /* allow flex items to shrink properly */
  flex: 0 0 38%; /* left column approx 38% */
}

.consultant-modal .consultant-right,
.consultant-right {
  min-width: 0;
  flex: 1 1 62%; /* right column takes remaining space (~62%) */
}

/* Force Forminator and native inputs to expand to container width */
.consultant-right .forminator-ui,
.consultant-right .forminator-row,
.consultant-right .forminator-row .forminator-input,
.consultant-right .forminator-field,
.consultant-right input[type="text"],
.consultant-right input[type="email"],
.consultant-right input[type="tel"],
.consultant-right textarea,
.consultant-right select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  display: block;
}

/* If Forminator wraps inputs in columns, ensure those columns don't cap width */
.consultant-right .forminator-row .forminator-column {
  min-width: 0;
}

/* Small visual tweak to ensure inner content has breathing room */
.consultant-modal .consultant-right { padding: 8px; }
.consultant-title, .consultant-call-label, .consultant-or {font-weight: 600;}
.consultant-left { padding-top: 2em; padding-left: .5em;}
.consultant-call-label {margin-bottom: 1em !important;}
.consultant-or { margin-top: 1em; }
.social-icons {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .social-icons .icon {
    width: 30px;
    height: 30px;
    background: #1c4f91; /* your blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.25s ease;
    color: #fff;
    font-size: 18px;
  }

  .social-icons .icon:hover {
    background: #163f74;
    transform: translateY(-2px);
  }

.consultant-left,
.consultant-right {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}