/* Styles for slider */
.slider {
    position: relative;
    width: 100%;
    height: 40vh;
    overflow: hidden;
    display: block;
    background: none; /* remove any previous background */
}

/* slides */
.slider .slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.slider .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    transition: opacity 0.6s ease;
}
.slider .slide.active { opacity: 1; transform: scale(1); }

/* overlay */
.slider::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: rgba(0,0,0,0.25); */
    z-index: 1;
}

/* container content sits above overlay */
.slider .container{
    position: relative;
    z-index: 2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    height: 100%;
}

/* prev/next */
.slider .prev, .slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255,255,255,0.7);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
}
.slider .prev { left: 12px; }
.slider .next { right: 12px; }

/* indicators */
/* indicators removed */

/* responsive adjustments */
@media (max-width: 1000px) {
    .slider { height: 35vh; }
    .slider .prev, .slider .next { display:none; }
    .slider { background-attachment: unset; }
    .slider .container { position: relative; top: 50%; transform: translate(0, -50%); }
}
@media (max-width: 576px) {
    #banner { height: 45vh; }
}