/* Contact Us Box */

.iir-contact-box {
background:
  radial-gradient(
    ellipse 180% 70% at 50% -20%,
    rgba(6, 107, 180, 0.65) 0%,
    rgba(1, 86, 119, 0.3) 40%,
    transparent 75%
  ),
  radial-gradient(
    ellipse 150% 55% at 50% 120%,
    rgba(0, 131, 187, 0.3) 0%,
    transparent 70%
  ),
  linear-gradient(
    180deg,
    #00263d 0%,
    #002739 25%,
    #010b10 50%,
    #002739 75%,
    #00263d 100%
  );
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  border: 1px solid #0a4a6e;
  border-radius: .75rem;
  border-left: 3px solid var(--logo-orange);
    
}

.iir-contact-box,
.btn-close-box {
  transition: all 0.5s ease !important;
  cursor: pointer;
}

.iir-contact-box:hover,
.btn-close-box.hovered {
  transform: translateY(-10px) !important;
}

.iir-contact-box-container:not(.opacity-100) {
  pointer-events: none;
}

.iir-contact-modal .iir-hubspot-form .iir-hubspot-form-left {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .iir-contact-modal .iir-hubspot-form .iir-hubspot-form-inner {
    min-height: 647px;
  }
}

.iir-contact-icon-circle {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #0a4a6e;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(0, 165, 181, 0.16) 0%,
      rgba(0, 165, 181, 0.05) 45%,
      transparent 72%
    );

  box-shadow:
    inset 0 0 14px rgba(0, 165, 181, 0.12),
    0 0 12px rgba(0, 165, 181, 0.18);
}

/* Contact Us Modal / Hubspot Form */

.iir-contact-modal .iir-hubspot-form .iir-hubspot-form-right {
background:
  radial-gradient(
    ellipse 180% 70% at 50% -20%,
    rgba(48, 119, 170, 0.65) 0%,
    rgba(26, 83, 130, 0.3) 40%,
    transparent 75%
  ),
  radial-gradient(
    ellipse 150% 55% at 50% 120%,
    rgba(1, 103, 154, 0.3) 0%,
    transparent 70%
  ),
  linear-gradient(
    180deg,
    #002034 0%,
    #001b2c 50%,
    #00070b 100%
  );
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
border-bottom: 1px solid #0a4a6e;
border-right: 1px solid #0a4a6e;
border-top: 1px solid #0a4a6e;
}

.iir-contact-modal .iir-hubspot-form .iir-hubspot-form-left {
  border-left: 4px solid var(--logo-orange);
  border-top: 1px solid #0a4a6e;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom: 1px solid #0a4a6e;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(1, 11, 16, 0.975) 0%,
      rgba(1, 11, 16, 0.811) 35%,
      rgba(1, 11, 16, 0.685) 65%,
      rgba(1, 11, 16, 0.135) 100%
    ),
    url("https://media.industrialinfo.com/contact/contact-form-message-1.webp")
      center/cover no-repeat;
}

.iir-contact-link {
  transition: color 0.2s ease;
}
.iir-contact-link:hover,
.iir-contact-link:focus {
  color: var(--logo-orange) !important;
}

.iir-contact-eyebrow {
  border: 1px solid var(--logo-orange);
  border-radius: 50rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.iir-contact-rule {
  width: 6rem;
  height: 3px;
  margin: 0;
  border: 0;
  opacity: 1;
  background: var(--logo-orange);
}

.iir-contact-method-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a4a6e;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 35%,
    rgba(0, 165, 181, 0.16) 0%,
    transparent 72%
  );
}

/* Overriding Hubspot CSS */

.iir-contact-modal .iir-hubspot-form fieldset {
  max-width: 100% !important;
  border: none !important;
}

.iir-contact-modal .iir-hubspot-form .hs-form-field {
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0;
}

.iir-contact-modal .iir-hubspot-form .hs-fieldtype-textarea {
  margin-bottom: 0;
}

.iir-contact-modal .iir-hubspot-form input::placeholder,
.iir-contact-modal .iir-hubspot-form textarea::placeholder {
  font-size: 0.8rem;
}

.iir-contact-modal .iir-hubspot-form .hs-firstname,
.iir-contact-modal .iir-hubspot-form .hs-company,
.iir-contact-modal .iir-hubspot-form .hs-email {
  padding-right: 1rem;
}

