.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-13210 .elementor-element.elementor-element-5699a5f{text-align:center;}.elementor-13210 .elementor-element.elementor-element-5699a5f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;color:var( --e-global-color-8fc6318 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-13210 .elementor-element.elementor-element-9e00b4c{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-13210 .elementor-element.elementor-element-0d64e3c > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-13210 .elementor-element.elementor-element-0d64e3c > .elementor-container{max-width:1240px;}.elementor-13210 .elementor-element.elementor-element-0d64e3c{padding:0px 16px 0px 16px;}.elementor-bc-flex-widget .elementor-13210 .elementor-element.elementor-element-687937a.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-13210 .elementor-element.elementor-element-687937a.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:24px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-24px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group > label, .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-subgroup label{color:#FFFFFF;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-type-html{padding-bottom:0px;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;text-transform:none;font-style:normal;text-decoration:none;line-height:26px;letter-spacing:-0.15px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group .elementor-field, .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-subgroup label{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:500;text-transform:none;font-style:normal;text-decoration:none;line-height:1.4em;letter-spacing:-0.15px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FFFFFF00;border-color:#FFFFFF;border-width:0px 0px 1px 0px;border-radius:0px 0px 0px 0px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group .elementor-select-wrapper select{background-color:#FFFFFF00;border-color:#FFFFFF;border-width:0px 0px 1px 0px;border-radius:0px 0px 0px 0px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group .elementor-select-wrapper::before{color:#FFFFFF;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-button{font-family:"Poppins", Sans-serif;font-weight:600;letter-spacing:0.5px;border-style:none;border-radius:100px 100px 100px 100px;padding:9px 50px 8px 50px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .e-form__buttons__wrapper__button-next{background-color:#FFFFFF;color:var( --e-global-color-8fc6318 );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-button[type="submit"]{background-color:#FFFFFF;color:var( --e-global-color-8fc6318 );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-button[type="submit"] svg *{fill:var( --e-global-color-8fc6318 );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .e-form__buttons__wrapper__button-next:hover{background-color:var( --e-global-color-faf8a2a );color:var( --e-global-color-5aaeaba );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-button[type="submit"]:hover{background-color:var( --e-global-color-faf8a2a );color:var( --e-global-color-5aaeaba );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-button[type="submit"]:hover svg *{fill:var( --e-global-color-5aaeaba );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-message{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:400;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-message.elementor-message-success{color:#FFFFFF;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-message.elementor-message-danger{color:#FFFFFF;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-message.elementor-help-inline{color:#FFFFFF;}.elementor-13210 .elementor-element.elementor-element-515a4a2{--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;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-13210 .elementor-element.elementor-element-0d64e3c{padding:40px 32px 40px 32px;}.elementor-13210 .elementor-element.elementor-element-687937a > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-type-html{font-size:16px;line-height:22px;}.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-group .elementor-field, .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-field-subgroup label{font-size:16px;line-height:22px;}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-13210 .elementor-element.elementor-element-0d64e3c{padding:70px 20px 70px 20px;}.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for form, class: .elementor-element-515a4a2 *//* =========================================================================
   MSDI CANCUN 2027 - complete page Custom CSS  (v5)

   WHERE THIS GOES
   Elementor > gear icon (bottom left) > Advanced > Custom CSS
   Delete whatever is in that box and paste this whole file. Rules only -
   no <style> tags.

   WHAT IT COVERS
   1. Form section: title, subtitle, centred form card, two-column fields
   2. Hover behaviour: buttons no longer jump on hover

   ".elementor-13210 .elementor-element.elementor-element-515a4a2" is an Elementor keyword meaning "this page", so the footer
   newsletter form and the popup form are never affected.

   After pasting: Update > clear ezCache > Elementor > Tools >
   Regenerate CSS & Data > hard reload (Cmd+Shift+R / Ctrl+F5).
   ========================================================================= */


/* =========================================================================
   1. FORM SECTION
   Assumes the section contains, in this order:
     Heading widget (title) - Text Editor widget (subtitle) - Form widget
   ========================================================================= */

/* ---- Section title, matching the other section headers ---- */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-heading .elementor-heading-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: #185fa5;
  text-align: center;
  line-height: 1.25;
  padding-bottom: 1rem;
  margin: 0 auto 1rem;
  position: relative;
  display: block;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-heading .elementor-heading-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #185fa5, #0f6e56);
  border-radius: 2px;
}

/* ---- Subtitle ---- */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-text-editor {
  font-size: 15px !important;
  color: #5f5e5a !important;
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-text-editor p {
  font-size: 15px !important;
  color: #5f5e5a !important;
  margin: 0;
}

/* ---- The form, centred ---- */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form {
  background: #ffffff;
  border: 2px solid #185fa5;
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(24, 95, 165, 0.10);
}

/* ---- Two-column field layout ---- */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin: 0 !important;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-group {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hidden plumbing must not occupy a grid cell */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-type-hidden,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-type-recaptcha_v3,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .maspik-field {
  display: none !important;
}

/* Message and submit button span the full width */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-type-textarea,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .e-form__buttons {
  grid-column: 1 / -1;
}

/* ---- Fields ---- */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-textual {
  width: 100%;
  border: 2px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 0.9rem 1rem !important;
  font-size: 15px !important;
  line-height: 1.4;
  color: #2c2c2a !important;
  background: #ffffff !important;
  min-height: 52px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-textual:hover {
  border-color: #b9d3e9 !important;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-textual:focus {
  border-color: #185fa5 !important;
  background: #f0f6fb !important;
  outline: none !important;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-textual::placeholder {
  color: #8a8a86 !important;
  opacity: 1;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form textarea.elementor-field-textual {
  min-height: 96px;
  resize: vertical;
}

/* ---- Submit button ---- */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-button[type="submit"] {
  width: 100%;
  padding: 1.2rem !important;
  background: linear-gradient(135deg, #185fa5 0%, #0f6e56 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-button[type="submit"]:hover {
  box-shadow: 0 12px 28px rgba(24, 95, 165, 0.30);
  filter: brightness(1.08);
}

/* ---- Validation and success messages ---- */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-message {
  grid-column: 1 / -1;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  font-size: 15px;
  margin-top: 0.5rem;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-message-success {
  background: #eaf6f1;
  border: 1px solid #b7ded0;
  color: #0f6e56;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-message-danger {
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #a42121;
}

.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-field-textual.elementor-error {
  border-color: #dc0a3c !important;
}


/* =========================================================================
   2. HOVER BEHAVIOUR
   Buttons keep their colour change but stop moving and never underline.
   Cards still lift - uncomment the three card lines below to stop those too.
   ========================================================================= */

/* No underline on any link inside the page blocks (theme adds one) */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx a:hover,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx a:focus,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx-sticky a:hover,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx-sticky a:focus {
  text-decoration: none !important;
}

/* Nothing slides upward on hover */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .hero__links a:hover,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .hero-bar a:hover,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .btn-catalog:hover,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .cta-band a:hover,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .footer-links a:hover,
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx-sticky a:hover,
/* .elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .feature-card:hover, */
/* .elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .topic-card:hover, */
/* .elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .speaker-card:hover, */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-button[type="submit"]:hover {
  transform: none !important;
}

/* The hero image zooms slightly on hover - this stops it */
.elementor-13210 .elementor-element.elementor-element-515a4a2 .msdi-cx .hero:hover .hero__img {
  transform: none !important;
}


/* =========================================================================
   3. MOBILE
   ========================================================================= */

@media (max-width: 767px) {
  .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form {
    padding: 1.5rem;
    border-radius: 14px;
  }

  .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-form .elementor-form-fields-wrapper {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-text-editor,
  .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-text-editor p {
    font-size: 14px !important;
  }

  .elementor-13210 .elementor-element.elementor-element-515a4a2 .elementor-widget-text-editor {
    margin-bottom: 1.75rem;
  }
}/* End custom CSS */
/* Start custom CSS *//* =========================================================================
   MSDI CANCUN 2027 - page Custom CSS  (v27 - post-send card: white, blue buttons)

   WHERE THIS GOES
   Elementor > gear icon (bottom left) > Advanced > Custom CSS
   Delete whatever is in that box and paste this whole file. Rules only -
   no <style> tags.

   v23 ADDS section 8 - the post-send WhatsApp / Calendly panel - and
   changes the scope so this file works on ANY page it is pasted into.

   The success panel is GREEN, not blue. It sits directly beneath the SEND
   button, and in blue the two read as a pair of buttons rather than an
   action and its result.

   Colours and fonts match HTML WIDGET 1: Poppins throughout.
   #060C61 (MSDI main 1) carries headings and text.
   #168DD0 (MSDI main 2) carries buttons, borders and links.

   IMPORTANT - why this uses #content instead of "body.elementor-page-13210" or a page ID

   Two problems, one answer.

   First: in Page Settings, Elementor expands "body.elementor-page-13210" to the whole page
   body, so rules aimed at headings, text editors and forms were also
   hitting the site header and footer.

   Second: the earlier fix for that was .elementor-13210, the wrapper of
   the /cancun_2/ page. That is tied to one post ID, so the moment this
   file was pasted into a different page the body.elementor-page-13210s matched nothing and
   the form rendered completely unstyled.

   #content is the theme's <main> element. The header, the footer and the
   Elementor popup all sit OUTSIDE it, so they keep their own styling, and
   every page's content sits INSIDE it, so this file works wherever it is
   pasted. Nothing to find and replace when the page ID changes.

   It also raises specificity - an id outranks any class - so a few of the
   !important flags below are no longer strictly needed. Harmless, left in.

   WHAT IT COVERS
   1. The form section: title, subtitle, centred card, two-column fields,
      and the success / error / sending message states
   2. Mobile spacing for the form block
   3. No movement on hover - CARDS ONLY
   4. Collapsing the stacked Elementor section padding around the form
   5. Video thumbnails (the play button itself moved to WIDGET 1)
   6. The CTA buttons - hero pills AND the mobile sticky bar, one treatment
   7. Hover and scroll reveal
   8. The post-send panel - WhatsApp and Calendly, below the form

   HOVER, IN ONE PLACE: section 7 owns every deliberate hover on the page.
   Section 3 and the lock in WIDGET 1 exist to stop the THEME moving things
   on its own; they no longer stop us. If a hover looks wrong, section 7 is
   where to look.

   After pasting: Update > clear ezCache > Elementor > Tools >
   Regenerate CSS & Data > hard reload (Cmd+Shift+R / Ctrl+F5).
   ========================================================================= */


/* =========================================================================
   1. FORM SECTION
   Assumes the section contains, in this order:
     Heading widget (title) - Text Editor widget (subtitle) - Form widget
   ========================================================================= */

/* ---- Section title, matching the other section headers ---- */
#content .elementor-widget-heading .elementor-heading-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: #060C61;
  text-align: center;
  line-height: 1.25;
  padding-bottom: 1rem;
  margin: 0 auto 1rem;
  position: relative;
  display: block;
}

#content .elementor-widget-heading .elementor-heading-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #168DD0, #060C61);
  border-radius: 2px;
}

/* ---- Subtitle ---- */
#content .elementor-widget-text-editor {
  font-size: 15px !important;
  color: #5f5e5a !important;
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

#content .elementor-widget-text-editor p {
  font-size: 15px !important;
  color: #5f5e5a !important;
  margin: 0;
}

/* ---- The form, centred ---- */
#content .elementor-widget-form {
  background: #ffffff;
  border: 2px solid #168DD0;
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(6, 12, 97, 0.12);
}

/* ---- Two-column field layout ---- */
#content .elementor-widget-form .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin: 0 !important;
}

#content .elementor-widget-form .elementor-field-group {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hidden plumbing must not occupy a grid cell */
#content .elementor-widget-form .elementor-field-type-hidden,
#content .elementor-widget-form .elementor-field-type-recaptcha_v3,
#content .elementor-widget-form .maspik-field {
  display: none !important;
}

/* Message and submit button span the full width */
#content .elementor-widget-form .elementor-field-type-textarea,
#content .elementor-widget-form .e-form__buttons {
  grid-column: 1 / -1;
}

/* ---- Fields ---- */
#content .elementor-widget-form .elementor-field-textual {
  width: 100%;
  border: 2px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 0.9rem 1rem !important;
  font-size: 15px !important;
  line-height: 1.4;
  color: #2c2c2a !important;
  background: #ffffff !important;
  min-height: 52px;
  box-shadow: none !important;
  transition: none !important;
}

#content .elementor-widget-form .elementor-field-textual:focus {
  border-color: #168DD0 !important;
  background: #f0f6fb !important;
  outline: none !important;
}

#content .elementor-widget-form .elementor-field-textual::placeholder {
  color: #8a8a86 !important;
  opacity: 1;
}

