{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content">
      <img class='np-homepage-hero-logo' src='https://s3.amazonaws.com/static.northpass.com/demos/conservis_wrap.png'>
      <div class="np-homepage-headline np-header-font-color">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline np-header-font-color">
        {{ homepage.subheadline }}
      </div>
      <hr class='np-divider-line'>
      <div class='np-homepage-buttons'>
        <a class="np-homepage-hero-cta np-button" href="#courses">
          Crop Management 
        </a>
        <a class="np-homepage-hero-cta np-button" href="#events">
          Financial Management
        </a>
      </div>
    </div>
  </div>
  {% include 'courses_catalog' %}
  {% include 'homepage_events' %}
</main>
{% include "footer" %}

<style>
  body {
    background: #FEFEFE
  }
  .np-main {
        margin-bottom: 0;
    }
  .np-powered-by {
      background: rgb(6, 40, 70);
  }
  .np-homepage-hero-image {
    max-height: 612px;
    height: 100%;
    object-fit: contain;
  }
  .np-homepage-hero-logo {
    width: 125px;
  }
  .np-homepage-headline {
    font-size: 67px !important;
    font-weight: 800 !important; 
  }
  .np-homepage-subheadline {
    color: rgb(38, 49, 61) !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    max-width: 630px !important;
    line-height: 1.2;
  }
  .np-divider-line {
    width: 400px;
    margin: 40px auto 40px auto;
    border-width: 5px 0 0 0;
    border-style: solid;
    border-color: rgb(255,174,3);
    font-size: 1rem;
    transition-timing-function: cubic-bezier(0.400,0.000,0.200,1.000);
  }
  .np-homepage-buttons {
    display: flex;
    margin: 25px auto;
    justify-content: center;
  }
  .np-homepage-hero-cta {
    height: 53px !important;
    border-radius: 100px !important;
    padding: 12px 45px !important;
    margin: 0 15px !important;
  }
</style>

<script>
    window.onload = function() {
    [].slice.call(document.getElementsByClassName("np-card-content-subtitle")).forEach(function(element) {
      if(element.innerText.length > 100){
        element.innerText = element.innerText.slice(0,100) + '...'
      }
    });
  }
</script>