/* Hero banner carousel styles */

#heroBannerCarousel {
    overflow: hidden;
}

#heroBannerCarousel #bannerTrack {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}

#heroBannerCarousel .banner-slide {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#heroBannerCarousel .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#heroBannerCarousel #bannerDots button {
    display: inline-block;
    height: 5px;
    width: 5px;
    border-radius: 9999px;
    background-color: #475569; /* slate-600 */
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

#heroBannerCarousel #bannerDots button:hover {
    background-color: #94a3b8; /* slate-400 */
}