<div class="black-carousel">


    <div class="black-bottom">
        <div class="np-homepage-featured np-max-width">
          <div class=" black-carousel-text-heading">
            <div class="carousel-heading-text text-color-white">
              Upcoming Events
            </div>
            <div class="see-all-btn-container">
              <a class="see-all-btn" href="/app/see-all-page">
                See All
              </a>
            </div>
          </div>
        </div>
      </div>


    <div class="np-homepage-featured-items np-max-width">
        <div class="events-carousel np-carousel np-carousel-bg-blue" >
            <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/ales-nesetril-Im7lZjxeLhg-unsplash.jpg" alt="Christine Mikhael" />
                    <div class="card-content-container">
                        <div class="instructor-heading text-color-white ">System and Technology Training</div>
                        <div class="instructor-desc text-color-white ">Join industry expert Josh Phegan for a masterclass to get the most out of your prospecting strategy. Every person you meet is an opportunity to build your pipeline. In this session you will learn what activities to focus on for generating leads.</div>
                        <div class="btn-container">
                            <a class="instructors-btn">Book Now</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/leuchtturm-entertainment-boCDlcZvaJI-unsplash.jpg" alt="Greg Allan" />
                <div class="card-content-container">
                    <div class="instructor-heading text-color-white ">Leadership</div>
                    <div class="instructor-desc text-color-white ">Join industry expert Josh Phegan for a masterclass to get the most out of your prospecting strategy. Every person you meet is an opportunity to build your pipeline. In this session you will learn what activities to focus on for generating leads.</div>
                    <div class="btn-container">
                        <a class="instructors-btn">Book Now</a>
                    </div>
                </div>
    
            </div> {% endcomment %}
    
            </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/john-schnobrich-FlPc9_VocJ4-unsplash.jpg" alt="Josh Phegan" />
                    <div class="card-content-container">
                        <div class="instructor-heading text-color-white ">Property Managment</div>
                        <div class="instructor-desc text-color-white ">Join industry expert Josh Phegan for a masterclass to get the most out of your prospecting strategy. Every person you meet is an opportunity to build your pipeline. In this session you will learn what activities to focus on for generating leads.</div>
                        <div class="btn-container">
                            <a class="instructors-btn">Book Now</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

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

        $(".events-carousel").slick({
            dots: false,
            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>

    .black-carousel {
        clip-path: polygon(100% 0, 100% 75%, 75% 100%, 0 100%, 0 0);
        background: black;
    }
.instructor-heading {
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    flex: 1;
} 

.instructor-name {
    color: #276092;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.instructor-desc {
    margin-bottom: 3rem;
    flex: 2;
}
.btn-container{
    display: flex;
    justify-content: flex-end;
    
}
.instructors-btn{
    background: rgb(133,159,193);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
    font-weight: 700;
}

.featured_instructors_carousel_image {
    width: 100%;
}

.margin-r-5 {
    margin-right: 5rem;
}
.events-carousel {
    padding-bottom: 7rem;
}
</style>