#content .elementor-widget-form textarea.elementor-field-textual {
  min-height: 96px;
  resize: vertical;
}

/* ---- Submit button ---- */
#content .elementor-widget-form .elementor-button[type="submit"] {
  width: 100%;
  padding: 1.2rem !important;
  background: linear-gradient(135deg, #168DD0 0%, #060C61 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: none !important;
}

/* No reaction to the cursor, matching the rest of the page */
#content .elementor-widget-form .elementor-button[type="submit"]:hover {
  background: linear-gradient(135deg, #168DD0 0%, #060C61 100%) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}


/* ---- MESSAGE STATES   (rewritten in v21) --------------------------------

   Elementor ships all three states as the same pale tinted strip, which is
   easy to miss - and the one moment you cannot afford to be missed is the
   half-second after someone hands over their phone number. The three now
   look nothing like each other:

     SENDING   pale blue, quiet
     SUCCESS   solid blue-to-navy panel, white text, tick above
     ERROR     white panel, red border, red text

   The success panel deliberately reuses the Get quote gradient, so the
   confirmation is visibly the completed form of the button they pressed.

   The tick is an inline SVG in a data URI - no extra file to upload and no
   icon font to load. To change its colour, edit stroke='%23060C61' (the
   %23 is just an encoded #).
   ------------------------------------------------------------------------ */

#content .elementor-widget-form .elementor-message {
  grid-column: 1 / -1;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  margin-top: 1rem;
  text-align: center;
}

