{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
  {% include "homepage_hero_carousel" %}
  {% comment %} {% include "sub_navigation" %} {% endcomment %}
<div class="np-subpage-container">
  <div class="row intro-row" style="margin-top:64px;">
    <div class="col-12 col-md-6 col-lg-7">
      <div class="homepage-intro">
          <div class="homepage-intro-headline np-header-font-color">
              {{ homepage.featured_courses_headline }}
          </div>
          <div class="homepage-intro-subheadline">
              {{ homepage.featured_courses_subheadline }}
          </div>
        </div>
    </div>
    <div class="col-0 col-lg-1"></div>
    <div class="col-12 col-md-6 col-lg-4">
      <a href="{% route catalog %}" class="catalog-card">
        <p class="catalog-card-header">Course Library</p>

        <p class="catalog-card-subhead">Click here to explore our catalog of courses&nbsp;<i class="fal fa-long-arrow-right"></i></p>
      </a>
    </div>
  </div>
  
  {% include "cards_categories", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3" %}

</div>

{% include "homepage_events" %}

{% include "section_faqs" %}

{% include "section_contact_us" %}

</main>
{% include "footer" %}


<style>
.homepage-intro {
  margin-bottom:64px;
}

.homepage-intro-headline {
  font-size: 36px;
  font-weight: bold;
  margin-bottom:16px;
}

.homepage-intro-subheadline {
  font-size: 18px;
  line-height: 26px;
}

.np-homepage .np-subpage-container {
  padding: 0 24px 50px;
  max-width: 1400px;
  margin:auto;
}

.catalog-card {
  background: #fafafa;
  padding: 32px;
  color: #212121;
  text-decoration: none;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  cursor:pointer;
}

.catalog-card:hover {
  color: #212121;
}

.catalog-card:hover .catalog-card-subhead {
  color: #009999;
}

.catalog-card-header {
  font-size: 24px;
  font-weight: bold;
}

.catalog-card-subhead {
  font-size:18px;
  line-height:22px;
  color:#009999;
  display:inline-flex;
  align-items: center;
}




.np-card-content {
  background: #f4f4f4!important;
}

.np-card-content-title {
  shadow: 0!important;
}

.courses-left-small {
  padding-top: 190px;
}

@media (min-width:1170px) {
.np-homepage .np-subpage-container {
  padding: 0 22px 120px;
}
}

</style>