{% include "header" %}
{% assign enrolled_courses = courses.enrolled %}
{% include "sub_navigation" %}
<main>
  
  <div class="np-main">
      <div class="coaching-carousel-container">
          <div class=" np-max-width">
            <div class="np-homepage-featured-text">
              <div class="text-color-white heading-text">
                Coaching from the best
              </div>
            </div>
            {% include "carousel_coaches_hero" %}
          </div>
      </div>
  </div>
  
  {% include "carousel_coaches_sales" %}

  {% capture quote_title %} {% endcapture %}
  {% include 
    "quote_section",
    quote_text: "You can't afford to stay still. When you say ‘It's good enough’ you slip backwards",
    quote_author: "Sir Leslie Hooker",
    quote_title: quote_title
  %}

  {% include "carousel_coaches_leadership_management" %}
  {% include "carousel_coaches_property_management" %} 
  {% include "carousel_coaches_commercial_coaching" %} 
  {% include "carousel_coaches_systems" %}

  <div class="np-carousel-section np-max-width continue-carousel">
    {% capture carousel_heading %} Continue from where you left off{% endcapture %}
    {% assign carousel_see_all_link = "/app/in-progress-page" %}
    {% include 
      "carousel_courses", 
      progress: "in-progress", 
      category: "any", 
      heading: carousel_heading, 
      see_all_link: carousel_see_all_link,
      enrolled_courses: enrolled_courses 
    %}
  </div>
  

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


<style> 
.continue-carousel {
  padding: 100px 24px 0;
}
.np-homepage-featured-text {
  padding: 22px 0 16px;
}

.coaching-carousel-container {
    background: black;
}
.heading-text {
  font-size: 26px;
}

.black-bottom {
  background: black;  
}

.carousel-heading-text {
  font-size: 2rem;
  font-weight: 800;
}
.np-carousel .slick-arrow.fa-chevron-right:before {
  background: #b3b3b3;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.np-carousel .slick-arrow.fa-chevron-right {
  top: 120px;
}

.black-carousel-text-heading {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  align-items: center;
  width: 94%;
}

.np-carousel .slick-arrow.fa-chevron-left:before {
  background: #b3b3b3;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  right: 65px;
}
.np-carousel .slick-arrow.fa-chevron-left {
  top: 120px;
  background: none;
}
.np-carousel-courses {
  margin-left: 15px;
  margin-right: 15px;
}

@media (min-width:768px) {
  .heading-text {
    font-size: 55px;
  }
}


</style>