/* SUCCESS
   Green, not blue. The panel sits directly under the SEND button and the
   two were the same gradient, which read as a second button rather than a
   result. Green is the one colour that means "done" without a label, and
   it still runs light-to-dark on the same 135deg diagonal as the rest of
   the page, so it belongs to the same family.

   The tick sits to the LEFT of the text, not above it. Stacked, it forced
   the panel to two rows and made a one-line confirmation the tallest thing
   on the form. Flex puts them on one line and the box stays short. */
#content .elementor-widget-form .elementor-message-success {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.85rem !important;
  background: linear-gradient(135deg, #2FB37E 0%, #0B6B4F 100%) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 1.3rem 1.5rem !important;
  text-align: left !important;
  box-shadow: 0 6px 20px rgba(11, 107, 79, 0.28);
}

#content .elementor-widget-form .elementor-message-success::before {
  content: '';
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 50%;
  background: #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6B4F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 17px 17px no-repeat;
}

/* ERROR - clear, but not alarming */
#content .elementor-widget-form .elementor-message-danger {
  background: #ffffff !important;
  border: 2px solid #dc0a3c !important;
  color: #a4102f !important;
  font-weight: 600 !important;
}

/* SENDING */
#content .elementor-widget-form .elementor-message-none {
  background: #eef6fc !important;
  border: 1px solid #b9d9ef !important;
  color: #060C61 !important;
}

