/*

 * Home Carousel

 * All rules are scoped under .home-carousel so this stylesheet cannot leak

 * into or override the template, or the design of the HTML pasted into

 * each slide (that markup keeps its own existing classes/CSS untouched).

 */



.home-carousel {

    position: relative;

    width: 100%;

    max-width: 100%;

    margin: 0 auto;

    /* padding: 0 44px; */

    padding: 0 56px;

    box-sizing: border-box;

}



.home-carousel,

.home-carousel * {

    box-sizing: border-box;

}



.home-carousel .hc-heading {

    text-align: center;

    font-weight: 700;

    margin: 0 0 12px;

    font-size: 1.75rem;

    line-height: 1.3;

}



.home-carousel .hc-subheading {

    text-align: center;

    margin: 0 auto 28px;

    max-width: 720px;

    color: #6b6b6b;

    line-height: 1.6;

}



.home-carousel .hc-swiper {

    width: 100%;

    padding-bottom: 40px;

    overflow: hidden;

}
.home-carousel .hc-swiper > .swiper-pagination {
    bottom: 8px;
}



.home-carousel .swiper-wrapper {

    display: flex;

    flex-wrap: nowrap;

    align-items: stretch;

}



.home-carousel .swiper-slide {

    flex-shrink: 0;

    height: auto;

}



.home-carousel .hc-slide {

    height: auto;

    display: flex;

    flex-direction: column;

    background: transparent;

}



.home-carousel .swiper-pagination-bullet {

    opacity: 0.4;

}



.home-carousel .swiper-pagination-bullet-active {

    opacity: 1;

    background: currentColor;

}



/* .home-carousel .swiper-button-next,

.home-carousel .swiper-button-prev {

    color: inherit;

    width: 36px;

    height: 36px;

    margin-top: -18px;

}



.home-carousel .swiper-button-next::after,

.home-carousel .swiper-button-prev::after {

    font-size: 16px;

} */



.home-carousel .swiper-button-next,

.home-carousel .swiper-button-prev {

    color: #555;

    width: 44px;

    height: 44px;

    margin-top: -22px;

}



.home-carousel .swiper-button-prev {

    left: 0;

}



.home-carousel .swiper-button-next {

    right: 0;

}



.home-carousel .swiper-button-next::after,

.home-carousel .swiper-button-prev::after {

    font-size: 18px;

    font-weight: 700;

}



.home-carousel--empty {

    text-align: center;

    padding: 40px 20px;

    color: #6b6b6b;

}



@media (max-width: 767px) {

    .home-carousel {

        padding: 0 28px;

    }



    .home-carousel .swiper-button-next,

    .home-carousel .swiper-button-prev {

        display: none;

    }

}