/***** FONTS *****/
/*---------------*/

div[role="main"].container-fluid .richtext h1 {
    font-size: 46px;
    line-height: 120%;
    font-weight: 900;
    font-family: Guardian;
    color: #00175a;
  }
  
  div[role="main"].container-fluid .richtext h2 {
    font-size: 40px;
    line-height: 120%;
    font-weight: 900;
    font-family: Guardian;
    color: #00175a;
  }
  
  div[role="main"].container-fluid .richtext h3 {
    font-size: 34px;
    line-height: 120%;
    font-weight: 500;
    font-family: BentonSans;
  }
  
  div[role="main"].container-fluid .richtext h3.small {
    font-size: 24px;
    line-height: 120%;
    font-weight: 500;
    font-family: BentonSans;
  }
  
  div[role="main"].container-fluid .richtext h4 {
    font-size: 24px;
    line-height: 120%;
    font-weight: 300;
    font-family: BentonSans;
  }
  
  /* Body Text */
  div[role="main"].container-fluid .richtext p {
    font-size: 16px;
    line-height: 150%;
  }
  
  /* Mobile */
  @media (max-width: 768px) {
    div[role="main"].container-fluid .richtext h1 {
        font-size: 40px;
        font-weight: 900;
    }
  
    div[role="main"].container-fluid .richtext h2 {
        font-size: 36px;
        font-weight: 900;
    }
  
    div[role="main"].container-fluid .richtext h3 {
        font-size: 28px;
        font-weight: 900;
    }
  
    div[role="main"].container-fluid .richtext h3.small {
        font-size: 24px;
    }
  
    div[role="main"].container-fluid .richtext h4 {
        font-size: 20px;
    }
  
    .heading-6-g {
        font-size: 36px;
    }
  }
  
  /***** SPACING *****/
  /*-----------------*/
  
  /* Main Container */
  div[role="main"].container-fluid.pad-0-lr .tab-content.pad-responsive-lr {
    padding: 0;
  }
  
  /***** HERO *****/
  /*-----------------*/
  
  .vd--hero-corporate .container {
    width: 100%;
  }
  .vd--hero-corporate .vd--hero-content-left {
    max-width: 540px;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .vd--hero-corporate .vd--hero-content-left .container {
    padding: 32px;
  }
  
  .vd--hero-corporate .vd--hero-content-left .dls-white-bg {
    border-radius: 8px;
  }
  .vd--hero-corporate .vd--content-text .container {
    padding: 0 0 24px 0;
  }
  /* .vd--hero-corporate .vd--hero-content-left .parbase .btncomp {
    margin-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: #00175a;
    padding: 19px 25px;
    border-radius: 8px;
  } */
  
  .vd--hero-corporate .vd--hero-content-left .parbase h1 {
    padding-bottom: 12px;
  }
  .vd--hero-corporate .card-img-bg.hidden-md-down,
  .vd--hero-corporate .card-img-bg.hidden-md-up {
    background-size: cover;
    background-attachment: scroll;
    background-position: right top !important;
  }
  
  /* Desktop: ensure background is positioned at top right */
  @media (min-width: 769px) {
    .vd--hero-corporate .card-img-bg.hidden-md-down {
      background-position: right top !important;
    }
  }
  
  @media (max-width: 768px) {
    .vd--hero-corporate .vd--hero-content-left {
      margin-top: 170px;
      margin-bottom: 0 !important;
    }
    .vd--hero-corporate .card-img-bg.hidden-md-up {
      height: 180px;
      text-align: center;
      background-repeat: no-repeat;
      background-position: center top;
    }
  
    .vd--hero-corporate .container {
      margin: 0 !important;
      padding: 0;
    }
    .vd--hero-corporate .vd--hero-content-left .dls-white-bg {
      border-radius: 0;
    }
    .vd--mobile-middle-align {
      text-align: center;
    }
    .vd--button-dark .btn-sm {
      margin: auto;
    }
    .vd--mobile-middle-align .richtext h1 {
      font-size: 40px !important;
    }
  }
  
  
  /***** SECTION BENEFITS *****/
  
  .vd--round-corners .card-img-bg.dls-white-bg {
    border-radius: 12px;
  }
  
  .vd--benefits-image-left > .container > .row > .col-md-12 > div {
    display: flex;
    gap: 40px;
    align-items: center;
  }
  
  /* Ensure image fills container height - working approach from vPayment CSS */
  .vd--benefits-image-left .vd--card-benefits-image,
  .vd--benefits-image-left .vd--round-corners {
    height: 100% !important;
    border-radius: 12px; /* keep rounded corners */
    overflow: hidden; /* ensure child image respects radius */
  }
  .vd--benefits-image-left .vd--card-benefits-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }
  
  .vd--benefits-content-text > .container {
    padding: 0 !important;
  }
  .vd--benefits-content-text .heading-4 {
    font-size: 32px;
    font-weight: 300;
    color: #001659;
  }
  
  .vd--benefits-content-text p {
    font-size: 14px;
    margin: 24px 0;
  }
  .vd--benefits-wrapper > .container > .row > .col-md-12 > div {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
  }
  .vd--benefits-wrapper > .container > .row > .col-md-12 > div .grid {
    flex: 1 1 calc(50% - 16px);
    background-color: #fff;
    border-radius: 12px;
  }
  .vd--benefits-wrapper .vd--benefit {
    padding: 26px;
  }
  .vd--benefits-wrapper .vd--benefit > .container {
    padding: 0 !important;
  }
  .vd--benefits-wrapper
    .vd--section
    .vd--round-corners
    > .card-img-bg.dls-white-bg {
    height: 255px !important;
  }
  .vd--benefit.vd--round-corners .vd--card-icon-headline {
    margin-bottom: 10px;
  }
  .vd--benefit.vd--round-corners ul {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  @media (max-width: 768px) {
    .vd--benefits-wrapper > .container > .row > .col-md-12 > div {
      flex-direction: column;
    }
  
    .vd--benefits-image-left > .container > .row > .col-md-12 > div {
      flex-direction: column;
    }
  }
  /*-----------------*/
  
  .vd--section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  
  
  @media (max-width: 768px) {
    .vd--benefits-wrapper .vd--round-corners {
      height: auto !important;
    }
  }
  
  .vd--steps-3-wrapper>.container>.row>.col-md-12>div {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  
  .vd--steps-3-wrapper>.container>.row>.col-md-12>div>.grid {
    max-width: calc(100% / 3) !important;
    width: 100%;
  }
  
  .vd--step .vd--steps-number {
    width: 32px;
  }
  
  .vd--steps-3-wrapper .vd--step>.container>.row>.col-md-12>div {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  
  .vd--step>.container {
    padding: 0;
  }
  
  .vd--step {
    padding: 20px;
  }
  
  .vd--steps-3-wrapper>.container>.row>.col-md-12>div>.grid {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
  }
  
  .vd--section .vd--grid-no-padding {
    padding-top: 40px;
  }
  
  .vd--section .vd--grid-no-padding .container {
    padding: 0;
  }
  
  .vd--section .vd--grid-no-padding .col-md-4.margin-0-tb {
    display: flex;
  }
  
  .vd--section .vd--grid-no-padding .col-md-4.margin-0-tb .grid {
    height: 100%;
  }
  
  .vd--section .vd--grid-no-padding .col-md-4.margin-0-tb .grid section {
    height: 100%;
  }
  
  .vd--section .vd--grid-no-padding .col-md-4.margin-0-tb .grid section .vd--round-corners {
    height: 100% !important;
  }
  
  .vd--section .vd--grid-no-padding .vd--round-corners .image.parbase {
    overflow: hidden;
    border-radius: 10px;
  }
  
  .vd--section .vd--grid-no-padding .vd--round-corners .container .margin-0-tb .richtext h3.small {
    color: #00175a;
    font-weight: 700;
  }
  
  .vd--section .vd--grid-no-padding .vd--round-corners .container .margin-0-tb .richtext .pad-2-t.pad-2-b {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  
  .vd--section .vd--grid-no-padding .vd--round-corners .grid .vd--icon-list .row.pad-1-t.pad-1-b {
    padding-top: 0 !important;
    padding-bottom: 12px !important;
  }
  
  .vd--section .vd--grid-no-padding .vd--round-corners .vd--icon-list .icons .text-align-left svg {
    height: 24px;
    width: 24px;
  }
  
  .vd--section .vd--icon-list .container .row.pad-1-t.pad-1-b .col-md-12.margin-0-tb div {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  @media screen and (max-width: 1024px) {
    .container {
        max-width: 100%;
    }
  }
  
  .vd--benefit-list {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    align-self: center;
    align-items: stretch;
    align-items: baseline;
    align-items: center;
  }
  
  
  .vd--grid-small-width .vd--benefit-list>.dls-white-bg {
    display: none;
  }
  
  .vd--benefits-2-wrapper>.container>.row>.col-md-12>div {
    display: flex;
    gap: 24px;
    margin-top: 40px;
  }
  
  .vd--benefits-2-wrapper>.container>.row>.col-md-12>div>.grid {
    width: 100%;
    background: #fff;
    border-radius: 12px;
  }
  
  .vd--benefits-2-wrapper .vd--step {
    padding: 30px !important;
  }
  
  .vd--grid-team>.container>.row>.col-md-12>div>.button {
    margin-top: 48px;
  }
  
  .vd--benefits-2-wrapper .richtext h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  
  @media screen and (max-width: 780px) {
    .vd--benefits-image-left>.container>.row>.col-md-12>div {
      flex-direction: column;
    }
  
    .vd--steps-3-wrapper>.container>.row>.col-md-12>div {
      flex-wrap: wrap;
    }
  
    .vd--benefit-list>.container {
      padding: 0 !important;
    }
  
    .vd--steps-3-wrapper>.container>.row>.col-md-12>div>.grid {
      max-width: 100% !important;
    }
  
    .vd--benefits-2-wrapper>.container>.row>.col-md-12>div {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
  }
  
  
  
  
  @media screen and (max-width: 900px) {
    .vd--grid-small-width {
      width: 100%;
    }
  
    .vd--grid-cards>.container>.row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  
    .vd--grid-cards>.container>.row>.col-md-4 {
      max-width: 100%;
      margin: 12px !important;
      padding: 0;
      background: #fff;
      border-radius: 12px;
    }
  }
  
  @media screen and (max-width: 550px) {
    .vd--grid-cards>.container>.row {
      display: grid;
      grid-template-columns: repeat(1, 1fr) !important;
    }
    .vd--grid-cards>.container>.row>.col-md-4 {
      max-width: 100%;
      margin-bottom: 12px;
    }
  }
  
  /* Mobile (≤768px): Unified styles for hero, benefits, sections, and buttons */
  @media (max-width: 768px) {
    /* Hero: mobile styles */
    .vd--hero-corporate > .container > .row > .col-md-12 > div,
    .vd--benefits-image-left > .container > .row > .col-md-12 > div,
    .vd--benefits-content > .container > .row > .col-md-12 > div,
    .vd--benefits-content-text > .container > .row > .col-md-12 > div {
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .vd--hero-corporate > .container > .row > .col-md-12 > div > .grid,
    .vd--benefits-image-left > .container > .row > .col-md-12 > div > .grid,
    .vd--benefits-content > .container > .row > .col-md-12 > div > .grid,
    .vd--benefits-content-text > .container > .row > .col-md-12 > div > .grid {
      width: 100% !important;
      max-width: 100% !important;
    }
  
    /* Global mobile gutters: 16px for all sections except hero */
    .vd--section:not(.vd--hero-corporate) > .container {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  
    /* Neutralize framework negative gutters on rows */
    .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  
    /* Steps wrapper: remove container padding on mobile */
    .vd--steps-wrapper > .container,
    .vd--steps-wrapper .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    /* Grid small width: remove container padding on mobile */
    .vd--grid-small-width > .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    /* Hide hero background image on mobile */
    .vd--hero-corporate .card-img-bg {
      background-image: none !important;
    }
  
    /* Mobile hero height */
    .vd--hero-corporate-mobile {
      min-height: 240px !important;
    }
    .vd--hero-corporate-mobile .card-img-bg {
      height: 240px !important;
    }
  
    /* Hero content left: no top margin on mobile */
    .vd--hero-corporate .vd--hero-content-left {
      margin-top: 0 !important;
    }
  
    /* Hero: center text and fill container width */
    .vd--hero-corporate .vd--hero-content-left > .container,
    .vd--hero-corporate .vd--content-text > .container,
    .vd--hero-corporate .vd--content-text .richtext,
    .vd--hero-corporate .vd--mobile-middle-align,
    .vd--hero-corporate .vd--mobile-middle-align .richtext {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
    }
  
    .vd--hero-corporate .vd--button-dark .btn,
    .vd--hero-corporate .vd--button-dark .btn-sm {
      display: inline-block;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  
    /* Benefits: ensure the grid with content and the text block span full width */
    .vd--benefits-image-left .grid:has(.vd--benefits-content),
    .vd--benefits-image-left .grid:has(.vd--benefits-content-text),
    .vd--benefits-content,
    .vd--benefits-content-text {
      width: 100% !important;
      max-width: 100% !important;
    }
  
    .vd--benefits-content > .container,
    .vd--benefits-content-text > .container {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0;
      padding-right: 0;
    }
  
    .vd--benefits-content .richtext,
    .vd--benefits-content-text .richtext {
      text-align: center !important;
    }
  
    /* Zero out padding on columns with margin-0-tb on mobile */
    .col-md-12.margin-0-tb {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    /* Center benefits-content-text copy on mobile */
    .vd--benefits-content-text > .container > .row > .col-md-12 > div {
      align-items: center;
    }
  
    .vd--benefits-content-text .richtext,
    .vd--benefits-content-text .richtext p,
    .vd--benefits-content-text .richtext h1,
    .vd--benefits-content-text .richtext h2,
    .vd--benefits-content-text .richtext h3,
    .vd--benefits-content-text .richtext h4 {
      text-align: center !important;
    }
  }

  /***** HELP BUBBLE *****/
/*---------------------*/

.vd--questions-wrapper {
    position: fixed !important;
    z-index: 29;
    bottom: 2.5rem;
    width: 100%;
    padding: 0 2.5rem !important;
    pointer-events: none;
  }
  
  .vd--questions-wrapper > .container {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div {
    position: relative;
    display: flex;
    justify-content: flex-end;
  }
  
  .vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div > .grid {
    position: absolute;
    bottom: 48px;
    right: 1rem;
    z-index: -1
  }
  
  .vd--questions-button {
    width: 112px;
    pointer-events: auto;
    cursor: pointer;
  }
  
  .vd--questions-button-phone {
    visibility: hidden;
    width: 0;
  }
  
  .vd--questions-button:hover {
    scale: 1.45;
    transition: scale 0.25s ease-in-out;
  }
  
  /* Questions overlay and popup visibility */
  .vd--questions-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 28; /* below wrapper (29), above page content */
  }
  
  .vd--questions-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }
  
  .vd--questions-button {
    transition: scale 0.25s ease-in-out;
  }
  
  .vd--questions-button.is-active {
    scale: 1.45;
  }
  
  /* swap button visuals when questions are open */
  .vd--questions-wrapper.questions-open .vd--questions-button {
    visibility: hidden;
    width: 0;
  }
  
  .vd--questions-wrapper.questions-open .vd--questions-button-phone {
    visibility: visible;
    width: 112px;
    scale: 1.45;
  }
  
  /* fade-in grid content when active */
  .vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div > .grid {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
  }
  
  .vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div > .grid.is-open {
    opacity: 1;
    pointer-events: auto;
    z-index: 31;
  }
  
  .vd--questions-popup .container {
    width: 310px;
    padding: 18px 16px;
    background-color: #fff;
    border-radius: 8px;
  }
  
  .vd--questions-popup .container > .row > .col-md-12.margin-0-tb > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .vd--questions-popup .container > .row > .col-md-12.margin-0-tb > div >  .richtext.parbase:nth-child(2) p {
    padding-right: 6px;
  }
  
  .vd--questions-popup p {
    line-height: 1.25 !important;
  }