/* A field that failed validation */
#content .elementor-widget-form .elementor-field-textual.elementor-error {
  border-color: #dc0a3c !important;
}


/* =========================================================================
   2. MOBILE
   ========================================================================= */

@media (max-width: 767px) {
  #content .elementor-widget-form {
    padding: 1.5rem;
    border-radius: 14px;
  }

  #content .elementor-widget-form .elementor-form-fields-wrapper {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  #content .elementor-widget-text-editor,
  #content .elementor-widget-text-editor p {
    font-size: 14px !important;
  }

  #content .elementor-widget-text-editor {
    margin-bottom: 1.75rem;
  }

  /* Tighter panel on a narrow screen. The tick stays inline - it is the
     stacking that made this tall, not the icon size. */
  #content .elementor-widget-form .elementor-message-success {
    font-size: 14.5px !important;
    padding: 1rem 1.1rem !important;
    gap: 0.7rem !important;
  }

  #content .elementor-widget-form .elementor-message-success::before {
    width: 26px;
    height: 26px;
    background-size: 15px 15px;
  }
}


/* =========================================================================
   3. NO MOVEMENT ON HOVER - CARDS ONLY   (narrowed in v20)

   The cards are not links. Nothing in the feature, topic, speaker,
   schedule or pillar grids goes anywhere when clicked, so lifting them
   under the cursor promises an interaction that does not exist - the most
   common tell of a template. They stay still, deliberately.

   Up to v19 this block also covered every link and button on the page.
   That was never a design decision: it was a blunt way of stopping the
   Elementor kit resizing link text on hover. WIDGET 1 now pins the type
   directly, in every link state, so the kit cannot touch a label - and
   the buttons are free to move on purpose. Section 7 does that.

   Movement properties only. v7 used "position: static" here and that is
   what pushed the hero link text onto the page; not used again.
   ========================================================================= */

