@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  font-family: "Montserrat", sans-serif !important;
  --surface1: #f5f7ff;
  --surface2: #f0f3ff;
  --surface3: #ebeefa;
  --surfaceInverce: #002d41;
  --surfaceAccent: #d3f4f6;
  --gold100: #be8c3c;
  --lightblue100: #35a8e0;
  --text-primary: #002d41;
  --text-secondary: #335767;
  --text-inverse: #ebeefa;
  --blue30: #b3c0c6;
  --bs-black: #0f1010;
  --button-primary: #25c9d0;
  --gray20: #dcdcdc;
  --promiseActive: #17384c;
  --promiseAccent: #4a829b;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Adjust this based on your header height */
}

.bg-auto {
  background-color: var(--surface1) !important;
}

.text-gold-100 {
  color: var(--gold100) !important;
}

.text-surface-inverse {
  color: var(--surfaceInverce) !important;
}

.text-lightblue-100,
.text-lightblue-100 a {
  color: var(--lightblue100) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-primary {
  color: var(--text-primary) !important;
}
.padding-tb-0 {
  padding-top: 0px !important;
  padding-bottom: 0 !important;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--surface1);
}

button {
  font-family: "Montserrat", sans-serif;
}

.margin-0 {
  margin: 0;
}

.padding-0 {
  padding: 0;
}

h1 {
  color: var(--text-primary);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

h2 {
  color: var(--text-primary);
  font-size: 24px;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0;
}

h3 {
  color: var(--text-primary);
  font-size: 22px;
  letter-spacing: 0;
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--text-secondary);
}

.max-w-900 {
  max-width: 900px;
}

.max-w-1400 {
  max-width: 1400px;
}

.animate-span {
  display: inline-block;
  &:hover {
    cursor: pointer;
    & svg,
    i {
      transition: transform 0.3s ease-in-out;
      transform: translateX(5px);
    }
  }
}

.button-primary {
  background-color: #35a8e0;
  color: white;
  border: none;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;

  text-decoration: none;
}

.button-pay {
  background-color: var(--button-primary);
  color: var(--text-primary);
  font-size: 14px;
  padding: 8px 12px;
  line-height: 20px;
  border-radius: 5px;
  border: none;
  font-weight: 600;
  white-space: nowrap;

  &:hover {
    background-color: #7cdfe3;
    cursor: pointer;
  }
}