.iir-contact-modal .iir-hubspot-form .hs-lastname,
.iir-contact-modal .iir-hubspot-form .hs-jobtitle,
.iir-contact-modal .iir-hubspot-form .hs-phone {
  padding-left: 1rem;
}

.iir-contact-modal .iir-hubspot-form .input {
  margin: 0 !important;
  background: none !important;
  width: 100% !important;
}

.iir-contact-modal .iir-hubspot-form .input input {
  height: 2.4375rem !important;
  padding: 0.5rem !important;
}

.iir-contact-modal .iir-hubspot-form .input input,
.iir-contact-modal .iir-hubspot-form .input textarea {
  border-radius: 5px;
  background-color: #fff;
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
}

.iir-contact-modal .iir-hubspot-form .input {
  margin-right: 0 !important;
}

.iir-contact-modal .iir-hubspot-form .hs-error-msgs {
  color: #fff;
  margin-bottom: 0 !important;
  list-style: none;
}

.iir-contact-modal .iir-hubspot-form .hs-error-msgs .hs-error-msg {
  line-height: 1;
  padding-top: 0.25rem;
}

.iir-contact-modal .iir-hubspot-form .hs-error-msgs label {
  color: #6ff !important;
  font-weight: bold !important;
  font-size: 0.75rem !important;
}

.iir-contact-modal .iir-hubspot-form .form-columns-1 {
  margin-bottom: 0 !important;
}

.iir-contact-modal .iir-hubspot-form .form-columns-2:nth-child(5) {
  display: none;
}

.iir-contact-modal .iir-hubspot-form textarea {
  width: 100% !important;
  height: 8rem !important;
}

.iir-contact-modal .iir-hubspot-form .hs-recaptcha {
  display: none;
}

.iir-contact-modal .iir-hubspot-form .hs-submit {
  margin-top: 1.25rem !important;
}

.iir-contact-modal .iir-hubspot-form .hs-button {
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1;
  padding: 0.75rem 0;
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: #6ff;
  border: 1px solid #6ff;
  color: #00263d;
  border-radius: 5px;
}

.iir-contact-modal .iir-hubspot-form .hs-button:hover {
  background-color: #0094a2;
  border: 1px solid #0094a2;
  color: #6ff;
}

.iir-hubspot-form-right .hs-submit-btn {
  background: linear-gradient(
    180deg,
    #0a4a6e 0%,
    #001828 50%,
    #0a4a6e 100%
  ) !important;
  border-color: #00426b !important;
  color: #fff !important;
  font-size: 0.85rem !important;
}

.iir-hubspot-form-right .hs-submit-btn:hover,
.iir-hubspot-form-right .hs-submit-btn:focus,
.iir-hubspot-form-right .hs-submit-btn:active {
  background: linear-gradient(
    180deg,
    #003c61 0%,
    #001828 50%,
    #003c61 100%
  ) !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
  border-color: #0a4a6e !important;
  
  color: #fff !important;
}

/* Hubspot Thank You Message */

.iir-contact-modal .iir-hubspot-form .hbspt-form .submitted-message span {
  font-family: var(--bs-font-sans-serif) !important;
}

.iir-contact-modal .iir-hubspot-form .hbspt-form .submitted-message a {
  color: #6ff;
  text-decoration: none;
}

.iir-contact-modal .iir-hubspot-form .hbspt-form .submitted-message img {
  border-radius: 5px;
  transition: all 0.5s ease;
}

.iir-contact-modal .iir-hubspot-form .hbspt-form .submitted-message img:hover {
  box-shadow: #6fffff50 0px 0px 15px 5px;
}

@media (max-width: 991.98px) {
  .iir-contact-modal .iir-hubspot-form img {
    width: 60% !important;
  }

  .iir-contact-modal .iir-hubspot-form .iir-hubspot-form-right {
    border-radius: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .iir-contact-modal .iir-hubspot-form .hs-firstname,
  .iir-contact-modal .iir-hubspot-form .hs-company,
  .iir-contact-modal .iir-hubspot-form .hs-email,
  .iir-contact-modal .iir-hubspot-form .hs-lastname,
  .iir-contact-modal .iir-hubspot-form .hs-jobtitle,
  .iir-contact-modal .iir-hubspot-form .hs-phone {
    padding: 0;
  }

  .iir-contact-modal .iir-hubspot-form .form-columns-2 {
    display: flex;
    gap: 1rem;
  }
}