#content .msdi-cx .feature-card:hover,
#content .msdi-cx .topic-card:hover,
#content .msdi-cx .speaker-card:hover,
#content .msdi-cx .schedule-item:hover,
#content .msdi-cx .pillar:hover,
#content .msdi-cx .quality__list li:hover,
#content .msdi-cx .hero:hover .hero__img {
  transform: none !important;
  translate: none !important;
  animation: none !important;
}

/* Text never gets an underline anywhere on the page */
#content .msdi-cx a:hover,
#content .msdi-cx-sticky a:hover {
  text-decoration: none !important;
}


/* =========================================================================
   4. FORM SECTION SPACING
   The gap around the form is not the form widget - it is the Elementor
   SECTIONS that hold the title, the subtitle and the form. Each brings its
   own default padding, and on mobile Elementor applies a separate, larger
   value that survives clearing the desktop field. These rules collapse all
   three sections into one tight block and pull the widgets together.

   NOTE: the title, subtitle and form must be direct children of sections
   inside #content for this to apply - they are.
   ========================================================================= */

/* The three sections that make up the form block */
#content .elementor-widget-heading,
#content .elementor-widget-text-editor,
#content .elementor-widget-form {
  margin-block: 0 !important;
}

#content .elementor-widget-heading .elementor-heading-title {
  margin-bottom: 1rem !important;
}

#content .elementor-widget-text-editor {
  margin: 0 auto 40px !important;
}

/* Kill the stacked section padding around title / subtitle / form, then
   put the outer breathing room back on the first and last of the three.

   All three body.elementor-page-13210s below use the SAME :has() chain so they carry equal
   specificity - otherwise the long chain outranks a short one and the
   padding we add back never applies, whatever the order or !important. */
#content .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading),
#content .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor),
#content .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-form) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Breathing room, matching the page scale: 80px desktop / 48px mobile.
   Same number as --gap-section in HTML WIDGET 1 - change both together. */
#content .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading) {
  padding-top: 80px !important;
}

#content .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-form) {
  padding-bottom: 80px !important;
}

/* Fallback for browsers without :has() - Elementor's own column padding */
#content .elementor-widget-wrap {
  padding: 0 !important;
}

@media (max-width: 767px) {
  #content .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading) {
    padding-top: 48px !important;
  }

  #content .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-form) {
    padding-bottom: 48px !important;
  }

  #content .elementor-widget-text-editor {
    margin: 0 auto 28px !important;
  }

  /* Elementor sets a separate mobile padding that the desktop field does
     not clear - this catches it on every section on the page. */
  #content > .elementor-section,
  #content > .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================================================================
   5. VIDEO PLAY BUTTON   (mostly moved to WIDGET 1 in v20)

   The ring, the 44px circle and the triangle's optical offset now live in
   WIDGET 1, next to the rest of the video CSS, so there is one description
   of the shape rather than two that can drift apart.

   The triangle looked off-centre because of a bug in WIDGET 1, not because
   of the numbers here: a rule meant to protect the centring transform said
   "transform: revert", which rolls the property back to the browser
   default - and the browser default is none. The circle and the triangle
   inside it were both sitting offset by half their own size. Fixed there.

   Only the thumbnail opacity stays here.
   ========================================================================= */

/* Thumbnails at full opacity - the old 90% greyed out the faces */
#content .msdi-cx .video-facade img {
  opacity: 1 !important;
}