.button-contact {
  background-color: white;
  color: var(--text-primary);
  font-size: 14px;
  padding: 8px 12px;
  line-height: 20px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px var(--button-primary, #000);
  border: none;
  font-weight: 600;
}

.sub-heading {
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 600;
}

.bs-container {
  padding: 50px 30px;
  box-sizing: border-box;
}

.footer-container {
  padding-top: 60px;
  padding-bottom: 30px;
  padding-left: 50px;
  padding-right: 30px;
  background-color: var(--bs-black);
  min-height: 350px;
  & .footer-content {
    color: white;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 50px;
    & nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      & li:first-child {
        font-weight: 700;
        font-size: 16px;
        color: #a7a7a7;
        & a {
          font-weight: 700;
          font-size: 16px;
          color: #a7a7a7;
        }
      }

      & li a {
        font-weight: 400;
        font-size: 14px;
        text-decoration: none;
        color: #a7a7a7;
        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }

    & .footer-social {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 15px;
      & p {
        font-size: 16px;
        font-weight: 700;
      }

      & .footer-social-icons {
        display: flex;
        gap: 15px;
      }
    }
  }

  & .footer-copyright {
    display: flex;
    flex-direction: column;
    gap: 10px;

    max-width: 210px;
    & span {
      color: var(--text-inverse);
      font-size: 12px;
      font-weight: 300;
      line-height: 16px;
    }
  }
}

.footer-subtext {
  background-color: var(--gold100);
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 24px;
  padding-bottom: 24px;
  & p {
    color: white;
    font-size: 14px;
    font-weight: 600;
    & span {
      font-weight: 400;
    }
  }
}

.breadcrumbs {
  display: flex;
  gap: 10px;
  padding-bottom: 20px !important;
  padding-top: 20px !important;
  & span a,
  span {
    font-size: 14px;
    font-weight: 500;
    color: var(--gold100);
    text-decoration: none;
    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}

#repromise {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 390px) {
}

/* Medium tablets (portrait) */
@media (min-width: 768px) {
  .bs-container {
    padding: 50px 50px;
  }
}

/* Large tablets and small laptops */
@media (min-width: 1024px) {
  .bs-container {
    padding: 100px 100px;
  }

  .footer-container {
    & .footer-content {
      flex-direction: row;
    }
  }

  .footer-subtext {
    & p {
      color: white;
      font-size: 21px;
      & span {
        font-weight: 400;
      }
    }
  }
}

/* Large laptops and desktops */
@media (min-width: 1200px) {
  .bs-container {
    padding: 100px 100px;
  }

  .footer-container {
    padding-left: 100px;
    padding-right: 100px;
  }

  .footer-subtext {
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* Extra large screens */
@media (min-width: 1600px) {
  .bs-container {
    padding: 100px 200px;
  }
}

@media only screen and (min-width: 1440px) {
  /* Styles for extra large screens */

  .footer-container {
    padding-left: 200px;
    padding-right: 200px;
    & .footer-content {
      flex-direction: row;
    }
  }

  .footer-subtext {
    padding-left: 200px;
    padding-right: 200px;
  }
}

@media only screen and (min-width: 1600px) {
  /* Styles for extra large screens */

  .footer-container {
    padding-left: 200px;
    padding-right: 200px;
    & .footer-content {
      flex-direction: row;
    }
  }

  .footer-subtext {
    padding-left: 200px;
    padding-right: 200px;
  }
}

.logo-desktop {
  display: none;
}

.logo-mobile {
  display: block;
}

.main-header {
  --header-height: 90px;
  background-color: var(--surface1);
  border-top: 2px solid var(--gold100);
  height: var(--header-height);
  box-shadow: 0 4px 4px 0 rgba(40, 47, 70, 0.1);
  & .container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    height: 100%;
    & .main-nav-mobile {
      margin-top: 90px;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      justify-content: space-between;
      flex-direction: column;
      background-color: var(--surface3);
      z-index: 100;
      & .nav-list {
        align-items: start;
        padding: 0;
        margin: 0;
        & li {
          list-style: none;
          & a {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-primary);
            text-decoration: none;
          }
        }
      }

      & .dropdown-footer {
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        background-color: #002d41;
        color: white;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 20px;
        border-bottom: var(--gold100) solid 3px;
      }

      & .accordion-item {
        border-bottom: 1px solid var(--gray20);
      }

      & .accordion-header {
        padding: 15px 20px;
        text-align: left;
        background: none;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: var(--navy100);
        cursor: pointer;
      }

      & .accordion-button i {
        transition: transform 0.3s ease;
      }

      & .accordion-button.active i {
        transform: rotate(180deg);
      }

      & .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background-color: var(--navy10);
      }

      & .accordion-content.active {
        max-height: 1000px; /* Adjust based on content */
      }

      & .accordion-grid {
        padding: 20px;
        display: grid;
        gap: 20px;
        background-color: var(--surface2);
      }

      & .accordion-grid-item {
        display: flex;
        gap: 15px;
        align-items: flex-start;
      }

      & .accordion-icon {
        width: 24px;
        height: 24px;
      }

      & .accordion-item-content {
        flex: 1;
        & .accordion-icon {
          display: none;
        }
      }

      & .accordion-title {
        font-weight: 500;
        font-size: 14px;
        color: var(--text-primary);
        margin-bottom: 5px;
      }

      & .accordion-description {
        display: none;
      }
    }

    & .mobile-menu-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      & .mobile-menu-toggle-button {
        background-color: var(--surface3);
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
      }
    }

    & .logo img {
      max-height: 40px;
      height: 40px;
      width: 100%;
    }

    & .main-nav {
      gap: 20px;
      display: none;
      flex-shrink: 1;
      & .nav-list {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0;
        & .has-dropdown.active {
          background-color: var(--surface3);
          border-radius: 40px;
        }

        & .has-dropdown i {
          transition: transform 0.3s ease;
        }

        & .has-dropdown:hover {
          & i {
            transform: rotate(180deg);
          }
        }

        & .has-dropdown:hover .dropdown-menu,
        .has-dropdown:focus-within .dropdown-menu {
          opacity: 1;
          visibility: visible;
          display: table;
        }

        & li {
          padding: 8px 12px;
          &:hover {
            background-color: var(--surface3);
            border-radius: 40px;
          }

          & .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            position: fixed;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            top: calc(var(--header-height) + 5px);
            left: 50%;
            right: 0;
            background-color: var(--surface1);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 32px;
            margin-top: 10px;
            list-style-type: none;
            width: 80vw;
            min-width: 800px;
            transform: translate(-50%);
            border-radius: 8px;
            z-index: 10;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            & .dropdown-footer {
              font-size: 21px;
              font-weight: 600;
              line-height: 22px;
              color: #002d41;
              padding-left: 24px;
              position: absolute;
              bottom: 30px;
            }

            &::before {
              content: "";
              position: absolute;
              top: -10px;
              left: var(--triangle-left, 50%);
              transform: translateX(-50%);
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-bottom: 10px solid var(--surface1);
            }

            & .dropdown-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              margin-bottom: 50px;

              & .dropdown-item {
                padding: 24px 24px 24px;
                background: var(--surface1);
                border-radius: 8px;
                display: inline-flex;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 16px;
                white-space: normal;
                &:hover {
                  background-color: var(--surfaceAccent);
                  cursor: pointer;
                }

                & .dropdown-icon {
                  width: 45px;
                  height: 52px;
                }

                & .dropdown-content {
                  flex: 1 1 0;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  gap: 8px;
                  padding-top: 8px;
                  &:has(.dropdown-promise) {
                    padding-top: 0px;
                    margin-top: -12px;
                  }

                  & .dropdown-promise {
                    font-weight: 800;
                    color: var(--gold100);
                    font-size: 10px;
                    letter-spacing: 1px;
                  }

                  & .dropdown-title {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 22px;
                    word-wrap: break-word;
                    color: var(--text-primary);
                  }

                  & .dropdown-description {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 22px;
                    word-wrap: break-word;
                    color: #335767;
                  }
                }
              }

              & .promise {
                &:hover {
                  background-color: #f2e8d9 !important;
                }
              }
            }
          }
        }

        & a {
          text-decoration: none;
          color: var(--text-primary);
          font-weight: 500;
          font-size: 16px;
          white-space: nowrap;
        }
      }
    }
  }
}

@media (min-width: 390px) {
}
/* Medium tablets (portrait) */
@media (min-width: 768px) {
}

/* Large tablets and small laptops */
@media (min-width: 1024px) {
  /* .main-header {
    display: block;
  }

  .container {
    height: 70px;
    padding: 0px 20px;
  } */
}

