Gainsight/Custom_Templates/customer_templates/ArborEd Prod/styles.css.liquid

 /*
 Put your custom overlay styles in here
 You can use your northpass color palette in this file

{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/

body {
    background: #fff;
}
.np-homepage-hero-content {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 36px 5%;
    justify-content: flex-start;
}
.np-homepage-headline {
    color: #fff;
}
.section {
  padding: 2.5%;
}
.section-welcome {
    display: flex;
    gap: 5%;
    position: relative;
}
.welcome-image {
    width: 100%;
    max-width: 500px;
    position: absolute;
    bottom: 0;
  }
.welcome-image-wrapper, .welcome-content-wrapper {
    width: 100%;
}
.heading {
    font-family: "Libre Baskerville";
    font-size: 2rem;
    color: #005f00;
    font-weight: 600;
  }
  .desc {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    position: relative;
  margin-bottom: 25px;
  }
  .welcome-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .welcome-image-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .section-journey {
    background: #f6f6f2;
  }
  .journey-cards {
    display: flex;
    padding-top: 2rem;
  }
  .journey-card {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    text-decoration: none;
    justify-content: space-between;
    width: 100%;
  }
  .card-image {
    width: 100%;
  }
  .card-heading {
    font-size: 1.5rem;
    font-weight: 500;
    color: #005f00;
    margin-top: 10px;
  }
  .section-think {
    position: relative;
  }
  .comments-wrapper {
    display: flex;
    padding: 2.5rem 0;
    gap: 20px;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
  }
  .comment-2 {
    margin-top: 5%;
  }
  .satisfaction {
    height: 175px;
    width: 175px;
    background: #98d5cd;
    padding: 1.5rem;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: -60px;
    right: 0;
  }
  .satisfaction-number {
    font-size: 2.5rem;
    text-align: center;
    font-weight: 700;
  }
  .satisfaction-desc {
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 5px;
  }
  .np-card-training-sessions {
    background: none;
  }
  .card-title {
    font-size: 1.5rem;
    color: #005f00;
    font-weight: 500;
  }

  .card-title.event-title {
    font-size: 1rem;
  }
  .np-card-training-session-date-day {
    display: flex;
    align-items: center;
  }
  .card-heading-font {
    font-family: "Libre Baskerville";
  }
  .np-sub-navigation, .np-dashboard, .np-learning-paths {
    background: #f6f6f2;
  }
  body {
    font-family: "Work Sans", sans-serif;
    background: #f6f6f2;
  }
  .heading-container {
    margin-bottom: 5%;
  }
  .card-date-container {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
  }
  .card-date {
    font-size: 1.25rem;
    font-weight: 500;
    color: #009801;
  }
  .event-type {
    color: #000;
    margin-bottom: 10px
  }
  .card-container-event {
    padding: 1.5rem;
    justify-content: space-between;
  }
  .np-footer-logo-image {
    filter: none;
    opacity: 1;
  }
  .event-card {
    padding: 20px !important;
  }
  .heading-container-event{
     margin: 2% 0 !important;
  }
  .event-card-container {
    max-width: 250px;
  }
  .hero-headline {
    font-family: "Libre Baskerville";
    font-size: 4rem;
    font-weight: 600;
    color: #fff;
    text-align: left;
  }
  .np-homepage-hero-image {
    transform: scaleX(-1);
  }
  .face-image {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    position: absolute;
    right: 25px;
    bottom: -50px;
  }
  .desc-text-with-image {
    max-width: 300px;
  }
  .np-footer {
    background: #005F00;
  }
  .np-powered-by {
    background: #005F00 !important;
  }
  .np-footer-navigation-link, .np-footer-support-item {
    color: #fff;
  }
  .np-optional-ribbon {
    background: #009D00;
    color: #fff;
  }
  body .np-powered-by-link {
    color: #fff !important;
  }

  @media only screen and (max-width: 1000px) {
    .welcome-image {
     position: initial;
    }
    .section-welcome {
      flex-direction: column-reverse;
    }
    .welcome-image-wrapper {
      justify-content: center
    }
    .welcome-content-wrapper .desc {
      max-width: unset;
    }
    .desc-text-with-image {
      max-width: 100%;
    }
    .heading {
      text-align: center;
    }
    .desc {
      align-items: center;
    }
    .desc-text {
      width: 100%;
  text-align: center;
    }
    .face-image {
      display: none;
    }
  }

  @media only screen and (max-width: 900px) {
    .journey-cards {
      flex-wrap: wrap;
    }
    .satisfaction {
      display: none;
    }
    .hero-headline {
      font-size: 3rem;
    }
  }

  .np-header-avatar-image {
    height: 50px;
    width: 50px;
    object-fit: cover;
  }