/* =========================================================================
   6. CTA BUTTONS - HERO PILLS AND STICKY BAR   (updated in v19)

   Two pills in two places. Same shape, same type, same colours - but NOT
   the same second button, and that is deliberate:

     Desktop hero    Get quote  +  Email
     Mobile sticky   Get quote  +  WhatsApp

   Why they differ: wa.link on a desktop without WhatsApp installed ends at
   a QR code the visitor cannot use, so the desktop slot goes to email
   instead. Do not "fix" this by re-unifying them - the split is the point.
   The styling below is shared; only the label and href differ, and those
   live in the HTML widgets.

     Get quote  blue-to-navy gradient fill, white text, SOLID NAVY outline,
                uppercase
     Second     white fill, navy outline, navy text, normal capitalisation

   WHY THE OUTLINE WAS PATCHY BEFORE v18
   The pill had "border: 2px solid transparent". A background paints under
   the border by default (background-clip: border-box), so the "outline"
   was really a 2px slice of the gradient behind it - which changes colour
   as the gradient runs diagonally across the pill, and disappears where
   the gradient is closest to the fill. Naming a real colour, #060C61, is
   the whole fix: one flat line all the way round.

   WHY THE WEIGHTS DID NOT MATCH BEFORE v19
   The hover lock in WIDGET 1 sets font-weight/size/spacing to "inherit" so
   the kit stylesheet cannot resize a link mid-hover. That also wiped the
   700 the sticky bar declares for itself, so the bar rendered at body
   weight while the banner pills - pinned here with !important - stayed
   bold. The shared type rule below now covers BOTH, so they move together.

   IF NOTHING CHANGES: these class names come from HTML WIDGET 1 and 2 -
   .hero__links / .is-primary on the banner, .msdi-cx-sticky / .s-primary /
   .s-alt on the phone bar. Right click a button > Inspect to confirm.
   ========================================================================= */

/* ---- Shared type. One weight for all four buttons: change 700 here and
        the banner and the bar move together, never one without the
        other. ---- */
#content .msdi-cx .hero__links a,
#content .msdi-cx-sticky a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

/* GEOMETRY PIN - this is the other half of the WhatsApp fix.
   Pinning the type stopped the label changing size, but the label was also
   MOVING, and that was padding: the kit sets padding on links in states we
   had not covered, and the sticky bar's own padding is only two classes
   deep, so the kit could outrank it. Restating it here, at three classes
   and !important, means no state can shift the label off centre.

   No pseudo-classes are listed on purpose. An unqualified body.elementor-page-13210 already
   matches the element in every state - link, visited, hover, focus, active
   - so this covers all of them and cannot develop a gap later. */
#content .msdi-cx-sticky a {
  display: block !important;
  padding: 0.85rem 0.5rem !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* The hero pills' half of the same pin is folded into the shape block
   below, so their padding is stated once rather than twice. */

/* ---- Shape. Hero pills only - the sticky bar's buttons are flex children
        that share the bar's width, so they keep their own padding. ---- */
#content .msdi-cx .hero__links a {
  display: inline-block !important;
  padding: 0.85rem 2.2rem !important;
  border-radius: 50px !important;
  border-style: solid !important;
  border-width: 2px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ---- Get quote: gradient fill, solid navy line ---- */
#content .msdi-cx .hero__links a.is-primary,
#content .msdi-cx .hero__links a.is-primary:hover,
#content .msdi-cx .hero__links a.is-primary:focus,
#content .msdi-cx-sticky .s-primary,
#content .msdi-cx-sticky .s-primary:hover,
#content .msdi-cx-sticky .s-primary:focus {
  background: linear-gradient(135deg, #168DD0 0%, #060C61 100%) !important;
  border: 2px solid #060C61 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ---- Second button - Email on desktop, WhatsApp on the bar ----
        text-transform: none is what keeps it "WhatsApp" and not
        "WHATSAPP", and "Email" and not "EMAIL". */
#content .msdi-cx .hero__links a:not(.is-primary),
#content .msdi-cx .hero__links a:not(.is-primary):hover,
#content .msdi-cx .hero__links a:not(.is-primary):focus,
#content .msdi-cx-sticky .s-alt,
#content .msdi-cx-sticky .s-alt:hover,
#content .msdi-cx-sticky .s-alt:focus {
  background: #ffffff !important;
  border: 2px solid #060C61 !important;
  color: #060C61 !important;
  text-transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Keyboard focus stays visible - the only state allowed to change.
   White on the banner so it reads against the photo, blue on the bar. */
#content .msdi-cx .hero__links a:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
}

#content .msdi-cx-sticky a:focus-visible {
  outline: 3px solid #168DD0 !important;
  outline-offset: 3px !important;
}