/* Large laptops and desktops */
@media (min-width: 1200px) {
  .logo-desktop {
    display: block;
    max-width: 150px;
  }

  .logo-mobile {
    display: none;
  }

  .main-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition-property: height;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    &.scrolled {
      --header-height: 70px;
    }

    & .container {
      padding-left: 50px;
      padding-right: 50px;
      & .main-nav-mobile {
        display: none;
      }

      & .mobile-menu-toggle {
        & .mobile-menu-toggle-button {
          display: none;
        }
      }

      & .logo img {
        max-height: 30px;
        height: 30px;
        max-width: unset;
      }

      & .main-nav {
        display: flex;
        & .nav-list {
          & li {
            & a {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

/* Extra large screens */
@media (min-width: 1400px) {
  .main-header {
    & .container {
      padding-left: 100px;
      padding-right: 100px;
      & .logo img {
        max-height: 50px;
        height: 50px;
      }

      & .main-nav {
        & .nav-list {
          & li {
            & a {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1600px) {
  .main-header {
    & .container {
      padding-left: 200px;
      padding-right: 200px;
      & .main-nav {
        & .nav-list {
          & li {
            & .dropdown-menu {
              height: 45vh;
            }
          }
        }
      }
    }
  }
}

/* .main-header > .container::after{  
  content: "";
  display: block;
  position: absolute;
  width: 144px;
  height: 3px;
  background-color: #aa8445;
  bottom: -3px;
  left: 75px;
} */

/* Cookiebot */
#CybotCookiebotDialog button {
  line-height: normal;
}

@media (max-width: 767px) {
  #CybotCookiebotDialogHeader {
    display: none !important;
  }

  #CybotCookiebotDialogBody .CybotCookiebotScrollContainer {
    max-height: 15em !important;
  }
}

@media (min-width: 1280px) {
  #CybotCookiebotDialog {
    border-top: 2px solid var(--button-surface);
    border-radius: 0 !important;
  }

  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyLink {
    /*background: url("/images/icons/settings.svg") no-repeat 0 19px !important;
        background-size: 85% !important;*/
  }

  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyLink img {
    display: none;
  }
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
  border-width: 1px !important;
  border-radius: 4px !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
  color: #002d41 !important;
}

/** Logo Marquee */
.bs-common-box {
  min-height: 400px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: space-between;
  align-items: start;
  gap: 40px;
}

.bs-common-box-even {
  background-color: var(--surface3);
  background-image: url("/Med_Image_Style_Hex_Pattern%202.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

.bs-common-box-content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 30px;
}

.bs-common-box-content .bs-common-box-content-header {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 30px;
}

.bs-common-box-content .bs-common-box-content-header h2 {
  font-weight: 600;
}

.bs-common-box-content .bs-common-box-content-header img {
  height: 100px;
}

.bs-common-box-content .bs-common-box-content-header p {
  color: var(--gold100);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 6px;
}

.bs-common-box-content .bs-common-box-content-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bs-common-box-content .bs-common-box-content-body .golden-link {
  color: var(--gold100);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.bs-common-box-content .bs-common-box-content-body .golden-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.bs-common-box-content .bs-common-box-content-body p {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--text-secondary);
  max-width: 800px;
}

.bs-common-box-content .bs-common-box-content-body p .learn-more-span a {
  display: inline-block;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  & :hover {
    text-decoration: underline;
  }
}

.no-border {
  border: unset !important;
}

.bs-common-side-content-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.bs-common-side-content-container img {
  width: 100%;
  height: 100%;
}

.bs-common-side-content-container .bs-common-side-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 30px;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial
  .no-border {
  border: unset !important;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial
  .no-before:before {
  display: none !important;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial
  .testimonial-avatar {
  width: 100px;
  height: 110px;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial
  .testimonial-logo {
  width: 120px;
  height: 100px;
  mix-blend-mode: darken;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial
  p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  position: relative;
  color: var(--text-secondary);
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial
  p:before {
  content: "";
  width: 6px;
  height: 120%;
  background-color: var(--lightblue100);
  position: absolute;
  left: -30px;
  top: 0;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-testimonial
  .testimonial-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  font-style: italic;
  color: var(--text-secondary);
}

.bs-common-side-content-container .bs-common-side-content .bs-common-side-item {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 10px;
  border-bottom: 1px solid var(--blue30);
  padding-bottom: 15px;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-item:last-child {
  border-bottom: unset;
  padding-bottom: unset;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-item
  .bs-common-side-item-icon {
  padding-top: 5px;
  min-width: 13px;
  min-height: 13px;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-item
  p {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-secondary);
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-item
  a {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-secondary);
  text-decoration: none;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-item
  p
  svg {
  margin-left: 5px;
}

.bs-common-side-content-container
  .bs-common-side-content
  .bs-common-side-item
  p:hover {
  text-decoration: underline;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .bs-common-box-even {
    background-size: 150%;
  }
}

@media (min-width: 1200px) {
  .bs-common-box {
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
  }

  .bs-common-box-even {
    background-size: cover;
  }

  .bs-common-box-content {
    grid-column: span 7;
  }

  .bs-common-box-content .bs-common-box-content-header {
    flex-direction: row;
    align-items: center;
  }

  .bs-common-box-content-header p {
    font-size: 18px;
    margin-bottom: 0;
  }

  .bs-common-side-content-container {
    grid-column: 9/13;
    justify-content: center;
    align-items: center;
  }

  .bs-common-side-content-container .bs-common-side-content {
    border-left: 2px solid var(--blue30);
    max-width: unset;
    padding-left: 0;
  }

  .bs-common-side-content-container
    .bs-common-side-content
    .bs-common-side-testimonial {
    padding-left: 30px;
  }

  .bs-common-side-content-container
    .bs-common-side-content
    .bs-common-side-item {
    border-bottom: unset;
    padding-bottom: unset;
    padding-left: 30px;
  }
}

.bs-services {
  background-color: var(--surface3);
  position: relative;
}

.bs-services .bs-services-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 16px;
}

.bs-services h2 {
  color: var(--text-secondary);
  max-width: 650px;
  font-weight: 400;
  font-size: 16px;
}

.bs-services .bs-services-image-desktop {
  position: absolute;
  right: 0;
  top: 0;
  object-fit: cover;
  display: none;
  z-index: 2;
}

.bs-services .bs-services-image-mobile {
  width: 100%;
  object-fit: contain;
  display: block;
  z-index: 2;
}

.bs-services .button {
  background-color: transparent;
  color: #fff;
  border: none;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.bs-services button:hover {
  text-decoration: underline;
}

@media (min-width: 820px) {
  .bs-services {
    min-height: 648px;
  }
}

@media (min-width: 1024px) {
  .bs-services {
    min-height: 540px;
  }

  .bs-services .bs-services-image-desktop {
    display: block;
  }

  .bs-services .bs-services-content h2 {
    font-size: 18px;
  }

  .bs-services .bs-services-image-mobile {
    display: none;
  }
}

.bs-digital {
  background-color: var(--surfaceInverce);
  background-image: url("/Small_Image_Style_Hex_Pattern%201.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  min-height: 500px;
  padding-top: 150px;
  padding-bottom: 100px;
  position: relative;
}

.bs-digital .bs-digital-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 16px;
}

.bs-digital .bs-digital-content img {
  width: 100px;
  height: 100px;
}

.bs-digital h1 {
  color: #fff;
}

.bs-digital h2 {
  color: #fff;
  max-width: 600px;
  font-weight: 400;
  font-size: 16px;
}

.bs-digital button,
.bs-digital a {
  background-color: transparent;
  color: #fff;
  border: none;
  font-size: 16px;
  color: var(--gold100);
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.bs-digital button:hover,
.bs-digital a:hover {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .bs-digital {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url("/Med_Image_Style_Hex_Pattern%201.svg");
    background-size: 120%;
  }

  .bs-digital h2 {
    color: #fff;
    max-width: 735px;
    font-size: 24px;
  }
}

.bs-digital:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #002d41;
  background-size: 120%;
  opacity: 0.5;
  z-index: 1;
}

.bs-digital * {
  position: relative;
  z-index: 2;
}

.bs-logo-section {
  background-color: var(--surface3);
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  justify-content: center;
  max-width: 100vw;
  overflow-x: auto;
  gap: 30px;
  padding: 50px 0;
}

.bs-logo-section h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  padding-left: 100px;
}

.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}

.logo-track {
  display: flex;
  width: 200%;
  animation: scroll 30s linear infinite;
}

.logo-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.logo-content img {
  height: 100px;
  width: auto;
  margin: 0 80px;
}

@keyframes scroll {
  0% {
    transform: translate(0);
  }

  to {
    transform: translate(-50%);
  }
}

.logo-track:hover {
  animation-play-state: paused;
}

@media (min-width: 368px) {
  .logo-track {
    animation: scroll 10s linear infinite;
  }
}

@media (min-width: 1024px) {
  .logo-track {
    animation: scroll 30s linear infinite;
  }
}

@media (min-width: 1200px) {
  .bs-logo-section h2 {
    font-size: 32px;
  }
}

/** Hero testimonial */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero .hero-image-desktop {
  width: 100%;
  object-fit: cover;
  display: none;
}

.hero .hero-image-mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  align-items: start;
  gap: 10px;
}

.hero-content h3 {
  padding-left: 10px;
  font-size: 18px;
}

.hero-content h2 {
  display: none;
}

.hero-title {
  letter-spacing: 0;
  font-weight: 700;
  color: #fff;
}

.hero-title span {
  padding: 0 10px;
  position: relative;
  display: inline-block;
  line-height: 1;
  z-index: 5;
}

.hero-title span:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 90%;
  bottom: 5px;
  background-color: #165574;
  z-index: -1;
}

.hero-carousel {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 90px);
}

.carousel-container {
  height: 100%;
  position: relative;
}

.carousel-slide {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: #03070a;
}

.hero-image-desktop,
.hero-image-mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-controls {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  gap: 20px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.carousel-button {
  background-color: #fff;
  border: none;
  cursor: pointer;
  width: 8px;
  height: 8px;
  position: relative;
  border-radius: 50%;
}

.hexagon {
  opacity: 0;
  width: 25px;
  height: 25px;
  fill: var(--gold100);
  stroke: var(--gold100);
  stroke-width: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.carousel-button.active .hexagon {
  opacity: 1;
}

.carousel-button:hover {
  background-color: #fffc;
}

@media (min-width: 390px) {
  .hero-title {
    font-size: 35px;
    line-height: 48px;
  }

  .hero-title span:before {
    height: 100%;
    bottom: 5px;
  }
}

@media (min-width: 768px) {
}

@media (min-width: 1024px) {
  .hero-content h2 {
    display: block;
  }

  .hero-title {
    font-size: 60px;
    line-height: 76px;
  }

  .hero-title span:before {
    height: 100%;
    bottom: 10px;
  }
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

@media (min-width: 1600px) {
  .hero-title {
    font-size: 80px;
    line-height: 100px;
  }

  .hero-title span:before {
    height: 100%;
    bottom: 10px;
  }
}

.hero-testimonial {
  background-color: var(--surfaceInverce);
  box-sizing: border-box;
  position: relative;
}

.hero-testimonial-breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--gold100);
  position: absolute;
  top: 20px;
}

.hero-testimonial-breadcrumb a {
  color: var(--gold100);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

.hero-testimonial-breadcrumb a:hover {
  text-decoration: underline;
}

.hero-testimonial-description {
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: #fff;
  max-width: 800px;
  margin-top: 15px;
}

.hero-testimonial-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.hero-testimonial-title {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 600;
  max-width: 800px;
}

.hero-testimonial-author {
  display: flex;
  gap: 15px;
  align-items: start;
  flex-direction: column;
  margin-top: 15px;
}

.hero-testimonial-author img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.hero-testimonial-author h3 {
  margin: 5px 0;
  color: #be8c3c;
  font-size: 18px;
  font-weight: 600;
}

.hero-testimonial-author p {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
}

@media (min-width: 768px) {
  .hero-testimonial-author {
    margin-top: 28px !important;
  }
}

@media (min-width: 1200px) {
  .hero-testimonial-author {
    align-items: center;
    flex-direction: row;
    margin-top: 35px;
  }
}

/** Article */
.article-hero {
  background-color: var(--surface3);
  display: grid;
  gap: 100px;
  height: 70vh;
  align-items: center;
  justify-content: flex-start;
  background-image: url("/images/re-bristow-and-sutor/bioHero.png") !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  & .article-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    & .article-small-title {
      color: var(--gold100);
      font-size: 18px;
      font-weight: 500;
    }

    & .article-date {
      color: var(--text-secondary);
      font-size: 16px;
      font-weight: 400;
    }

    & .article-title {
      color: var(--text-primary);
      font-size: 24px;
      font-weight: 600;
    }

    & .article-socials {
      display: flex;
      gap: 16px;
      justify-items: center;
      align-self: start;
      & a {
        color: var(--text-secondary);
        font-size: 18px;
        font-weight: 500;
      }
    }
  }

  & .article-image {
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
    & img {
      width: 100%;
    }
  }
}

.article-content {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: 20px;
  & .article-content-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
  }

  & .article-content-small-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }

  & .article-content-body {
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    color: var(--text-primary);
    & p {
      margin-bottom: 20px;
    }
  }
}

.news-and-media-container-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .article-hero {
    height: 50vh;
    grid-template-columns: 1fr 1fr;
    & .article-header {
      & .article-title {
        font-size: 32px;
        max-width: 460px;
      }
    }

    & .article-image {
      display: flex;
      max-width: 450px;
    }
  }
}

@media (min-width: 1200px) {
  .article-hero {
    padding: 20px 200px !important;
  }
}

/** Common Box V2 */
.bs-common-two-box {
  min-height: 400px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  & .bs-common-two-box-content-header {
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: start;
    gap: 30px;
    max-width: 500px;
    & h2 {
      font-weight: 600;
    }

    & img {
      height: 100px;
    }

    & p {
      color: var(--gold100);
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 8px;
    }
  }
}

.bs-common-two-box-even {
  background-color: var(--surface3);
  background-image: url("/Med_Image_Style_Hex_Pattern%202.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

.bs-common-two-box-content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 30px;
  & .bs-common-two-box-content-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    & .golden-link a {
      color: var(--gold100);
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }

    & p {
      font-size: 16px;
      font-weight: 500;
      line-height: 26px;
      color: var(--text-secondary);
      max-width: 800px;
      & .learn-more-span a {
        display: inline-block;
        font-weight: 600;
        color: var(--text-primary);
        text-decoration: none;
        & :hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.no-border {
  border: unset !important;
}

.bs-common-two-side-content-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  & img {
    width: 100%;
    height: 100%;
  }

  & .bs-common-two-side-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    & .bs-common-two-side-testimonial {
      display: flex;
      flex-direction: column;
      gap: 10px;
      & .testimonial-avatar {
        /*    width: 100px;
    height: 100px;*/
        height: 100%;
      }

      & .testimonial-logo {
        width: 120px;
        height: 100px;
        mix-blend-mode: darken;
      }

      & p {
        font-size: 16px;
        font-weight: 300;
        line-height: 26px;
        position: relative;
        &::before {
          content: "";
          width: 6px;
          height: 120%;
          background-color: var(--lightblue100);
          position: absolute;
          left: -30px;
          top: 0;
        }
      }

      & .testimonial-name {
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
      }
    }

    & .bs-common-two-side-item {
      display: flex;
      justify-content: start;
      align-items: start;
      gap: 10px;
      border-bottom: 1px solid var(--blue30);
      padding-bottom: 15px;
      &:last-child {
        border-bottom: unset;
        padding-bottom: unset;
      }

      & .bs-common-two-side-item-icon {
        padding-top: 5px;
        min-width: 13px;
        min-height: 13px;
      }

      & p {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        color: var(--text-secondary);
        & svg {
          margin-left: 5px;
        }

        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  .bs-common-two-box-even {
    background-size: 150%;
  }
}

@media (min-width: 1200px) {
  .bs-common-two-box {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 30px;
    & .bs-common-two-box-content-header {
      flex-direction: row;
      align-items: center;
    }
  }

  .bs-common-two-box-even {
    background-size: cover;
  }

  .bs-common-two-box-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .bs-common-two-box-content-body {
    grid-column: span 7;
  }

  & .bs-common-two-box-content-header {
    & p {
      font-size: 18px;
      margin-bottom: 0;
    }
  }

  .bs-common-two-side-content-container {
    grid-column: 9/13;
    justify-content: center;
    align-items: center;
    & .bs-common-two-side-content {
      border-left: 2px solid var(--blue30);
      max-width: unset;
      & .bs-common-two-side-testimonial {
        padding-left: 30px;
      }

      & .bs-common-two-side-item {
        border-bottom: unset;
        padding-bottom: unset;
        padding-left: 30px;
      }
    }
  }
}

/**Career.css */

.career-cta {
  background-color: #35a8e0;
  color: #fff;
  padding: 10px 24px;
  border-radius: 4px;
  border: none;
  &:hover {
    background-color: #2a88b5;
  }

  & span {
    font-size: 18px;
    font-weight: 700;
  }

  & i {
    margin-left: 10px;
  }
}

.career-carousel {
  overflow: hidden;
  background-color: #f0f3ff;
  width: 100%;
  position: relative;
}

.career-testimonial-wrapper {
  width: 100%;
  background-color: var(--surface2);
}

.career-testimonial {
  display: grid !important;
  gap: 25px;
  padding: 30px 20px;
  & p {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
  }
}

.career-testimonial-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  & span {
    color: var(--gold100);
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
  }
}

.career-testimonial-header {
  display: flex;
  gap: 20px;
  align-items: center;
  & p {
    color: #002d41;
    font-size: 14px;
    font-weight: 600;
  }

  & img {
    width: 100px !important;
    height: 100px !important;
  }
}

.why-bs-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 50px;
}

.why-bs-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 20px;
  & h2 {
    font-size: 24px;
    font-weight: 600;
  }

  & p {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
  }
}

.why-bs-footer {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 5px;
  & span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold100);
  }

  & span:last-child {
    font-size: 14px;
    font-weight: 600;
  }
}

.working-here {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 20px;
}

.working-here-glassdoor {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: 50px;
  & .working-here-glassdoor-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
    & h2 {
      font-size: 24px;
      font-weight: 600;
      color: #002d41;
    }

    & p {
      font-size: 16px;
      font-weight: 500;
      line-height: 26px;
    }
  }

  & img {
    width: 100%;
    max-width: 400px;
  }
}

.work-life-balance {
  display: grid;
  gap: auto;
  margin-top: 50px;
  & .work-life-col:first-child {
    margin-bottom: 50px;
  }

  & .work-life-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 50px;
    position: relative;
    & h2 {
      font-size: 24px;
      font-weight: 600;
      color: #002d41;
      margin-bottom: 10px;
    }
  }
}

.work-life-carousel {
  overflow: hidden;
  width: 100%;
  max-width: 320px;
  background-color: #f0f3ff;
  position: relative;
}

.career-stories-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 50px;
}

.career-stories-wrapper {
  width: 100%;
}

.career-stories {
  background-color: var(--surface2);
  height: unset !important;
  & div {
    padding: 30px 20px;
    display: flex !important;
    flex-direction: column !important;
    gap: 30px;
    align-items: start;
    justify-content: start;
  }

  & svg,
  img {
    min-width: 75px;
  }

  & p {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    word-wrap: break-word;
  }
}

.career-stories-footer {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 10px;
  margin-top: 75px;
  & p {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
  }
}

.career-stories-pagination {
}

.incentives-header {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 10px;
  & h2 {
    font-size: 24px;
    font-weight: 600;
    color: #002d41;
  }

  & p {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
  }
}

.incentives-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin-top: 50px;
  & .incentives-grid-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    & p {
      font-size: 16px;
      font-weight: 600;
      line-height: 26px;
      color: #002d41;
      max-width: 300px;
    }
  }
}

.promise-container {
  background-color: #002d41;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

.promise-content {
  grid-column: unset;
  display: grid;
  gap: 50px;
  align-self: start;
  & h2 {
    font-size: 24px;
    font-weight: 600;
    color: #25c9d0;
  }

  & p {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: #fff;
  }
}

.promise-carousel {
  grid-column: unset;
  position: relative;
  overflow: hidden;
  padding-bottom: 30px;
}

.promise-cta-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 10px;
}

.promise-cta {
  width: 100%;
  background-color: transparent;
  color: #25c9d0;
  border: none;
  width: fit-content;
  font-weight: 600;
}

.dev-career {
  background-color: white;
  position: relative;
  & .dev-career-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 16px;
    margin-bottom: 20px;
  }

  & h2 {
    color: var(--text-secondary);
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
    max-width: 500px;
  }
}

.dev-career-image {
  & img {
    position: relative;
    width: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1024px) {
  .why-bs-container {
    flex-direction: row;
    gap: 100px;
  }

  .working-here-glassdoor {
    grid-template-columns: repeat(2, 1fr);
    place-items: start end;
    gap: unset;
  }

  .work-life-balance {
    grid-template-columns: repeat(2, 1fr);
    place-items: start end;
    & .work-life-col:first-child {
      margin-bottom: unset;
    }
  }

  .incentives-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .promise-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 50px;
  }

  .work-life-carousel {
    max-width: 400px;
  }

  .promise-content {
    grid-column: 1/4;
    gap: 50px;
  }

  .promise-carousel {
    grid-column: 4/6;
    & .swiper-slide {
      & img {
        width: 100%;
      }
    }
  }

  .career-stories {
    & div {
      display: flex !important;
      flex-direction: row !important;
    }
  }

  .dev-career {
    min-height: 500px;
    height: 100%;
    & .dev-career-content {
      margin-bottom: 0px;
      z-index: 100;
      position: relative;
    }
  }

  .dev-career-image {
    overflow: hidden;
    height: 100%;
    z-index: -1;
    background-color: red;
    width: 100%;
    & img {
      height: 100%;
      width: fit-content;
      position: absolute;
      right: 0;
      bottom: 0;
      object-fit: contain;
      top: 0;
    }
  }
}

@media (min-width: 1200px) {
  .career-common-header {
    max-width: 600px !important;
  }

  .career-side-content-container {
    grid-column: 8/13;
    max-width: unset !important;
  }

  .career-stories {
    & svg,
    img {
      min-width: 70px;
    }
  }
}

@media (min-width: 1600px) {
  .career-common-header {
    max-width: 600px !important;
  }

  .career-side-content-container {
    grid-column: 9/13;
    max-width: unset !important;
  }

  .working-here-glassdoor {
    grid-template-columns: repeat(2, 1fr);
    place-items: start center;
  }

  .work-life-balance {
    grid-template-columns: repeat(2, 1fr);
    place-items: start center;
  }

  .career-stories {
    & svg,
    img {
      min-width: 75px;
    }
  }
}

/** Bs Services */

.bs-services {
  background-color: var(--surface3);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;

  & .bs-services-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 16px;
  }

  & h2 {
    color: var(--text-secondary);
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
  }

  & .bs-services-image-desktop {
    object-fit: contain;
    display: none;
    z-index: 2;
  }

  & .bs-services-image-mobile {
    width: 100%;
    object-fit: contain;
    display: block;
    z-index: 2;
  }

  & button {
    background-color: transparent;
    color: white;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none !important;
    &:hover {
      text-decoration: underline;
    }
  }
}

@media (min-width: 1024px) {
  .bs-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    & .bs-services-image-desktop {
      display: block;
    }

    & .bs-services-content {
      & h2 {
        font-size: 18px;
      }
    }

    & .bs-services-image-mobile {
      display: none;
    }
  }
}

/* DEVA CSS */

.body-color {
  background-color: var(--surface1) !important;
}

.dark-blue-font {
  color: var(--text-primary) !important;
}

.dc-group-of-companies p {
  color: var(--text-secondary) !important;
  margin-top: 15px;
}

.dc-group-of-companies .bs-common-two-box-content-header {
  max-width: none;
}

.dc-group-of-companies .bs-common-two-box-content {
  grid-template-columns: none !important;
}

.dc-two-column {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  padding-bottom: 30px;
  border-bottom: 1px #1a4254 dashed;
  max-width: 800px;
}

.dc-group-of-companies {
  background-image: url("/GroupCompaniesBackground.svg") !important;
  background-size: contain !important;
}

.dc-group-companies-logo {
  width: 200px;
  margin-right: 30px;
  min-width: 200px;
  max-height: 80px;
}

.p-link {
  color: var(--text-secondary) !important;
}

.no-border-left {
  border-left: none !important;
}

.dc-two-column-values {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  padding-bottom: 30px;
}

.dc-two-column-leadership {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  padding-bottom: 30px;
  align-items: flex-start;
}

.dc-two-column-values > div {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
}

.dc-two-column-values > div > div > h2 {
  font-size: 20px;
  font-weight: 600;
}

.m-t-30 {
  margin-top: 30px;
}

#top-header-title {
  color: var(--gold100) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
}

