/* ==========================================
   Hero Component Styles - Banner Only
   ========================================== */

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: calc(var(--header-height) + var(--top-bar-height));
}

.hero-slider {
    position: relative;
    width: 100%;
    line-height: 0;
}

.hero-slide {
    position: relative;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide-bg {
    width: 100%;
    height: auto;
    display: block;
}

.hero-slide-bg img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}