/* =========================================================================
   7. HOVER AND SCROLL REVEAL   (new in v20)

   WHY THESE RULES SIT HERE AND NOT IN THE WIDGET
   Elementor prints the page Custom CSS in the document head; an HTML
   widget's <style> block is in the body, so the widget wins any tie. To
   beat the lock in WIDGET 1 these body.elementor-page-13210s need to be more specific, and
   the #content prefix supplies exactly that extra class. That is
   the whole reason hover lives in this file.

   WHAT GETS A HOVER, AND WHAT DOES NOT
   Only things that are actually clickable: the two hero pills, the two
   sticky-bar buttons, the catalog button, the form's SEND button, and the
   video play buttons. The card grids get nothing - see section 3.

   The movement is a 3% scale on the whole pill. Because the button moves
   as one object, the label cannot shift inside it - which is what went
   wrong the first time hover was tried on this page and why it was turned
   off. Scale moves everything together; nothing reflows.
   ========================================================================= */

/* ---- The two hero pills ---- */
#content .msdi-cx .hero__links a:hover,
#content .msdi-cx .hero__links a:focus-visible {
  transform: scale(1.03) !important;
  transition: transform 0.18s ease-out !important;
}

#content .msdi-cx .hero__links a {
  transition: transform 0.18s ease-out !important;
}

/* ---- The two sticky-bar buttons ----
        Slightly smaller lift than the hero, because the bar is fixed and
        a big scale there reads as the bar itself moving. */
#content .msdi-cx-sticky a:hover,
#content .msdi-cx-sticky a:focus-visible {
  transform: scale(1.02) !important;
  transition: transform 0.18s ease-out !important;
}

#content .msdi-cx-sticky a {
  transition: transform 0.18s ease-out !important;
}

/* ---- Catalog button ---- */
#content .msdi-cx .btn-catalog {
  transition: transform 0.18s ease-out !important;
}

#content .msdi-cx .btn-catalog:hover,
#content .msdi-cx .btn-catalog:focus-visible {
  transform: scale(1.03) !important;
}

/* ---- Form SEND button ----
        The gradient is restated so the theme cannot repaint it while the
        cursor is down; only the scale is new. */
#content .elementor-widget-form .elementor-button[type="submit"] {
  transition: transform 0.18s ease-out !important;
}

#content .elementor-widget-form .elementor-button[type="submit"]:hover {
  background: linear-gradient(135deg, #168DD0 0%, #060C61 100%) !important;
  transform: scale(1.01) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---- Video play button ----
        The one place a hover does real work: it tells you the thumbnail is
        a button. The ring fills toward solid and grows a little. The
        translate has to be repeated or the scale would knock the circle
        out of its centred position. */
#content .msdi-cx .video-play {
  transition: transform 0.2s ease-out, background 0.2s ease-out !important;
}

#content .msdi-cx .video-facade:hover .video-play,
#content .msdi-cx .video-facade:focus-visible .video-play {
  transform: translate(-50%, -50%) scale(1.12) !important;
  background: rgba(6, 12, 97, 0.55) !important;
}

/* ---- Scroll reveal ----
        The .js-reveal / .is-visible pair is declared in WIDGET 1 so the
        markup and its styling stay together. This block only raises the
        specificity enough to survive the widget's blanket
        "transition: none", which would otherwise make sections appear
        instantly instead of fading. */
#content .msdi-cx .js-reveal,
#content .elementor-widget-form.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out !important;
  will-change: opacity, transform;
}

#content .msdi-cx .js-reveal.is-visible,
#content .elementor-widget-form.js-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* The success message must never fade in from below - it replaces the
   button the moment the form clears, and a delay there reads as failure. */
#content .elementor-widget-form .elementor-message {
  opacity: 1 !important;
  transform: none !important;
}

/* Motion off means motion off - the script skips the reveal entirely for
   these visitors, and this is the belt to that pair of braces. */
@media (prefers-reduced-motion: reduce) {
  #content .msdi-cx .js-reveal,
  #content .elementor-widget-form.js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #content .msdi-cx .hero__links a:hover,
  #content .msdi-cx-sticky a:hover,
  #content .msdi-cx .btn-catalog:hover,
  #content .msdi-cx .video-facade:hover .video-play {
    transition: none !important;
  }
}