.leadership-section > h2 {
  color: #be8c3c;
  font-size: 24px;
  font-weight: 600;
}

.leadership-section > a {
  font-size: 16px;
  color: var(--gold100);
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.leadership-section > h3 {
  color: #335767;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  margin-top: 6px;
  margin-bottom: 30px;
}

.load-more-btn {
  background-color: var(--lightblue100);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  align-items: center;
  outline: 0;
  cursor: pointer;
  width: 225px;
  margin: 30px auto 0 auto;
  display: block;
  text-align: center;
}

.bio-hero {
  background-image: url("/bioHero.png") !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.dc-bio-two-column {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  padding-bottom: 30px;
  align-items: flex-start;
  width: 100%;
}

.dc-bio-two-column > img {
  width: 350px;
}

.bio-title-section > p {
  color: #be8c3c;
  font-size: 24px;
  font-weight: 600;
}

.bio-title-section > h2 {
  color: #002d41;
  font-size: 52px;
  font-weight: 600;
}

.bio-title-section > h3 {
  color: #002d41;
  font-size: 32px;
  font-weight: 600;
}

.bio-p {
  color: #002d41;
  font-size: 18px;
  font-family: Montserrat;
  font-weight: 500;
  line-height: 28px;
  margin-top: 30px;
  max-width: 800px;
}

.even-color-background {
  background-color: var(--surface3) !important;
}

.bio-other-team > h2 {
  color: #002d41;
  font-size: 32px;
  font-family: Montserrat;
  font-weight: 600;
}

.other-members-list {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.other-members-list > a > img {
  width: 100% !important;
  height: auto !important;
}

.other-members-list > a {
  position: relative;
}

.other-member-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  max-width: 125px;
}

.other-member-text > h3 {
  color: #be8c3c !important;
  font-size: 20.12px !important;
  font-weight: 600 !important;
}

.other-member-text > p {
  color: #f5f7ff !important;
  font-size: 15.09px !important;
  font-weight: 500 !important;
  line-height: 18.44px !important;
  margin-top: 10px !important;
  margin-bottom: 0px !important;
}

.other-member-text::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 75px;
  height: 1px;
  background-color: #fff;
}

.accreditations-text-section > div > p:first-child {
  color: #be8c3c !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
}

.accreditations-text-section > div > p:last-child {
  color: #335767 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
}

.governance-accreditations-section {
  display: flex;
  background-color: var(--surface3);
  gap: 60px;
  padding: 30px 60px;
  border-radius: 10px;
}

.further-membership-text {
  padding-left: 200px;
  display: flex;
  text-align: left !important;
  margin-right: auto;
  font-size: 22px !important;
}

.dc-certification-logo {
  flex: 1 1 calc(100% / 6 - 10px);
  height: auto;
  box-sizing: border-box;
  flex-wrap: wrap;
  display: flex;
  gap: 50px;

  & img {
    width: 160px;
    height: 160px;
  }
}

.governance-banner {
  position: relative;
  display: flex;
}

.governance-banner h2 {
  color: #002d41;
  font-size: 32px;
  font-weight: 600;
}

.governance-banner p {
  color: #335767;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 25px !important;
  margin-top: 30px;
}

.governance-banner img {
  position: absolute;
  top: 0;
  right: 0;
  width: 700px;
}

.governance-banner > .bs-services-content {
  max-width: 950px;
}

.legislation-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.legislation-list > p {
  margin: 0px !important;
}

.margin-top-0 {
  margin-top: 0px !important;
}

.read-more-btn {
  background-color: transparent;
  color: white;
  border: none;
  font-size: 16px;
  color: var(--gold100);
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  padding: 0;
  margin-top: 15px;
  text-decoration: none;
}

.read-more-btn:hover {
  text-decoration: underline;
}

.max-800 {
  max-width: 800px !important;
}

.legislation-list-section > p {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.legislation-list-section > .legislation-list {
  margin-top: 5px !important;
}

.legislation-list-section > p:first-child {
  margin-top: 0px !important;
}

.legislation-list > svg {
  flex-shrink: 0;
}

.policy-container {
  display: grid;
  gap: 50px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.policy-header {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.policy-header h2 {
  color: #002d41;
  font-size: 24px;
  font-family: Montserrat;
  font-weight: 600;
  word-wrap: break-word;
}

.policy-header p {
  color: #002d41;
  font-size: 16px;
  font-family: Montserrat;
  font-weight: 500;
  line-height: 26px;
  word-wrap: break-word;
}

.policy-content p {
  max-width: 400px !important;
}

@media (max-width: 1200px) {
  .further-membership-text {
    padding-left: 100px !important;
  }

  .small-screen-reverse > .dc-two-column {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .small-screen-column-the-group > .dc-two-column-values {
    flex-direction: column;
  }

  .small-screen-column-the-group > .dc-two-column-values > div {
    max-width: 100%;
  }

  .small-screen-column-the-group > .m-t-30 > .dc-two-column-leadership {
    flex-direction: column;
    gap: 30px;
  }

  .small-screen-background-pattern {
    background-image: url("/GroupCompaniesBackground.svg") !important;
    background-size: 40% !important;
    background-position: bottom right !important;
  }

  .dc-bio-two-column {
    flex-direction: column-reverse;
    gap: 30px;
  }

  .dc-bio-two-column > img {
    width: 100%;
  }

  .governance-banner > .bs-services-content {
    max-width: 675px;
  }

  .governance-banner img {
    top: 85px;
    width: 650px;
  }

  .small-screen-governance-policies > .dc-two-column-values {
    flex-direction: column;
  }

  .small-screen-governance-policies > .dc-two-column-values > div {
    max-width: 100%;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .governance-accreditations-section {
    flex-direction: column;
    gap: 30px;
  }

  .governance-accreditations-section > img {
    width: 90px !important;
  }

  .further-membership-text {
    padding-left: 30px !important;
  }

  .bio-p {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  .hero-testimonial-breadcrumb {
    gap: 5px;
  }

  .hero-testimonial-breadcrumb > a {
    font-size: 14px !important;
  }

  .bio-title-section > h2 {
    font-size: 24px !important;
    line-height: 40px;
    margin-top: 15px;
  }

  .bio-title-section > h3 {
    font-size: 18px !important;
  }

  .bio-title-section > p {
    font-size: 18px !important;
  }

  .mobile-no-margin-top {
    margin-top: 0px !important;
  }

  .bio-other-team > h2 {
    font-size: 24px;
  }

  .other-members-list {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .other-members-list > a {
    flex: 0 0 auto;
  }

  .governance-accreditations-section {
    padding: 30px !important;
    gap: 15px !important;
  }

  .governance-banner h2 {
    font-size: 24px !important;
  }

  .governance-banner p {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  .governance-banner {
    flex-direction: column-reverse !important;
  }

  .governance-banner img {
    position: initial !important;
    width: 100% !important;
  }

  .standard-p {
    font-size: 16px;
    line-height: 26px;
  }

  .legislation-list > p {
    line-height: 20px;
  }

  .legislation-list > svg {
    margin-top: 2px;
  }
}

@media (max-width: 900px) {
  .governance-banner > .bs-services-content {
    max-width: 100% !important;
  }

  .governance-banner > .bs-services-content > h2 > br {
    display: none;
  }

  .dc-two-column-leadership {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 30px;
    align-items: flex-start;
  }

  .dc-two-column-values {
    gap: 20px;
    padding-bottom: 0px;
  }
}

@media (max-width: 1350px) {
  .governance-banner > .bs-services-content {
    max-width: 550px;
  }

  .governance-banner img {
    top: 85px;
    width: 650px;
  }

  .governance-banner > .bs-services-content > h2 > br {
    display: none;
  }
}

.text-bold {
  font-weight: 600 !important;
}

/** Services.ccs*/

.services-accordion {
  max-width: 80vw;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.services-accordion-item {
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.services-accordion-header {
  background-color: var(--surface3);
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: start;
  align-items: center;
  transition: background-color 0.3s ease;
  position: relative;
  gap: 20px;

  & img {
    width: 50px;
    height: 50px;
  }

  & h2 {
    color: #002d41;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 600;
    line-height: 28px;
    word-wrap: break-word;
  }

  &:hover {
    background-color: #e1e5f3;
  }
}

.services-accordion-header::after {
  position: absolute;
  right: 20px;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.services-accordion-item.active .services-accordion-header::after {
  transform: rotate(180deg);
}

.services-accordion-content {
  overflow: hidden;
  padding: 0px 30px;
  transition: all 0.1s ease-out;
  display: grid;
  height: 0px;
  gap: 30px;
  background-color: var(--surface2);
  & p {
    color: #335767;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 26px;
  }
}

.services-accordion-item.active .services-accordion-content {
  padding: 50px 30px;
  height: max-content;
  scroll-margin-top: 100px;
}

.services-accordion-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 80px;
}

.services-accordion-grid-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  & h3 {
    color: #002d41;
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 600;
  }
}

.services-accordion-grid-item-list {
  list-style: none;
  padding: 0;
  list-style-image: url(data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2216%22%20viewBox%3D%220%200%2013%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20id%3D%22Vector%2015%22%20d%3D%22M1%2011L6.19403%2014L11.4328%2011V5L6.19403%202L1%205V11Z%22%20stroke%3D%22%2349B1E3%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E);
  margin-left: 20px;
  height: fit-content;
  max-width: 300px;

  & li {
    margin-bottom: 10px;
    color: #335767;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 26px;
    padding-left: 5px;

    &::marker {
      height: 10px;
    }
  }
}

.services-accordion-footer {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 20px;
  & img {
    width: 115px;
    height: 115px;
  }

  & .services-accordion-footer-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    & span {
      color: #335767;
      font-size: 14px;
      font-family: Montserrat;
      font-style: italic;
      font-weight: 700;
      line-height: 22px;
    }
  }
}

.services-accordion-divider {
  border-top: 1px #cdd5d9 solid;
  margin-top: 20px;
}

.new-business {
  position: relative;
  overflow-x: hidden;
  & .new-business-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 16px;
    margin-bottom: 20px;
    max-width: 400px;
  }

  & h2 {
    color: var(--text-secondary);
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
    max-width: 500px;
  }
}

.new-business-image {
  & img {
    position: relative;
    width: 110%;
    object-fit: cover;
  }
}

.new-business-cta-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 10px;
}

.new-business-cta {
  width: 100%;
  background-color: transparent;
  color: #25c9d0;
  border: none;
  width: fit-content;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  & a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

@media (min-width: 1024px) {
  .services-accordion-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .services-accordion-footer {
    flex-direction: row;
  }

  .services-accordion-header {
    padding: 15px 50px;
    & h2 {
      font-size: 24px;
    }
  }

  .new-business {
    min-height: 500px;
    height: 100%;
    & .new-business-content {
      margin-bottom: 0px;
      z-index: 100;
      position: relative;
    }
  }

  .new-business-image {
    overflow: hidden;
    height: 100%;
    z-index: -1;
    background-color: red;
    width: 100%;
    & img {
      height: 100%;
      width: fit-content;
      position: absolute;
      right: 0;
      bottom: 0;
      object-fit: contain;
      top: 0;
    }
  }
}

/** section with overlappring image */

.new-business {
  position: relative;
  & .new-business-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 16px;
    margin-bottom: 20px;
    max-width: 400px;
  }

  & h2 {
    color: var(--text-secondary);
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
    max-width: 500px;
  }
}

.new-business-cta-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 10px;
}

.new-business-cta {
  width: 100%;
  background-color: transparent;
  color: #25c9d0;
  border: none;
  width: fit-content;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .new-business {
    min-height: 500px;
    height: 100%;
    & .new-business-content {
      margin-bottom: 0px;
      z-index: 1;
      position: relative;
      max-width: 500px;
    }
  }

  .new-business-image {
    overflow: hidden;
    height: 100%;
    z-index: -1;
    background-color: red;
    width: 100%;
    & img {
      height: 100%;
      width: fit-content;
      position: absolute;
      right: 0;
      bottom: 0;
      object-fit: contain;
      top: 0;
    }
  }
}

#team-member-container {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.bs-fade-in-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.bs-fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in from the left */
.bs-fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.bs-fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.bs-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.bs-th,
.bs-td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--text-secondary);
  vertical-align: top;
}

.bs-th {
  background-color: var(--surface3);
  font-weight: bold;
}

.bs-td {
  height: 40px;
  background-color: #ffffff;
}

.common-item-list {
  list-style: none;
  padding: 0;
  list-style-image: url("data:image/svg+xml,%3Csvg width='13' height='16' viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6.19403 14L11.4328 11V5L6.19403 2L1 5V11Z' stroke='%23BE8C3C' stroke-width='2'/%3E%3C/svg%3E%0A");
  margin-left: 20px;
  height: fit-content;

  & li {
    margin-bottom: 10px;
    color: #335767;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 26px;
    padding-left: 5px;

    &::marker {
      height: 10px;
    }
  }
}

.article-blog-link {
  color: #35a8e0;
  font-size: 16px;
  font-family: Montserrat;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

.no-deco {
  text-decoration: none;
}