/* ========================================
   SUBSCRIBE PAGE ENHANCED STYLING
   ======================================== */
/* Hero Banner Styling */
.hero-banner-subscribe {
  width: 100vw;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 30px;
  background: linear-gradient(180deg, #F0E4D4 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 0%);
}
.hero-banner-subscribe__content {
  width: 100%;
  height: 400px;
  display: flex;
  margin: auto;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  /* Force hardware acceleration */
}
.hero-banner-subscribe__content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding-top: 50px;
}
/* Page Container with enhanced styling */
.subscribe-page {
  max-width: 700px;
  margin: auto;
  padding: 30px 0 60px;
  text-align: center;
}
.subscribe-page__content {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Enhanced heading with better typography and animation */
h3#h3-subs1 {
  font-size: 58px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #333f48;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}
/* Enhanced paragraph styling */
p#p-subs1 {
  font-size: 16px;
  font-weight: 400;
  color: #333f48;
  text-wrap-style: balance;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
}
/* Fade in animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Form container styling - centered */
.subscribe-page__form {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}
/* ========================================
   HUBSPOT FORM FIELD STYLING - TARGETING ACTUAL STRUCTURE
   ======================================== */
/* Target the HubSpot form container */
.hs-form-fe9499fe-e7c2-4bff-a9fc-aa8f07adf343_76ec89c1-606b-479b-8900-e398cf2c2610 fieldset {
  max-width: 600px !important;
}
/* Target the form element */
.hs-form-private {
  width: 100% !important;
  margin: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Target fieldsets for layout */
.hs-form-private fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 600px !important;
}
/* Target form columns */
.form-columns-1,
.form-columns-2 {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: nowrap;
}
.form-columns-1 .hs-form-field {
  flex: 1 1 100% !important;
}
.form-columns-2 .hs-form-field {
  flex: 1 1 50% !important;
}
/* Target individual form fields */
.hs-form-field {
  margin-bottom: 5px !important;
}
/* Hide labels */
/* Target input containers */
.hs-form-field .input {
  width: 100% !important;
}
/* Target all input types - base styling */
.hs-form-field input[type="text"],
.hs-form-field input[type="email"],
.hs-form-field input[type="tel"],
.hs-form-field select,
.hs-form-field textarea {
  width: 100% !important;
  border: 1px solid #e8e9ea00 !important;
  background: #b2b4b242 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #333F48 !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
  min-height: 44px !important;
}
/* Hover effect for form inputs */
.hs-form-field input[type="text"]:hover,
.hs-form-field input[type="email"]:hover,
.hs-form-field input[type="tel"]:hover,
.hs-form-field select:hover,
.hs-form-field textarea:hover {
  border-color: #333f48 !important;
}
/* Hover effect for form inputs */
.hs-form-field input[type="text"]:focus,
.hs-form-field input[type="email"]:focus,
.hs-form-field input[type="tel"]:focus,
.hs-form-field select:focus,
.hs-form-field textarea:focus {
  border-color: #00a7b5 !important;
}
/* Specific border-radius for each field */
/* First Name Field */
.hs-form-field.hs_firstname input {
  border-radius: 15px 0 0 0 !important;
}
/* Last Name Field */
.hs-form-field.hs_lastname input {
  border-radius: 0 15px 0 0 !important;
}
/* Email Field */
.hs-form-field.hs_email input {
  border-radius: 0 !important;
}
/* Industry Role Field */
.hs-form-field.hs_industry_role select {
  border-radius: 0 !important;
}
.hs-form-field.hs_profession___other input {
  border-radius: 0 0 15px 15px !important;
}
/* Focus states only */
.hs-form-field input:focus,
.hs-form-field select:focus,
.hs-form-field textarea:focus {
  border-color: #00a7b5 !important;
  background: #ffffff !important;
  outline: none !important;
}
/* Placeholder styling */
.hs-form-field input::placeholder,
.hs-form-field textarea::placeholder {
  color: #333F48 !important;
  font-size: 14px !important;
}
/* Target select dropdowns specifically */
.hs-form-field select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}
/* Target checkbox fields - container styling */
.hs-form-field.hs-fieldtype-booleancheckbox {
  margin-top: 20px !important;
  padding: 20px !important;
  border: 1px solid #e8e9ea !important;
  background: #fff !important;
  border-radius: 14px !important;
  position: relative !important;
}
/* Add privacy text after checkbox using pseudo-element */
.hs-form-field.hs_edm_privacy_statement::after {
  content: "We respect your privacy. Any personal information that you provide will be collected, used and disclosed for the purpose of assisting you with your enquiry or for any purpose you consent to. You can view further details on how we manage personal information in our privacy policy." !important;
  display: block !important;
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.4 !important;
  margin-top: 15px !important;
  padding-top: 15px !important;
  border-top: 1px solid #e8e9ea !important;
  text-align: left !important;
  font-weight: 400 !important;
}
.hs-form-field.hs-fieldtype-booleancheckbox .inputs-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hs-form-field.hs-fieldtype-booleancheckbox .hs-form-booleancheckbox {
  margin: 0 !important;
}
.hs-form-field.hs-fieldtype-booleancheckbox .hs-form-booleancheckbox-display {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 0px !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-align: left !important;
}
.hs-form-field.hs-fieldtype-booleancheckbox input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #333f48 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border: 2px solid #e8e9ea !important;
  border-radius: 4px !important;
}
.hs-form-field.hs-fieldtype-booleancheckbox input[type="checkbox"]:hover {
  cursor: pointer !important;
}
.hs-form-field.hs-fieldtype-booleancheckbox span {
  font-size: 14px !important;
  color: #333f48 !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}
/* Target richtext content */
.hs-form-field.hs-richtext {
  margin-bottom: 15px !important;
  padding-top: 15px !important;
}
.hs-form-field.hs-richtext p {
  font-size: 12px !important;
  color: #666 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
/* Target submit button - more engaging */
.hs_submit {
  margin-top: 20px !important;
  display: flex;
  justify-content: center;
}
.hs_submit .actions {
  width: 100% !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hs_submit .hs-button {
  width: fit-content !important;
  background: linear-gradient(to bottom, #00a7b5 0%, #00a7b5 50%, #333f48 50%, #333f48 100%);
  background-size: 100% 200%;
  border: none !important;
  border-radius: 30px !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.hs_submit .hs-button:hover {
  background-position: 0 100%;
  color: #ffffff;
}
.hs_submit .hs-button:active {
  transform: translateY(0) !important;
}
/* Target reCAPTCHA container - make invisible */
.hs_recaptcha {
  margin-top: 20px !important;
  display: none !important;
}
.hs_recaptcha .grecaptcha-badge {
  display: none !important;
}
label.hs-error-msg.hs-main-font-element,
label.hs-main-font-element {
  text-align: left !important;
  color: #94193b !important;
  font-size: 13px !important;
}
fieldset.form-columns-0 {
  padding-top: 30px !important;
}
/* ========================================
   RESPONSIVE STYLING
   ======================================== */
/* Mobile and small screen styles (1px - 750px) */
@media screen and (max-width: 750px) {
  /* Hero Banner mobile adjustments */
  .hero-banner-subscribe {
    padding: 0 15px;
  }
  .hero-banner-subscribe__content {
    height: 300px;
  }
  .hero-banner-subscribe__content img {
    height: 100%;
    object-fit: contain;
  }
  /* Container adjustments for mobile */
  .subscribe-page {
    padding: 0px 15px 40px;
    max-width: 100%;
    width: 100%;
  }
  /* Form container full width */
  .subscribe-page__form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Smaller heading for mobile */
  h3#h3-subs1 {
    font-size: 36px;
    margin-bottom: 10px;
  }
  /* Smaller paragraph for mobile */
  p#p-subs1 {
    font-size: 14px;
  }
  /* Form field adjustments for mobile */
  .hs-form-field input[type="text"],
  .hs-form-field input[type="email"],
  .hs-form-field input[type="tel"],
  .hs-form-field select,
  .hs-form-field textarea {
    padding: 10px 15px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    width: 100% !important;
  }
  /* Smaller placeholder text */
  .hs-form-field input::placeholder,
  .hs-form-field textarea::placeholder {
    font-size: 13px !important;
  }
  /* Adjust form columns for mobile */
  .form-columns-1,
  .form-columns-2 {
    flex-direction: column !important;
    gap: 0px !important;
    width: 100% !important;
  }
  .form-columns-2 .hs-form-field {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  /* Smaller border radius for mobile */
  .hs-form-field.hs_firstname input {
    border-radius: 15px 15px 0 0 !important;
  }
  .hs-form-field.hs_lastname input {
    border-radius: 0 0 0 0 !important;
  }
  /* Checkbox container adjustments */
  .hs-form-field.hs-fieldtype-booleancheckbox {
    padding: 15px !important;
    border-radius: 15px !important;
    width: 100% !important;
  }
  /* Smaller checkbox text */
  .hs-form-field.hs-fieldtype-booleancheckbox span {
    font-size: 12px !important;
  }
  /* Smaller privacy text */
  .hs-form-field.hs_edm_privacy_statement::after {
    font-size: 12px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  /* Smaller richtext content */
  .hs-form-field.hs-richtext p {
    font-size: 12px !important;
  }
  /* Button adjustments for mobile */
  .hs_submit .hs-button {
    padding: 10px 16px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    width: 100% !important;
  }
  /* Error message adjustments */
  label.hs-error-msg.hs-main-font-element,
  label.hs-main-font-element {
    font-size: 11px !important;
  }
  /* HubSpot form container adjustments */
  .hs-form-fe9499fe-e7c2-4bff-a9fc-aa8f07adf343_76ec89c1-606b-479b-8900-e398cf2c2610 fieldset {
    max-width: 100% !important;
    width: 100% !important;
  }
  .hs-form-private fieldset {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Ensure all form elements are full width */
  .hs-form-private {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hs-form-field {
    width: 100% !important;
  }
  .hs-form-field .input {
    width: 100% !important;
  }
  .hs_submit {
    margin-top: 10px !important;
  }
}