/* =========================================================================
   8. POST-SEND PANEL   (rewritten in v27)

   A white card that appears under the form once the form has been sent.
   Markup and the reveal logic live in HTML WIDGET 2.

   WHY WHITE AND NOT GREEN
   The confirmation above it is green, the SEND button above that is blue.
   A third solid block made the whole area heavy, and green twice in a row
   blurred what the green was for. Now the green appears exactly once, on
   the confirmation, where it means "done" - and this card goes back to the
   page's ordinary language: white, thin blue border, blue buttons. Same
   card style as the form itself, so the page has one card, not two.

   WHY IT IS OUTSIDE THE FORM
   Three earlier versions put this inside the form and none could be seen.
   Elementor rewrites the success message on submit, deleting anything
   appended to it; and the Maspik anti-spam plugin appends a honeypot to
   every form carrying the class "maspik-field", hiding anything with that
   class using display: none !important - our block landed inside it. It
   now attaches after the whole form widget, where neither plugin reaches.

   BUTTON SIZE
   15px rather than the 13px used by the hero and sticky pills. Those sit
   on a photo and in a fixed bar; these sit directly under SEND at 16px, so
   13px read as undersized next to it. Still a step down from SEND, which
   is right - that is the primary action, these are the follow-up.
   ========================================================================= */

#content .msdi-post {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 1rem auto 0;
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid #168DD0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(6, 12, 97, 0.12);
  text-align: center;
  box-sizing: border-box;
}

#content .msdi-post[hidden] { display: none !important; }

#content .msdi-post * { box-sizing: border-box; }

/* Maspik hides anything carrying its class. Nothing of ours should ever
   inherit that, wherever the block ends up on the page. */
#content .msdi-post,
#content .msdi-post * {
  visibility: visible !important;
}

/* Navy, like every other heading on the page */
#content .msdi-post__line {
  margin: 0 0 1.1rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #060C61 !important;
}

#content .msdi-post__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Same pill geometry as every other button on the page, at the larger
   size that sits comfortably under SEND. */
#content .msdi-post__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 215px;
  padding: 0.9rem 1.6rem !important;
  border-radius: 50px !important;
  border: 2px solid #060C61 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: transform 0.18s ease-out !important;
}

#content .msdi-post__btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Chat - the SEND gradient, because chatting is the route we would rather
   they took and this is the primary action in the card. */
#content .msdi-post__btn--wa,
#content .msdi-post__btn--wa:link,
#content .msdi-post__btn--wa:visited,
#content .msdi-post__btn--wa:hover,
#content .msdi-post__btn--wa:focus,
#content .msdi-post__btn--wa:active {
  background: linear-gradient(135deg, #168DD0 0%, #060C61 100%) !important;
  color: #ffffff !important;
  border-color: #060C61 !important;
}

/* Call - white with a navy line, the same secondary treatment as the
   WhatsApp button on the mobile sticky bar. */
#content .msdi-post__btn--call,
#content .msdi-post__btn--call:link,
#content .msdi-post__btn--call:visited,
#content .msdi-post__btn--call:hover,
#content .msdi-post__btn--call:focus,
#content .msdi-post__btn--call:active {
  background: #ffffff !important;
  color: #060C61 !important;
  border-color: #060C61 !important;
}

/* Same 3% scale as every other button - see section 7 */
#content .msdi-post__btn:hover,
#content .msdi-post__btn:focus-visible {
  transform: scale(1.03) !important;
}

#content .msdi-post__btn:focus-visible {
  outline: 3px solid #168DD0 !important;
  outline-offset: 3px !important;
}

@media (max-width: 767px) {
  /* Roughly 210px tall on a phone: one line, two stacked full-width
     buttons. The scroll handling in WIDGET 2 centres the card on narrow
     screens, so the confirmation sits just above the top edge. */
  #content .msdi-post {
    margin-top: 0.75rem;
    padding: 1.25rem 1.1rem;
    border-radius: 14px;
  }

  #content .msdi-post__line {
    font-size: 15.5px !important;
    margin-bottom: 0.9rem !important;
  }

  /* Stacked and full width, matching the form fields above - two half
     pills on a phone leaves the labels cramped. */
  #content .msdi-post__actions {
    flex-direction: column;
    gap: 0.6rem;
  }

  #content .msdi-post__btn {
    min-width: 0;
    width: 100%;
    padding: 0.9rem 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #content .msdi-post__btn { transition: none !important; }
  #content .msdi-post__btn:hover { transform: none !important; }
}/* End custom CSS */