<div class="carousel-section-wrapper np-max-width" id="systems-coaching">
    <div class="carousel-header-container reduce-padding">
      <div class="carousel-heading-text">
        Systems and Technology Coaching
      </div>
      <div class="see-all-btn-container">
        {% comment %} <a class="see-all-btn" href="/app/see-all-page">
          See All
        </a> {% endcomment %}
      </div>
    </div>
    <div class="featured-instructors-carousel np-carousel" >
        <div class="np-carousel-card margin-r-5">
            <div class="carousel-card-container">
                <img class="featured_instructors_carousel_image" src="https://s3.amazonaws.com/static.northpass.com/LightHouse-LJHooker/Coach+images/Tegan+Pratt.png" />
                <div class="card-content-container">
                    <div class="instructor-heading">Tegan Pratt</div>
                    <div class="instructor-profession">Business Solutions Coach</div>
                    <div class="instructor-desc">
                        <div class="specialties-header">Tegan specialises in:</div>
                        <ul>
                          <li>Vendor App/Portal</li>
						  <li>Onboarding/Offboarding experience</li>
                          <li>Platform</li>
						  <li>Getting the most out of Agent Pages</li>
						  <li>Website fundamentals</li>
                        </ul>
                    </div>
                    <div class="btn-container">
                        <a class="np-button" href="/app/tegan-pratt">Book a Session</a>
                    </div>
                </div>

            </div>
        </div>

        <div class="np-carousel-card margin-r-5">
            <div class="carousel-card-container">
                <img class="featured_instructors_carousel_image" src="https://s3.amazonaws.com/static.northpass.com/LightHouse-LJHooker/Kiarni+Hall+1.jpg" />
                <div class="card-content-container">
                    <div class="instructor-heading">Kiarni Hall</div>
                    <div class="instructor-profession">Business Solutions Specialist</div>
                    <div class="instructor-desc">
                        <div class="specialties-header">Kiarni specialises in:</div>
                        <ul>
                          <li>Platform</li>
                          <li>Agent/Vendor Portal (Reporting)</li>
						  <li>Realhub & Engage</li>
                          <li>Digital marketing</li>
						  <li>Website fundamentals</li>
                        </ul>
                    </div>
                    <div class="btn-container">
                        <a class="np-button" href="/app/kiarni-hall">Book a Session</a>
                    </div>
                </div>

            </div>
        </div>

        <div class="np-carousel-card margin-r-5">
            <div class="carousel-card-container">
                <img class="featured_instructors_carousel_image" src="https://s3.amazonaws.com/static.northpass.com/LightHouse-LJHooker/Steven+Shea+600x400.png" />
                <div class="card-content-container">
                    <div class="instructor-heading">Steve Shea</div>
                    <div class="instructor-profession">Business Solutions Specialist</div>
                    <div class="instructor-desc">
                        <div class="specialties-header">Steve specialises in:</div>
                        <ul>
                          <li>Google business profile + reviews </li>
                          <li>Social media overview</li>
						  <li>Website management</li>
                          <li>Digital marketing overview (optimising your online presence)</li>
                          <li>Agent Pages</li>
                        </ul>
                    </div>
                    <div class="btn-container">
                        <a class="np-button" href="/app/stephen-shea">Book a Session</a>
                    </div>
                </div>

            </div>
        </div>

        {% comment %} <div class="np-carousel-card margin-r-5">
            <div class="carousel-card-container">
                <img class="featured_instructors_carousel_image" src="https://s3.amazonaws.com/static.northpass.com/LightHouse-LJHooker/Brooke+Hardman+(600x400).png" />
                <div class="card-content-container">
                    <div class="instructor-heading">Brooke Hardman</div>
                    <div class="instructor-profession">Business Solutions Support</div>
                    <div class="instructor-desc">
                        <div class="specialties-header">Brooke specialises in:</div>
                        <ul>
                            <li>Optimise Google Business profiles</li>
                            <li>Website updates and management</li>
                            <li>Creating a bespoke LJ Hooker website</li>
                            <li>Agent Pages</li>
                        </ul>
                    </div>
                    <div class="btn-container">
                        <a class="np-button" href="/app/brooke-hardman">Book a Session</a>
                    </div>
                </div>

            </div>
        </div> {% endcomment %}

    </div>
</div>

<script>
    $(document).ready(function(){

        $(".featured-instructors-carousel").slick({
            dots: true,
            slidesToShow: 3,
            prevArrow: '<i class="fal fa-chevron-left slick-arrow "></i>',
            nextArrow: '<i class="fal fa-chevron-right slick-arrow"></i>',
            infinite: false,
            responsive: [

                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 1,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
            ]
        });
    });

</script>

<style>
#systems-coaching.carousel-section-wrapper {
    padding: 100px 24px 0;
}

#systems-coaching .instructor-heading {
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

#systems-coaching .instructor-profession {
    color: #000;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0.5rem;
    flex:1;
}

#systems-coaching .instructor-desc {
    margin-bottom: 32px;
    flex: 6;
}
#systems-coaching .btn-container{
    display: flex;
    justify-content: flex-end;

}

#systems-coaching .featured_instructors_carousel_image {
    width: 100%;
}
</style>
