/*  
---------------------------------------------------
Contact Form
---------------------------------------------------  
*/

/*
.form.contact-form { }*/

.contact-section {
  max-width: 1160px;
  margin: 0 auto;
}
/* Target the container that holds the fieldsets */
.umbraco-forms-page {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* spacing between columns */
}

/* Make each fieldset take half width */
.umbraco-forms-fieldset:first-child {
  flex: 1 1 40%; /* grow, shrink, base width */
  box-sizing: border-box;
}

.umbraco-forms-fieldset:nth-child(2) {
  flex: 1 1 58%; /* grow, shrink, base width */
  box-sizing: border-box;
}

.umbraco-forms-field.title p {
    font-size: 18px;
    line-height: 130%;
    margin: 0;
}

.umbraco-forms-field.title2 p, p.title2 {
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
    line-height: 130%;
    margin: 0;
    margin-top: 40px;
    max-width: 300px;
}

p.title2 {
  margin-top: 0px;
  max-width: unset;
}

.umbraco-forms-field.content ul {
  margin: 0;
  margin-bottom: 40px;
}

.umbraco-forms-field.content ul li {
  line-height: 32px;
  margin-top: 24px;
  vertical-align: middle;
}

/* Put first name and last name fields side by side */
.umbraco-forms-field.firstname,
.umbraco-forms-field.lastname {
  display: inline-block;
  width: 47.6%;       /* half width with a bit of gap */
  vertical-align: top;
  box-sizing: border-box;
}

/* Add spacing between them */
.umbraco-forms-field.firstname {
  margin-right: 4%;
}

.umbraco-forms-field .umbraco-forms-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #42919F;
    text-transform: uppercase;
}

.umbraco-forms-field input, .umbraco-forms-field select, .umbraco-forms-field textarea {
    border-radius: 8px!important;
    border-color: #C5C5C5!important;
    color: black!important;
    font-size: 16px!important;
}

.umbraco-forms-field input:focus, .umbraco-forms-field select:focus, .umbraco-forms-field textarea:focus {
    border-color: #00ACC6!important;
}

.subscribetoournewsletterforhealthcareprofessionals label {
    text-transform: none!important;
    color: black!important;
    font-size: 14px!important;
    font-weight: 400!important;
}
.bysubmittingthisform {
    font-size: 14px!important;
    color: #000!important;
}

/* Target Umbraco form submit buttons */
.umbraco-forms-container input[type="submit"],
.umbraco-forms-container button[type="submit"] {
  display: block;
  width: 100%;                 /* full width of form */  
  padding: 12px 24px;          /* vertical / horizontal padding */
  font-size: 1rem;             /* adjust to match Figma */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  color: #fff;                 /* white text */
  background-color: #00ACC6;   /* CTA color from design */
  
  border: none;
  border-radius: 100px;        /* pill shape */
  
  cursor: pointer;
  transition: background-color 0.3s ease;
    position: relative;          /* for triangle icon */
}

/* Hover state */
.umbraco-forms-container input[type="submit"]:hover,
.umbraco-forms-container button[type="submit"]:hover {
  background-color: #0090a8; /* slightly darker shade */
}

.submit-wrapper {
  position: relative; /* so we can position the triangle inside */
  display: inline-block;
  width: 100%; /* make it full width of the right column */
}

.submit-wrapper::after {
  content: "\f284"; /* your Font Awesome triangle */
  font-family: "Ionicons";
  font-weight: 900; /* needed for solid icons */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* so clicks pass through to the button */
  font-size: 1rem;
  color: #fff; /* same color as text */
  z-index: 1; /* ensure it appears above button */
  right: calc(calc(100% - 100px) / 2);
}

@media (max-width: 985px) {
  .umbraco-forms-fieldset {
    flex: 1 1 100%; /* full width */
  }
  .umbraco-forms-field.firstname,
  .umbraco-forms-field.lastname {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .contact-section .umbraco-forms-navigation {
    display: none;
  }
}

@media (max-width: 767px) {

}
#resourceMediaForm .umbraco-forms-container {
    margin: 0 auto;
    max-width: 1260px;
}

#resourceMediaForm .umbraco-forms-field .radiobuttonlist.radiobuttonlist-vertical > div {
    flex: 1 1 0 !important;
}
#resourceMediaForm .umbraco-forms-field .radiobuttonlist.radiobuttonlist-vertical {
    flex-wrap: wrap;
}
.email-cta-block__row {
    background: #05a9b9 !important;
}
.email-field__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding: 40px 24px 0 20px;
    max-width: 1260px;
    margin: 0 auto;
}
.email-cta-block__right {
    max-width: 1260px;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    padding: 0 24px 40px 24px;
}
    .email-cta-block__right .btn {
        width: 157px;
        border-radius: 100px;
        border-width: 1px;
        padding-top: 8px;
        padding-right: 16px;
        padding-bottom: 8px;
        padding-left: 16px;
        gap: 4px;
    }
.email-field__tooltip {
    color: #fff;
}
.email-field__tooltip-title {
    margin-bottom: 8px;
    font-family: Montserrat;
    font-weight: 700;
    font-style: Italic;
    font-size: 22px;
}
.email-field__tooltip-desc{
  font-size:18px;
  line-height:1.5;
}

.email-field__label-input .umbraco-forms-label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color: #fff;
}
.email-field__label-input .umbraco-forms-field-wrapper input{
  width:100%;
}

@media (max-width:768px){
  .email-field__row{ grid-template-columns: 1fr; }
}
